前端框架vue-基础指令总结
Posted 秦川以北
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端框架vue-基础指令总结相关的知识，希望对你有一定的参考价值。
春天来了，天气转暖，万物复苏在这个新事物与旧事物交替的季节，迎着朝阳的我们，在风暴面前是无发阻挡我们对知识未知的渴求的，在书中在知识里你融入进去的那种感觉无比美妙，就好似你听一首交响曲，用心去听是听到的每个音符的律动，在五线谱中颠荡起伏的感觉，其实艺术生活知识都是相辅相成的，没有哪个是单独的存在。
哎呀小冷好像跑偏了抱歉，把正经的事给忘记了，今天小冷分享的依然是vue，这个还是基础的各种指令，可能会与之前重复，不过这个是小冷自己写的笔记见谅！希望小冷不仅可以和各位分享技术还可以分享生活，如果大家有想要分享的东西可以关注@秦川以北呼叫小冷哦谢！
el指定要控制的区域 data是个对象，指定了控制的区域内要用到的数据 method虽然带个s，但是个对象，这里可以定义多个方法
在vm实例中，如果要访问data上的数据，或者要访问methods中的方法，必须带this
在v-for要会使用key属性（只接受 string/number）
v-model只能用于表单元素
在vue中绑定样式两种方式 v-bind：class v-bind：style
如果有需要资料的话可以去小冷百度网盘下载：
链接：https://pan.baidu.com/s/1H8jiwYM4cQ4TUYK4MoJ0Uw
提取码：6lzz
复制这段内容后打开百度网盘手机App，操作更方便哦
喜欢的话可以给我投稿！分享你的生活！
1.mvc和mvvm的区别
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。
MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。
2.vue中最基本代码结构
（1）先导入vue的包安装node
（2）new Vue对象结构为
<div id="app">
<input type="button" value="toggle" @click="flag=!flag" />
<!-- v-if的特点是每次都会重新删除或创建元素 -->
<h3 v-if="flag">这是v-if控制的元素</h3>
<!-- v-show的特点 每次不会重新进行dom的删除和创建操作，只是切换了元素 display：none样式 -->
<!-- v-if有较高的切换性能消耗 -->
<!-- v-show有较高的初始渲染消耗 -->
<!-- 如果元素涉及到频繁的切换，最好不要使用v-if，而是推荐使用v-show -->
<!-- 如果元素可能永远不会被显示出来被用户看到，则推荐使用v-if -->
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
===================指定div的id用el绑定id即可=================
<script>
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: '中国',
genrt: '男'
}
},
methods: {
}
})
</script>
3.基本指令
插值表达式
v-cloak
<!-- 使用v-cloak 能解决插值表达式的闪烁的问题 -->
v-text
<!-- 默认v-text是没有闪烁的问题的 -->
v-html
<!-- 可以在data的一个变量中写html标签并且可让浏览器识别 -->
v-bind（缩写：）
<!-- v-bind vue提供的属性绑定机制缩写是： -->
v-on（缩写@）
<!-- vue中v-on绑定事件机制-->
v-model
<!-- data中对象属性和标签的双向绑定 -->
v-for
<!-- 遍历data中的集合对象 -->
v-if
<!-- v-if的特点是每次都会重新删除或创建元素 -->
<!-- v-if有较高的切换性能消耗 -->
<!-- 如果元素可能永远不会被显示出来被用户看到，则推荐使用v-if -->
v-show
<!-- v-show的特点每次不会重新进行dom的删除和创建操作，只是切换了元素 display：none样式 -->
<!-- v-show有较高的初始渲染消耗 -->
<!-- 如果元素涉及到频繁的切换，最好不要使用v-if，而是推荐使用v-show -->
4.事件修饰符：
.stop .prevent .capture .self .once
<!-- 使用 .stop 阻止冒泡 -->
<!-- 使用 .prevent 阻止默认行为 -->
<!-- 使用 .capture 实现捕获触发的事件 -->
<!-- 使用 .self 实现只有点击当前元素时候，才会触发-->
<!-- 使用 .self 只阻止自己的冒泡行为，不会阻止其他的 -->
<!-- 使用 .once 只触发一次事件-->
以上是关于前端框架vue-基础指令总结的主要内容，如果未能解决你的问题，请参考以下文章