vue于jquery的区别
jquery主要时操作dom
vue 主要是操作数据 是一个渐进式前端框架，vue中渲染dom用到了diff算法，渲染dom要比原生js快
vue参数
Vue是一个构造函数，需要传入options
el
挂载根元素
template
模板字符串,有template直接渲染这里的内容，如果没有就找el元素中的内容进行渲染和挂载
data
为了各个实例直接互不影响，data需要是一个函数，返回一个对象
computed
监听多个数据，默认只有getter
watch
监听单个数据，watch监听单个属性，基本数据类型 简单监视
复杂数据类型 深度监听deep:true
props components methods
生命周期钩子
beforeCreate
组件创建之前，可以添加页面加载loading
created
组件创建之后，使用该组件，就会调用created方法，可以操作后端的数据，数据响应视图
应用 发送ajax请求
beforeMount
挂载数据到DOM之前会调用
mounted
挂载数据到DOM之后会调用，Vue作用之后的DOM
beforeUpdated
在更新dom之前 调用此钩子函数 应用 获取原始dom
updated
在更新dom之后调用， 应用 可以获取最新的dom
beforeDestory
例如 v-if 每次切换时false就会调用beforeDestory和destroyed
当为true时，组件会被重新渲染一次
destroyed
应用 清除定时器
为了防止上述情况，可以使用keep-alive实现组件的缓存；
keep-alive：vue的内置组件，能在组件的切换过程中将组件的状态保留在内存中，防止重复渲染dom
activated
组件被激活时调用 引用 路由
deactivated
组件被停用了
把v-if的dom放在keep-alive中就可以实现组件的缓存，在切换的过程中，就不会触发
beforeDestory destoryed钩子，指挥触发activated deactivated钩子
filters
ditrctivies
插值语法{{表达式}}
字符串 布尔值 三元表达式 对象 {{ {name:'zhangsan'} }}
MVVM model view view model
vue中内置指令
vue中的指令都是v-开头的，对于页面+数据的更为方便的输出
v-text innerText
v-html innerHTML
v-if 判断是否插入这个元素，相当于对元素进行创建和销毁
是懒惰的，true才会渲染 有更高的切换开销
v-else v-else-if
v-show 不管初始条件是啥都会渲染 有更高的初始渲染
v-for 优先级是最高的
data中的数据渲染在dom中，v-bind可以通过事件修改data，达到页面数据更新的目的，单项数据流，数据改变，视图跟着一起改变
双向数据流 v-model v-bind:value="msg" @input='msg=e.target.value'实现双向数据绑定
单向数据流 v-bind
v-model只适用用表单元素
可以自定义v-model组件
v-slot
v-model
v-on @
v-bind ：
v-pre
v-once
v-cloak
内置组件
component
keep-alive
slot
transition
transition-group
内置属性
is
key
ref
不能重名，如果重名只会获取最后一个dom元素，前面的dom会被覆盖
在原生dom上获取原生dom元素，如果在组件上获取的时组件对象，
尽量少用，vue中虚拟dom,使用diff算法渲染dom，速度比较快，如果使用ref操作dom就与原生js没什么区别了
$nextTick(function(){})当DOM更新循环结束之后执行延迟回调，在修改数据之后使用，可以在回调函数中获取到
更新后的DOM
slot
组件
声明 挂载 使用
在组件上直接绑定事件，是不能直接触发的，因为组件上默认为自定义事件，例如
<child @click="handleClick"></child>不会被系统识别为我们理解中的点击事件
必须通过$emit方法绑定它才行。
<body> <div id="root"> <child @click="handleClick"></child> </div> <script> Vue.component('child',{ template:'<div @click="handleChildClick">Child</div>', methods:{ handleChildClick:function(){ alert('child click') this.$emit('click') } } }) var vm = new Vue({ el: '#root', methods: { handleClick:function(){ alert('click') } } }) </script> </body>
如果想直接在组件上使用原生事件，需要在事件加上后缀.native就可以了
<child @click.native="handleClick"></child>
过滤器filters
使用过滤器:
数据属性 | 过滤器名称