vue的基本知识
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
vue：官网：https://cn.vuejs.org
API：https://cn.vuejs.org/v2/api/
1>声明式渲染
基本使用：new出来一个Vue的实例，传一堆配置参数，控制一片html。
div id="app">
{{ message }}
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
}) v-show="布尔" v-if="布尔"
区别: 操作css 操作dom
场景: 适合频繁切换 适合不频繁切换
性能: 初始渲染消耗 频繁切换回有消耗
样式操作|属性绑定：
v-bind:class="数据|属性|变量|表达式"
:class/style = " 数据 " 数据类型：字符/对象/数组/对象型数组/字符型数组
:class="{类名:true,类名2:false}" 布尔值决定样式是否使用
:style="[{css属性名:值},{css属性名小驼峰：值}]" css属性名中有-时 可将属性名写成字符
事件：方法为函数
v-on:事件名="方法"
@事件名="方法" 简写
@事件名="方法(参数)"
@事件名="方法($event,参数)"
双向绑定的实现：
1.单向绑定模拟双向绑定： :value="..." model->view
v-on:input="fn($event.value)"
输入时把事件对象的value携带到方法，方法修改了model
2.指令实现双向绑定：v-model:创建双向数据绑定(M<->V) 用在能生产数据的表单元素
其它指令：
v-once 渲染一次
v-pre 原样输出，不编译
v-cloak 防止闪烁
v-text="数据名" 传递文本
v-html="标签" 非转义输出
自定义指令：指令是个函数|对象，用来操作dom的，里面的this 返回window
全局：Vue.directive("指令名不带v-",函数(el,binding))
el == 使用指令的DOM元素
binding 是个对象 含有转入的参数(binding.value)
一次只能定义一个指令
局部：定义在选项里面
directives:{指令名不带v-：函数(el,binding){}}
可以定义多个指令
指令是个函数(简写)，可以是个对象
3>计算属性
计算属性：是一个函数，所依赖的元数据变化时，会再次执行，平时会缓存，是响应式的，需要在模板中渲染才可以调用。
computed:{
计算属性：function(){return 返回值} 使用：{{计算属性}}
}
与methods的区别：
计算属性中的函数直接用插值表达式，不需要调用，methods中的函数需要调用(函数())
方法会每次调用，计算属性不会。
计算属性的性能高，适合做筛选，基于它们的响应式依赖进行缓存的
方法：适合在列表渲染使用，强制渲染执行。
4>数据观测：
属性检测|数据观测：需要在数据变化时执行异步或开销较大的操作时
watch:{
数据名："methods函数名" 数据名 == data的数据
数据名：函数体(new,old)
数据名：{
handler:fn(new,old),
deep:true 深度检测 默认false
immediate:true 首次运行 默认为false
}
}
默认情况下只能检测基本数据类型，打开深度检测，才能检测复杂数据类型(即复杂数据中的一个属性值发生改变，都会再次执行)
计算属性和属性检测的差异:
计算属性computed: 首次运行 调用时需要在模板中渲染，修改计算所依赖元数据 默认深度依赖(修改的数据是依赖的数据 即修改对象中的属性a也需要依赖对象中的属性a) 适合做筛选，不可异步
属性检测watch: 首次不允许 调用时只需修改元数据，无需再模板中渲染 默认浅度依赖 适合做执行异步或开销较大的操作
