vue2.x -简介
Vue框架的意义：vue 在编码背后做了大量工作。
现在数据和 DOM 已经被建立了关联,响应式数据和非响应式数据。
指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
几乎任意类型的应用界面都可以抽象为一个组件树。
vue 常用选项参数
var vm = new Vue({
data: {},
created(){},
computed:{},
watch:{},
methods:{},
})
vue 钩子函数和生命周期
created 钩子可以用来在一个实例被创建之后执行代码还有 mounted、updated 和 destroyed
场景： 在使用echarts 元素挂载的时候用过 mounted
vue 计算属性
计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。
vue 侦听属性
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。
更新时使用侦听属性监听表单变化，判断是否调用更新接口。
场景： 调用表单修改接口时可侦听表单对象是否修改，有修改则调用修改按钮。
vue 增强绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。
<div :class="{ active: isActive }"></div>
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :class="[activeClass, errorClass]"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="[baseStyles, overridingStyles]"></div>
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
vue 组件
组件注册有全局注册和局部注册
Vue.component("",{
props:[], // 参数接收
template:"", // 参数接收
})
vue 组件通信
子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件
使用 $emit 的第二个参数来提供这个值
一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
vue 响应式数据
只有当实例被创建时就已经存在于 data 中的属性才是响应式的。
使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
有前缀 $是vue实例属性方法，以便与用户定义的属性区分开来。
console.log(this.$data === data);
this.$watch('a',function(newVal,oldVal){})
场景： 响应数据初始化
export default{
resetSubmit(){
this.queryForm = Object.assign({},this.queryForm,this.queryFormInit);
},
}
vue 实例初始化过程包括
设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等
vue 模板语法
vue 支持 Mustache 双大括号语法。
vue 提供完全的 JavaScript 表达式支持。
设计模板内的表达式的初衷是用于简单运算的。
在模板中放入太多的逻辑会让模板过重且难以维护。
vue 常用指令1
v-bind 动态绑定元素属性。
v-on 指令添加一个事件监听器。
v-model 指令能轻松实现表单双向绑定。
v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。
v-html 来复合局部模板
vue 条件判断
v-if 指令用于条件性地渲染一块内容
v-for 指令用于列表渲染
v-else-if 指令用于条件性地渲染一块内容
v-else 指令用于条件性地渲染一块内容
v-show 指令 是另一个用于根据条件展示元素的选项
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-if 有更多的切换开销
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，知道条件为真。
v-show 只是简单地切换元素的 CSS property display
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
v-show 有更高的初始渲染开销
v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
vue 列表渲染
v-for 还支持一个可选的第二个参数，即当前项的索引。
你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法。
在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
vue2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。
vue 常用指令2
v-bind 动态绑定属性，静态绑定属性
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :class="[activeClass, errorClass]"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
v-show v-show 不支持 元素，也不支持 v-else 初始渲染开销大
v-model 表单双向绑定
<input v-model.lazy="msg">
<input v-model.number="age" type="number">
<input v-model.trim="msg">
<input v-model.lazy="msg">
vue 数组方法包裹
//Vue 将被侦听的数组的变更方法进行了包裹
let arr =[];
arr.push()
arr.pop()
arr.shift()
arr.unshift()
arr.splice()
arr.sort()
arr.reverse()
//数组替换方法 filter()、concat() 和 slice()。
//它们不会变更原始数组，而总是返回一个新数组。
arr.filter()
arr.concat()
arr.slice()
vue 渲染顺序
添加一个具有唯一值的 key attribute 表达“这两个元素是完全独立的，不要复用它们”
vue 动态事件绑定 动态参数预期会求出一个字符串，异常情况下值为 null
<a @[eventName]="doSomething"> doSomething </a>
vue 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
<!--表单默认提交-->
<form @submit.prevent="onSubmit">...</form>
<a @click="doSomething">...</a>
<a @[event]="doSomething"> ... </a>
<!--a标签默认跳转 阻止冒泡 -->
<a v-on:click.stop.prevent="doThat"></a>
<form v-on:submit.prevent="onSubmit"></form>
<a v-on:click.stop.prevent="doThat"></a>
<div v-on:click.capture="doThis">...</div>
<div v-on:click.self="doThat">...</div>
<a v-on:click.once="doThis"></a>
<div v-on:scroll.passive="onScroll">...</div>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
vue 按键修饰符 按键码 系统修饰符
<input v-on:keyup.enter="submit">
<input v-on:keyup.13="submit">
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>