一、 vue指令相关
模板 {{ }} 传入的是表达式，一般具有返回值。
一般JS中常见的赋值表达式，逗号表达式，布尔表达式，函数表达式（匿名函数），以及三目运算符。
标签中的新属性
- v-bind：我们能将 data 中的值绑定到当前属性中，可简写为 :
- v-on：能够绑定实例中配置的事件，可简写为 @
- v-for：列表级别渲染，迭代渲染所有⼦元素
- v-if/v-else/v-show：控制⼦元素视图显隐
- v-model：应⽤于表单，创建与元素的双向绑定
- v-html：将最终值的结果渲染为 html
- v-text：等同于直接在⽂本处使⽤ {{xx}}
- v-cloak: 解决初始化的数据双向绑定问题 给根节点添加v-cloak，配合[v-cloak]:{ display: none}
v-once: v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
<span v-once>This will never change:{{msg}}</span> //单个元素 <div v-once>//有子元素 <h1>comment</h1> <p>{{msg}}</p> </div> <my-component v-once:comment="msg"></my-component> //组件 <ul> <li v-for="i in list">{{i}}</li> </ul> // 复制代码上面的例子中，msg,list即使产生改变，也不会重新渲染。v-el: 可以使用v-el指令，去给这个元素注册一个索引，方便通过所属实例的$el访问这个元素。
<span v-el:msg>hello</span> <span v-el:other-msg>world</span> this.$els.msg.textContent //-> "hello" this.$els.otherMsg.textContent// -> "world" this.$els.msg//-><span>hello</span>事件修饰符
.stop 阻止事件继续传播 .prevent 事件不再重载页面 .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 .self 只当在 event.target 是当前元素自身时触发处理函数 (例如把self放到了父元素上面，点击子元素，父元素的事件不被触发) .once 事件将只会触发一次 .passive 告诉浏览器你不想阻止事件的默认行为
v-if & v-show 的区别
v-if 是惰性的，如果初始化渲染为false,则什么也不做，一直到条件第一次为true时，才会开始渲染，且配合v-else 使用，直接删除当前dom节点的，
v-show不管初始化条件是什么，都会被渲染，内在逻辑是display显示切换
综合而言， v-if 有更高的切换开销，v-show更高的初始化渲染开销，适合频繁的切换
二、 计算属性
computed： 只有依赖改变时才会触发重新计算， 惰性化，初始化执行一次，依赖改变触发执行，函数也有类似的功能，但是非依赖也会执行，计算属性无法传递值进去
三、render方法
runtime只加载运行时代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='app'>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello word'
},
render(createElement){
return createElement('div', null, [createElement('span', null, this.message)]);
}
})
</script>
</body>
</html>四、vue组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<hello-world></hello-world>
<hello-world></hello-world>
<hello-world></hello-world>
</div>
<script>
Vue.component('hello-world', {
data: function(){
return {
message: 'hello world'
}
},
template: '<p>{{message}}</p>'
})
new Vue({ el: '#app' })
</script>
</body>
</html>五、插槽
插槽里面不可以用props，只能用插槽作用域的方式传递父数据
六、过滤器
过滤器没有this，不能访问this，指向undefined
七、路由
子组件用默认路由，父组件不可用name跳转
组件内的路由钩子
beforeRouteUpdate(to, from, next) {
this.getNews()
next();}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。