Vue实例

vue的每一个组件都是一个实例，该实例对应很多属性和方法。
所接受的数据类型：number/string/boolean/array/json/undefined/null

<div id="root">
<div @click="fn">
{{message}}
</div>
</div>

<script>
var vm = new Vue({
el: '#root',
data: {
message: 'hello world'
},
methods: {
fn: function () {
alert("hello")
}
}
})
</script>

数据绑定

插值表达式

{{数据名}} mustache语法 声明式渲染

指令

v-text=“数据名”`

v-html="数据"

非转义输出

属性

v-bind:html属性="数据"

属性值动态化

:html属性="数据"

简写

v-bind:[属性名]="数据"

属性名动态化

Vue实例的生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

生命周期钩子的

this

上下文指向调用它的 Vue 实例。

查看官网介绍

不要在选项属性或回调上使用箭头函数，比如

created: () => console.log(this.a)

或

vm.$watch('a', newValue => this.myMethod())

。
因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致

Uncaught TypeError: Cannot read property of undefined

或

Uncaught TypeError: this.myMethod is not a function

之类的错误。

计算属性

官网教程
是一个函数,所依赖的元数据变化时，会再次执行，平时会缓存，是响应式的，需要在模板中渲染才可调用

语法

//定义
computed:{
计算属性: function(){return 返回值}
}
//使用
使用:	{{计算属性}} |  v-指令="计算属性"

computed    VS    method

method	computed
方法会每次调用	基于它们的响应式依赖进行缓存的
一般	性能高
{{methodname()}}	{{computedname}}
适合强制执行和渲染	适合做筛选

属性检测

官网教程
需要在数据变化时执行异步或开销较大的操作时，而计算属性是同步的，这个时候需要属性检测watch

定义一个选项

watch:{
数据名:'method函数名'    //数据名==data的key
数据名:函数体(new,old){}
数据名:{
handler:fn(new,old){},
deep: true //深度检测
immediate: true //首次运行
}
}

计算属性 VS 函数 VS 属性检测

	计算属性	函数	属性检测
依赖模板调用	√	-	×
是否缓存	√	×	√
异步	×	√	√

模板表达式

在dom里面插入数据，数据周围可以出现表达式，但不是语句，如

{{数据+表达式}}

v-指令="数据+表达式"

表达式：

1. title + 'abc'
2. `${title}123`
3. bl ? 'true' : 'false'
4. 'i love you'.split(' ').reverse().join(' ')