Vue基础知识之指令和生命周期（一）
优点：轻量易学，灵活。
核心：通过尽可能简单的API来实现响应的数据绑定和组合的视图组件。
1、数据绑定：数据改变，驱动视图的自动更新。
2、视图组件化：把整个网页拆分成一个个区块，每个区块都可以看成一个组件，网页就是由多个组件拼接或者嵌套组成。
使用场景：
1、频繁操作DOM
2、项目中有多个部分都是相同的，并可以封装成一个组件。
3、vue.js的核心实现使用了ES5的Object.defineProperty特性，故而IE8以及以下的浏览器不兼容。
vue的安装和使用
npm install bower
bower info vue 查看所有版本
npm init -y
npm install vue -S
<div>
{{message}}
</div>
<script>
var vm=new Vue({
el:'#app',//可以指定vue的指定范围，不能给body和html
data:{
message:'hello world'
}
})
</script>
通过new Vue()创建一个vm，意即viewModel，数据要挂在VM上才能实现MVVM，VM会代理data中的所有数据 vm.message。Object.defineProperty。
指令
是一种特殊自定义的行内属性，在Vue中，指令以v-开头。
- 1、v-model：双向数据绑定，当你改变数据上的属性，视图也会随之变化。相反视图变化也会影响数据。只有input、radio、checkbox、textarea、select这五个元素可以增加v-model指令，其它均不行只能放置表达式。
- 2、v-once：数据只绑定一次，当数据在更改时不会更新内容。
- 3、v-html：当绑定的数据是html字符串时，展示正常的html
<div v‐once>{{message}}</div>
<div v‐html="html"></div>
data:{
html:'<h1>hello</h1>'
}
- 4、v-for：循环数组或者对象
<ul>
<li v‐for="(phone,index) in phones">{{phone}} {{index}}</li>
</ul>
data:{
phones:['apple','xiaomi','huawei']
}
//对象没有索引用的是键值对
<li v‐for="(value,key) in json" >
{{value}}
</li>
data:{
json:{name:'zfpx'}
}
<button v‐on:click="addFruit">按钮</button>
<ul>
<li v‐for="value in fruits">
{{value}}
</ul>
- 5、v-on：v-on:click简写@click。执行方法时，不加上()事件源默认不传递，需要手动传入$event，此时的$event代表的就是事件源，如果有()而没有传参则事件源e变为了undefined。methods中的this永远指向Vue的实例。
<button v‐on:click="addFruit">按钮</button>，
<ul>
<li v‐for="value in fruits" >
{{value}}
</li>
</ul>
var vue = new Vue({
el:'#box',
data:{
fruits:['香蕉','苹果','橘子']
},
methods:{
addFruit(){
this.fruits.push('苹果');
}
}
});
- 6、v-if/v-show:v-show通过css样式（display:none）将元素隐藏，频繁的操作时用v-show；v-if通过DOM移除DOM节点，判断是否存在。v-if后面可以根velseif或者velse。
<div v‐if='false'>jw,handsome</div>
<div v‐show='false'>jw,handsome</div>
- 7、v-cloak：防止闪烁，当vue加载完成后移除v-clock属性
<style>
[v-cloak]{
display:none;
}
</style>
<div v-cloak>
{{name}}{{age}}
</div>
- 8、v-bind：绑定动态数据，可以直接简写为'：'
<div id='app'>
<img v-bind:src='msg' v-bind:title='zf' v-bind:width='w'>
</div>
new Vue({
el:'#app',
data:{
msg:'http://www.。。。'，
zf:'xxx'，
w:'100px'
}
})
生命周期
new Vue()=>设置数据=>挂载元素=>渲染成功
Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段会提供给一个钩子函数让我们做一些想实现的动作。
beforeCreate：即将创建。数据和挂载元素都是undefined
created：创建完成。数据可以读取，但是DOM还没生成。
beforeMount：即将挂载。DOM已经生成，但是DOM中的数据还没有渲染成data中的数据。
mounted：挂载完毕。数据成功渲染出来。
beforeUpdate：开始更新。在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。
updated：更新完毕。更新视图之后，在读取视图上的内容，已经是最新的内容。
beforeDestroy：调用实例的destory()之前可以销毁当前的组件之前，会触发这个钩子。
destroyed：成功销毁之后。
actived：keep-alive组件被激活的时候调用
deactivated：keep-alive组件停用时调用
<div id='app'>{{name}}</div>
<script>
let vm=new Vue({
el:'#app',
data:{
name:'Hello World'
}，
beforeCreated(){
console.log('即将创建');
console.log(this.$data);//undefined
console.log(this.$el);//undefined
},
created(){
console.log(this.$data);//object{__ob__:Observer}
console.log(this.$el);//undefined
},
beforeMounted(){
console.log(this.$el);//<div>{{name}}</div>
},
mounted(){
console.log(this.$el);//挂载完毕数据已渲染
}，
beforeUpdated(){
console.log(this.$refs.app.innerHTML);//Hello World数据并未更新
},
updated(){
console.log(this.$refs.app.innerHTML);//Hello World数据已更新
}，
beforeDestory(){
}
})
</script>
