一、视图输出指令 作用：把 model绑定到view
v-text和v-html
- 1. 默认 v-text 是没有闪烁问题的，v-text可以简写为{{}},并且支持逻辑运算
- 2. v-text会覆盖元素中原本的内容，但是 插值表达式 1这种，只会替换自己的这个占位符，不会把 整个元素的内容清空
- 3. 默认 v-html 覆盖内部内容， 输出HTML
v-text 实例
<span v-once>这个将不会随msg属性的改变而改变: {{ msg }}</span>v-html 实例
<p v-html="html"></p>二、属性绑定指令 作用：把model动态绑定view
v-bind ：是 Vue中，提供的用于绑定属性(title)的指令
-
1. 直接使用指令
v-bind -
2. 使用简化指令
: -
3. 在绑定的时候，拼接绑定内容：
:title="btnTitle + ', 这是追加的内容'"实用实例
-
通常，我们会传给
v-bind一个对象，这样我们可以动态地切换一些属性值，比如绑定Class或者Style，像这样：// isBlue是布尔值，blue类是否存在取决于isBlue是否为真 <div :class="{ blue: isBlue }"></div> // thisFont是变量，字体大小随thisFont而变化 <div :style="{ fontSize: thisFont + 'px' }"></div> // 当然如果属性多的话，可以这样写 <div :style="styleBox"></div> // JS data () { return { styleBox: { fontSize: 20px, color: #ccc, ... } } }三、事件绑定指令 作用：把model动态绑定onclick
-
事件绑定机制，除了可以绑定click还可以绑定其他事件
-
简写：@
-
绑定控件事件到vm
-
+ .stop 阻止冒泡
+ .prevent 阻止默认事件
+ .capture 添加事件侦听器时使用事件捕获模式
+ .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
+ .once 事件只触发一次 -
实例
<!-- 使用 .stop 阻止冒泡 -->
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
<!-- 使用 .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
<!-- 使用 .capture 实现捕获触发事件的机制 -->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<!-- 使用 .once 只触发一次事件处理函数 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>
四、v-model 作用：双向绑定，不再单纯 绑定到view,view的值改变同样会作用于model
- 唯一双向绑定指令
- 注意： v-model 只能运用在 表单元素中 input(radio, text, address, email....) select checkbox textarea
1. HTML 代码结构 <div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="0">+</option> <option value="1">-</option> <option value="2">*</option> <option value="3">÷</option> </select> <input type="text" v-model="n2"> <input type="button" value="=" v-on:click="getResult"> <input type="text" v-model="result"> </div> 2. Vue实例代码： // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, result: 0, opt: '0' }, methods: { getResult() { switch (this.opt) { case '0': this.result = parseInt(this.n1) + parseInt(this.n2); break; case '1': this.result = parseInt(this.n1) - parseInt(this.n2); break; case '2': this.result = parseInt(this.n1) * parseInt(this.n2); break; case '3': this.result = parseInt(this.n1) / parseInt(this.n2); break; } } } });五、v-for和key属性
- 迭代数组-普通数组-对象数组
<ul>
<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>
<ul>
<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
</ul>- 迭代对象中的属性
<!-- 循环遍历对象身上的属性 -->
<div v-for="(val, key, i) in userInfo">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</ div>- 迭代数字---count从1开始
<p v-for="i in 10">这是第 {{i}} 个P标签</p>- 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
六、v-if和v-show
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。