前端（二十）—— vue介绍：引用vue、vue实例、实例生命周期钩子

vue

一、认识Vue

定义：一个构建数据驱动的 web 界面的渐进式框架

优点：

1、可以完全通过客户端浏览器渲染页面，服务器端只提供数据

2、方便构建单页面应用程序（SPA）

3、数据驱动 => 不直接操作DOM

4、数据的双向绑定

5、虚拟DOM

二、引入Vue

下载vue：https://vuejs.org/js/vue.min.js ，下载完成后用script标签引入。

<div id="app">
	<p title="p"></p>
    <!-- 第一个title是html标签的全局属性，第二个title是vue的一个变量，名字可以随意定义 -->
    <!-- vue变量需要初始化 -->
	<p v-bind:title='title'></p>
</div>
<!-- 在页面中引入vue，拥有vue环境后可以写vue支持的语法逻辑 -->
<script type="text/javascript" src="vue.js"></script>
<script>
    // 将一个vue实例挂载到页面的一个页面结构
    new Vue({
        // 将实例与页面结构进行关联, 尽量(只允许)用id进行绑定(将唯一的对象与页面唯一的结构进行一一绑定)
        // 该实例只操作关联的页面结构(包含子结构)
        // 挂载点
    	el: '#app',
   		data: {
    		title: 'vue-p'
    	}
    })
</script>

三、Vue实例

1、实例：el

<div id='app'>

</div>
<script>
    new Vue({
    	el: '#app'
    })
</script>

2、数据：data

<div id='app'>
    <p v-text='msg1'></p>
    <!-- 插值表达式 {{ }} ，插值表达式中可以进行运算 -->
    <p>{{ msg2 }}</p>
    {{ 1 + 2 + 3 * 4 }}
</div>
<script>
    new Vue({
    	el: '#app',
        // data为挂载点内部的vue变量提供值
    	data: {
    		msg1: '段落1',
    		msg2: '段落2'
    	}
    })
</script>

3、方法：methods

<div id='app'>
    <p v-on:click='func'>{{ msg }}</p>
</div>
<script>
    new Vue({
    	el: '#app',
    	data: {
    		msg: '段落'
    	},
        methods: {
            func: function() {
                alert(this.msg)
            }
        }
    })
</script>

4、计算属性：computed

一个变量依赖于多个变量

<div id='app'>
    <div>
        姓：<input type='text' v-model='first_name'>
    </div>
    <div>
        名：<input type='text' v-model='last_name'>
    </div>
    <div>
        <!-- 一个变量依赖于多个变量 -->
        全名：<input type='text' v-model='full_name'>
    </div>
</div>
<script>
    new Vue({
    	el: '#app',
    	data: {
    		first_name: '',
            last_name: ''
    	},
        computed: {
            full_name: function() {
                // fisrt_name及last_name两个变量中一个变量变化，full_name也会随之变化
            	return this.first_name + this.last_name
        	}
        }
    })
</script>

5、监听器：watch

多个变量依赖一个变量

<div id='app'>
    <div>
        姓名：<input type='text' v-model='full_name'>
    </div>
    <p>姓：{{ first_name }}</p>
    <p>名：{{ last_name }}</p>
</div>
<script>
    new Vue({
    	el: '#app',
    	data: {
    		full_name: '',
            first_name: '',
            last_name: ''
    	},
        // 监听full_name变量,通过full_name具体修改first_name,last_name
        watch: {
            full_name: function() {
            	this.first_name = this.full_name.split(' ')[0];
                this.last_name = this.full_name.split(' ')[1];
        	}
        }
    })
</script>

6、分隔符：delimiters

可以改变插值表达式的符号，{{ }} ===>${ }

<div id='app'>
    ${ msg }
</div>
<script>
    new Vue({
    	el: '#app',
    	data: {
    		msg: 'message'
    	},
        delimiters: ['${', '}']
    })
</script>

7、实例对象使用成员属性与方法

<script>
    var app = new Vue({
    	el: '#app',
    	data: {
    		msg: 'message'
    	}
    })
    // 1.得到vue实例
    console.log(app)
    // 2.获取vue变量data: $data
    console.log(app.$data)
    // 3.通过变量获取目标值
    console.log(app.$data.msg)
    // 4.直接获取值
    console.log(app.msg)
</script>

四、实例生命周期钩子

• 定义

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

• 钩子方法

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。

beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。

updated：数据更新时调用，发生在虚拟 DOM 打补丁之前。

activated：keep-alive 组件激活时调用。

deactivated：keep-alive 组件停用时调用。

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

• 重点钩子

created：实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据，重新渲染最新数据)

mounted：虚拟DOM构建完毕，并完成实例的el挂载。可以重新操作页面DOM

• 案例

<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			msg: "message"
		},
		beforeCreate () {
			console.log("实例刚刚创建");
			console.log(this.msg);
		},
		created () {
			console.log("实例创建成功, data, methods");
			console.log(this.msg);
		}
		// 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
	})
</script>