目录
一、创建Vue实例
二、el ：vue实例的挂载
三、data：含有零个或多个的 key/value 对，进行数据传递
三、methods：可以通过实例及表达式，进行调用的方法。
四、computed：进行方法内的计算（实现一个变量依赖多个变量）
1- 纯粹进行计算相关的操作
2- 实现一个变量依赖于多个变量
五、watch：监听变量，变量修改是触发方法（实现多个变量依赖于一个变量）
1- 调用修改变量值的多种方式
2- 实现多个变量依赖于一个变量（监听唯一的变量）
六、delimiters：改变插值表达式符号（{{}}）
七、生命周期钩子：实例的各个时期调用的方法
查找详细API使用
一、创建Vue实例
步骤总结：
页面中引入vue文件new一个新的Vue对象 （可将对象进行赋值）在new对象中添加相关选项内容
<body>
<div id="app" class="app">
<p title="test">title111</p>
<p v-bind:title="title">v-bind</p>
</div>
</body>
<!-- 在页面中引入vue -->
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 创建vue实例
new Vue({
// el: "#app"
el: '.app',
data: {
title: "test2"
}
});
</script>
二、el ：vue实例的挂载
步骤总结：
在vue新对象内进行key：‘value’ 形式的挂载 例如：el：‘.test’value形式必须为CSS选择器语法 例如：el:‘.test’ 、el:'#test'（强烈建议使用id进行绑定，有且只有一个）
<body>
<div id="app" class="app">
<p title="test">test</p>
</div>
<div id="main">
</div>
</body>
<!-- 在页面中引入vue -->
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 创建vue实例
new Vue({
// el: "#app"
el: '.app',
});
// 将一个vue实例挂载到页面的一个页面结构
new Vue({
// 挂载点
el: "#main",
})
</script>
三、data：含有零个或多个的 key/value 对，进行数据传递
总结：
vue 对象内的 data：{} 形式创建data选项data 内存在零个或多个 key：value 对； key 以字符串形式存在，可适当省略合法变量名的引号； value 可以为任意属性。Html结构内，使用 插值表达式 {{}} (即，双大括号) 插入data内的数据，例如：{{ msg }} 注意：差值表达式内可以进行运算JS结构内的到相应变量的方式：
直接获取vue实例对象， 例如 ： console.log(app)使用$，获取vue实例对象内的data对象，例如： console.log(app.$data)获取data下的相应变量名，例如： console.log(app.$data.msg)直接通过vue对象获取data下的变量，例如： console.log(app.msg)
<body>
<div id="app">
<!-- 插值表达式 -->
{{ msg }}
{{ num }}
<!-- 插值表达式中可以进行运算 -->
{{ 1 + 2 + 3 * 4 }}
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
// 为挂载点内部的vue变量提供值
data: {
msg: "hello world!",
num: 88888
}
})
</script>
<script type="text/javascript">
// 获取msg,num变量的值
// 1.得到vue实例
console.log(app);
// 2.获取vue变量data: $data
console.log(app.$data);
// 3.获取目标变量值
console.log(app.$data.msg);
// 直接获取值
console.log(app.msg);
console.log(app.num);
</script>
三、methods：可以通过实例及表达式，进行调用的方法。
总结：
在vue对象内的创建 methods：{} ，存放方法methods内方法以 方法名：function(参数){} 的形式存放。methods内的方法，可以直接在JS结构体内进行调用，例如：vue对象名.方法名()methods内方法绑定v-on事件，启用事件触发函数。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>methods</title>
<style type="text/css">
.box {
background-color: orange
}
</style>
</head>
<body>
<div id="app">
<!-- v-on: 指令,操作事件的 -->
<p class="box" v-on:click="t1Click">{{ test1 }}</p>
<p class="box" v-on:click="t2Click">{{ test2 }}</p>
<p class="box" v-on:mouseover="action">action 11111</p>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
a : 1,
test1: "test1 defClick",
test2: "test2 abcClick"
},
// methods为挂载点内部提供方法的实现体
methods: {
// 为下方直接调用函数，提供方法
plus:function () {
this.a++;
console.log(this.a);
},
// 绑定v-on事件，事件触发时候回调相应函数
t1Click: function (ev) {
console.log(ev);
console.log("abc is clicked");
},
t2Click (ev) {
console.log(ev);
console.log("def is clicked");
},
action () {
console.log("被悬浮");
}
}
})
// 直接调用对应方法
vm.plus()
</script>
</html>
四、computed：进行方法内的计算（实现一个变量依赖多个变量）
总结：
计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。 注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。vue对象内建立 computed：{}computed内以 方法名：function（参数）{}，
1- 纯粹进行计算相关的操作
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
a:1,
},
computed:{
// 纯粹实现计算
// 仅读取
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
})
// 调用aplus内的get
console.log(vm.aPlus);
// 调用aplus内的set
vm.aPlus = 3;
console.log(vm.aPlus);
// vm内a被修改
console.log(vm.a);
// 进行计算
console.log(vm.aDouble);
</script>
</html>
2- 实现一个变量依赖于多个变量
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
<div>
<!-- v-model vue进行数据双向绑定的指令 -->
<label for="xing">姓:</label><input type="text" name="xing" v-model="fisrt_name">
</div>
<div>
<label for="ming">名:</label><input type="text" name="ming" v-model="last_name">
</div>
<div>
<!-- 通过插值表达式实现（不推荐） -->
<div>姓名: {{ fisrt_name + " " + last_name }} </div>
<!-- 通过computed实现（推荐） -->
<div>姓名: {{ full_name }} </div>
<!-- 通过methods实现 -->
<div>姓名: {{ full_name_bac() }} </div>
</div>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
fisrt_name: "",
last_name: "",
// full_name: ""
},
computed:{
// 一个变量依赖于多个变量
// 采用computed
full_name: function () {
// full_name对fisrt_name及last_name两个变量进行监听,两个值只有有一个变化,full_name就会随之变化,并且可以实时渲染到页面
return this.fisrt_name + " " + this.last_name;
}
},
methods: {
full_name_bac: function () {
return this.fisrt_name + " " + this.last_name;
}
}
})
</script>
</html>
五、watch：监听变量，变量修改是触发方法（实现多个变量依赖于一个变量）
总结：
vue内 watch：{} 创建变量的值修改触发监听方法，有多种调用方式
1- 调用修改变量值的多种方式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>watch</title>
</head>
<body>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {g: 5}
},
},
methods:{
someMethod:function(){
console.log('b被修改触发');
}
},
watch: {
a: function (val, oldVal) {
console.log('a被修改触发：new: %s, old: %s', val, oldVal)
},
// 方法名,b被修改时，调用对应方法
b: 'someMethod',
// 深度 watcher
c: {
handler: function (val, oldVal) { console.log('c被修改触发'); },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: function (val, oldVal) { console.log('d未修改触发');},
immediate: true
},
// 直接修改e，接连触发
e: [
function handle1 (val, oldVal) {console.log('e被修改触发1');},
function handle2 (val, oldVal) { console.log('e被修改触发2'); }
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) {console.log('e内的f被修改触发'); },
}
})
// console.log(vm.a);
// vm.a = 'aaa';
// console.log(vm.a);
// vm.b = 111;
// console.log(vm.b);
// vm.c = 'ccc';
// vm.d = 'ddd';
// vm.e.e1 = 'e1111';
// console.log(vm.e.e1);
// delete vm.e.e1;
// vm.e.f.g = 'ggg';
// vm.e = {};
//vm.e.f = 'fff';
</script>
</html>
2- 实现多个变量依赖于一个变量（监听唯一的变量）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>watch</title>
</head>
<body>
<div id="app">
<div>
<label>姓名:</label>
<input type="text" v-model="full_name">
</div>
<p>姓: {{ first_name }} </p>
<p>名: {{ last_name }} </p>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
// 多个变量依赖于一个变量, 对该变量进行监听
full_name: "",
first_name: "",
last_name: ""
},
watch: {
// 监听full_name变量,通过full_name具体修改first_name,last_name
full_name () {
var fullName = this.full_name;
console.log(fullName);
// split进行分割操作，返回列表
this.first_name = fullName.split(" ")[0];
this.last_name = fullName.split(" ")[1];
}
}
})
</script>
</html>
六、delimiters：改变插值表达式符号（{{}}）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>delimiters</title>
</head>
<body>
<div id="app">
{{ msg }}
<br/>
${ msg }
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['${', '}']
})
</script>
</html>
七、生命周期钩子：实例的各个时期调用的方法
beforeCreate：初始化实例后，调用前触发。created：实例穿件完成后触发。beforeMount：挂在开始前被调用。mounted：el被请创建的vm.$el替换，并且挂载到实例上去后调用。beforeUpdate：数据更新时调用，发生在虚拟DOM补丁之前。updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，之后调用。activated：keep-alive 组件激活时调用deactived：keep-alive 组件停用时调用beforeDestory：实例销毁之前调用destroyed：Vue 实例销毁后调用。 调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。errorCaptured：当捕获一个来自子孙组件的错误时被调用
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>生命周期钩子</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
</body>
<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>
</html>
