Vue基础知识之指令和生命周期（一）

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。

指令

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后面可以根v­else­if或者v­else。

<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'
}
})

生命周期

<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>