vue

学习vue从指令开始
1.v-text 用来设置元素的文本内容 相当于innerText
用法：<h1 v-text="msg">默认的文本内容</h1>
2.v-html 相当于innerHTML
用法：<h1 v-html="msg">默认的文本内容</h1>
3.v-bind 用来给当前元素绑定html属性，进行html属性数据帮绑定
<h1 v-bind:title="msg" v-bind:zhidingyi="xm">默认的文本内容</h1>
简写 <h1 :title="msg" :zhidingyi="xm">默认的文本内容</h1>
引号内是表达式或属性
样式处理 class和style
对象的键表示类的名称，值为true表示添加类，false不添加
<div v-bind:class="{ active: true }"></div> 等价于
<div class="active"></div>
<div :class="['active']"></div> 等价于
<div class="active"></div>
数组中元素不带引号，表示属性，属性的值表示类名
<div v-bind:class="[{ active: true }, shuxingClass]"></div> ===>
<div class="active text-danger"></div>
style:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
baseStyles是data的属性，其值类型是对象（baseStyles：{fontSize: '30px'}）
<div v-bind:style="[baseStyles, overridingStyles]"></div>
4.v-on 绑定事件
语法：v-on:click=”say” or v-on:click=”say(‘参数’, event)” 简写：@click=”say” 完整语法 缩写 name:属性，带引号就是字符串；event:用于获取当前元素节点
<div @click="fn(name,$event)"></div>

vue配置项methods提供方法或事件
methods: {
doSomething：function（）{},
fn:function (na, e) {
e.currentTarget.innerHTML='hello'
this.msg = na
}
}
事件修饰符：
.stop 停止冒泡 调用 event.stopPropagation()
.prevent 阻止默认行为，调用 event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
.once 事件只触发一次
<button @click.stop="fn1">按钮</button>
5.v-model 实现数据双向绑定 监听用户的输入事件更新数据
选择后触发cacl事件， opt的值发生改变
<select @change="calc" v-model="opt">
<option value="1">北京</option>
<option value="2">天津</option>
</select>
6.v-for
item 为值，key 为键，index 为索引
通过 key 属性来让Vue保证列表中每一项的唯一性，提高渲染的性能
说明：使用 key，vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
<div v-for="(item, key, index) in obj" :key="index">{{item}}</div>
<div v-for="item in obj">{{item}}</div>
7.v-if 和 v-show
v-if：根据表达式的值的真假条件，销毁或重建元素
v-show：根据表达式值的真假，切换元素CSS 的 display 样式属性
8.v-pre和v-once
v-pre：跳过这个元素和它的后代元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。用于优化更新性能。
v-pre：跳过这个元素和它的后代元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。用于优化更新性能。