二、VUE实例
1.实例生命周期钩子
从上图可以看到beforeCreate,created…这些函数,会在文档的不同阶段进行执行,这些函数不会定义在methods中。
<script type="text/javascript">
var app = new Vue({
el : "#app",
data : {
divData : '测试数据',
},
beforeCreate : function() {
console.log("beforeCreate");
},
created : function() {
console.log("create");
}
});
</script>
2.模板语法
<body>
<div id="app">
<div>{{divData}}</div>
<div v-text="divData"></div>
<!-- v-html会解析html标签 -->
<div v-html="divData"></div>
</div>
<script type="text/javascript">
var app = new Vue({
el : "#app",
data : {
divData : '<h1>测试数据<h1>',
}
});
</script>
</body>
这些模板语法可以插入js语句
<div v-text="divData + '插入js语句'"></div>
3.计算属性,方法和侦听器
<body>
<div id="app">
<!-- 在html出现js语法是应该被避免的 -->
<h3>{{firstName + ' ' + lastName}}</h3>
<h3>{{fullName}} {{age}}</h3>
<h3>{{fullName3()}}</h3>
<h3>{{fullName4}}</h3>
</div>
<script type="text/javascript">
var app = new Vue({
el : "#app",
data : {
firstName : 'Smith',
lastName : 'Mr',
fullName4 : 'Mr lee',
age : 18
},
/*
通过属性计算的到fullName
这种方式语法简介,当firsName和lasName不发生改变的时候,此方法的内容会被缓存在浏览 器中,性能较高
*/
computed : {
fullName : function() {
console.log("computed fullName");
return this.firstName + ' ' + this.lastName;
}
},
//没有缓存,性能不高
methods : {
fullName3 : function() {
console.log("methods fullName");
return this.firstName + ' ' + this.lastName;
}
},
//监听实现,有缓存,但是代码复杂
watch : {
//监听firtName 和lastName的变化
firstName : function() {
console.log("firstName watch fullName4");
return this.fullName4 = this.firstName + " " + this.lastName;
},
lastName : function() {
console.log("lastName watch fullName4");
return this.fullName4 = this.firstName + " " + this.lastName;
}
}
});
</script>
</body>
3.1 计算属性的setter和getter方法
<body>
<div id="app">
<h1>{{fullName}}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el : "#app",
data : {
firstName : "SIMTH",
lastName : "MICK"
},
computed:{
fullName:{
//获取数据,不需要明确调用
get : function() {
return this.firstName + ' ' + this.lastName;
},
//当数据发生改变的时候调用这个方法
set : function(value) {
console.log(value);
var result = value.split(' ');
this.firstName = result[0];
this.lastName = result[1];
}
}
}
});
</script>
</body>
4.vue样式绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setter getter方法</title>
<script type="text/javascript" src="./vue.js"></script>
<style type="text/css">
.actived {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1 @click="changeStyleClick" :class="{actived: isActived}">hello world</h1>
<h1 @click="changeStyleClick2" :class='[actived]'>ni hao</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el : "#app",
data : {
isActived : false,
actived :''
},
methods : {
changeStyleClick : function() {
this.isActived = !this.isActived;
},
changeStyleClick2 :function() {
this.actived = this.actived === "actived" ? "":"actived";
}
}
});
</script>
</body>
</html>
5.vue条件渲染
<body>
<div id="app">
<h1 v-if="show">hello world</h1>
<!--
v-show隐藏元素添加css样式display:none
<h1 style="display: none;">hello world</h1>
-->
<h1 v-show="show">hello world</h1>
<!-- template仅仅是判断的虚拟标签,不会显示在文档中 v-if支持,但是v-show不支持 -->
<template v-if="show === 'a'">
<div>template 虚拟渲染 a</div>
</template>
<template v-else-if="show === 'b'">
<div>template 虚拟渲染 b</div>
</template>
<template v-else>
<div>template 虚拟渲染 others</div>
</template>
<!-- 此时如果不加key进行区分,当flag值改变时,也会传递input中的value -->
<div v-if="flag">
用户名:<input type="text" key='username'>
</div>
<div v-else>
邮箱:<input type="text" key="mail">
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el : "#app",
data : {
show : 'a'
}
});
</script>
</body>
6.vue列表渲染
<body>
<div id="app">
<!--
遍历数组,两个参数
向数组结尾追加元素,push
数组删除最后一个元素:pop
删除/添加制定索引的元素:splice(index, count, item)
index 要删除或者要添加的下标
count 要删除元素的个数,0表示不删除,
item 表示要添加的元素
例子:app.$data.list.splice(1,0,{id:1,name:'xiao',age:30})
-->
<div v-for="(item, index) in list">
编号:{{item.id}} 名字:{{item.name}} 年龄:{i{tem.age}}-----index{{index}}
</div>
<!-- 遍历对象 -->
<div>{{object.body.weight}}</div>
<div v-for="(value, key, index) in object">
{{key}} == {{value}} 、{{index}}
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el : "#app",
data : {
list : [
{
id :1,
name: '张三',
age : 10,
},
{
id :2,
name: '李四',
age : 14,
},
{
id :2,
name: '王五',
age : 18,
}
],
object:{
firstName :'mic',
lastName : 'huan',
age : 30,
body :{
foot : '30cm',
weight :120
}
}
}
});
</script>
</body>
</html>
6.1 vue中的set方法
Vue.set(app.$data.object,'age',200);
app.$set(app.$data.object,'age',10);