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后面可以根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'
	}
})

生命周期

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>