1.2 vue几种常用的指令
**1.插入文本: v-text**
相当于元素的innerText属性，必须是双标签
**2.插入HMTL: v-html**
相当于元素的innerHTML属性
**3.循环: v-for**
如果names是数组，还有index属性，如v-for="（item,index） in names" ;
如果names是对象，还有value,key属性，如v-for="（value,key,index） in names";
**4.双向绑定:v-model**
一般用在表达输入，很轻松的实现表单控件和数据的双向绑定。只能给具备value属性的元素进行双向数据绑定。
**5,6,7.条件渲染：v-show,v-if ，v-else**
区别：
v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多，是否隐藏元素——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
v-if直接从代码中删除了，v-show只是通过display来切换状态
**8.属性绑定:v-bind**
这个指令用于响应地更新 HTML 特性，比如绑定某个class元素或元素的style样式。
v-bind:属性名="常量 || 变量名"，简写形式——:属性名="常量 || 变量名"
<div v-bind:属性名="变量"></div>
//可以简写成
<div :属性名="变量"></div>
//如果要赋值常量，需要给常量用单引号包起来，如
<div :属性名=" '常量' "></div>
//这样的方式然后绑定动态属性比较常见的有a标签的href,img标签的src。
- 1.3 vue常用的修饰符
**v-model的修饰符**
v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 和 上，默认通过监听元素的 input 事件来更新绑定的属性值。
.lazy 延迟了同步更新属性值的时机
var vm =new Vue({
el:"#app",
data: { input_lazy:"" }
});
//在页面中的 input 的元素上添加指令
<div class="row">
<h2>v-model.lazy</h2>
<input type="text" v-model.lazy = "input_lazy"/>
</div>
.number 该修饰符用来将输入内容自动转换成数值。
var vm =new Vue({
el:"#app",
data: {input_number:""}
});
<div class="row">
<h2>v-model.number</h2>
<input type="text" v-model.number= "input_number"/>
</div>
.trim 该修饰符用来自动过滤字符串前后的空字符。
<div class="row">
<h2>v-model.trim</h2>
<input type="text" v-model.trim= "input_trim"/>
</div>
//Vue会自动过滤掉前后的多个空格，最终属性值是前后没有空字符的字符串。
v-on的修饰符
绑定的事件修饰符可以改变事件的触发方式。
.stop 该修饰符将阻止事件向上冒泡。 同理于调用 event.stopPropagation() 方法
var vm =new Vue({el:"#app",
methods: {
div_click:function() {
console.log("div click...");
},
stop_click: function() {
console.log("stop_click...");
}
}
});
//将上面两个方法绑定到一组具有父子关系的元素上
div class="row">
<h2>v-on.stop</h2>
<div @click="div_click">
<button type="button" @click.stop="stop_click">StopPropagation</button>
</div>
<hr/>
</div>
按照事件冒泡原理，点击按钮时，从当前触发的元素开始，沿着它的父元素一直到根元素，都会依次触发 click 事件。但是应用了 .stop 修饰符后，将只会触发当前元素的 click 事件，并阻止事件向上冒泡。
.prevent 该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法
var vm =new Vue({el:"#app",
methods: {
form_submit:function() {
console.log("form submit...");
}
});
//
<div class="row">
<h2>v-on.prevent</h2>
<form @submit.prevent="form_submit">
<button type="submit">submit</button>
</form >
<hr/>
</div>
当点击提交按钮时，会触发绑定的事件，并且阻止表单提交并刷新当前页面的默认行为。
.self 该指令只当事件是从事件绑定的元素本身触发时才触发回调
<div class="row">
<h2>v-on.self</h2>
<div @click.self="div_click" style="display:inline-block; width: px; background-color:red;">
<button type="button" @click="stop_click">Button</button>
</div>
<hr />
</div>
因为父元素比它的子元素要长，所以右侧会有一部分红色的父元素显示出来。分别点击按钮和红色区域，查看控制台打印结果
因为 div_click 事件被修饰符绑定，只有在直接点击到父元素 div ，即红色区域内，事件才会被触发。
即使点击了它的子元素触发了子元素的事件，按照事件冒泡原理，父元素的事件应当被触发，但是因为事件的触发源并不是事件绑定的元素本身，所以父元素事件不会被触发。
.once 该修饰符表示绑定的事件只会被触发一次
<div class="row">
<h2>v-on.once</h2>
<button type="button" @click.once="once_click">Button</button>
<hr />
</div>
键值修饰符 该修饰符可以用来监听键盘事件
var vm = new Vue({
el: "#app",
methods: {
enter_click: function () {
console.log("enter click...");
}
}
});
<div class="row">
<h2>键值修饰符</h2>
<input type="text" @keyup.="enter_click" />
<hr />
</div>
