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>