生命周期函数
在创建Vue实例对象时,有两个阶段:
- 第一阶段是初始化时间绑定机制、初始化生命周期的循环。初始化之后会触发beforeCreate()回调函数
- 第二个阶段是初始化注入器、初始化实体对象,此时表示Vue实例对象已经创建成功,初始化之后会触发created()回调函数
8个生命周期函数
- beforeCreate() Vue实例对象创建之前,此时el属性和data属性均为空(undefined)
(类比:电脑组装之前) - created() Vue实例对象创建之后,此时el属性为空,data属性已经存在
(类比:电脑组装之后)
在创建el属性之前首先执行beforeMount() 在创建el属性并与DOM进行绑定之后才会触发mounted()
- beforeMount() View和model绑定完成之前的回调,存在Vue实例对象和文档节点挂载之前,此时el属性为绑定之前的值(也就是el和data还没有联系)
(类比:电脑主机还没有与显示器连接) - mounted() View和model绑定之后的回调 存在于Vue实例对象和文档节点挂载之后,
此时的el为绑定之后的值(el和data中的数据有了联系)
(类比:电脑主机已经和显示器连接) - beforeUpdate() View视图更新之前的回调,此时el属性为更新之前的值
(类比:给电脑安装新软件,还未安装成功之前) - updated() View视图跟新之后的回调,此时el属性为更新之后的值
(类比:软件安装完成,桌面出现快捷图标) - beforeDestroy() Vue实例对象销毁之前的回调,此时el属性和data属性仍具有原始值
(类比:电脑关机之前的提示) - destroyed() Vue实例对象销毁之后的回调,后续在修改model将不会改变View
(类比:电脑已经关机)
生命周期函数的书写格式及位置:
var vm = new Vue({
el: '#app',
data: {},
beforeCreate:function(){},
created:function(){},
beforeMount:function(){},
mounted:function(){},
beforeUpdate:function(){},
updated:function(){},
beforeDestroy:function(){},
destroyed:function(){}
});
生命周期图解:
模板语法
何为模板语法?简单地说就是如何在HTML中输出Vue实例对象的数据。
输出模板变量
使用的是“Mustache”语法(双大括号)的文本插值形式在html中输出模板变量
变量包括:普通变量(基本数据类型)、对象变量、数组变量
<body>
<div id="app">
<div>name = {{name}}</div>
<div>
user.name = {{user.name}}<br/>
user.desc = {{user.desc}}
</div>
<ul>
<li>{{names[0]}}</li>
<li>{{names[1]}}</li>
<li>{{names[2]}}</li>
</ul>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//准备双向绑定的数据
var data = {
name:'vue',//普通变量
user:{ //对象
name:'vue',
desc:'this is vue'
},
names:['vue','react','angular']
}
var vm = new Vue({
el:'#app',
data:data
})
</script>
输出结果:
在html元素中输出Vue实例对象的变量
使用v-html指令用于输出HTML代码,若数据变量是HTML源代码,默认输出HTML;若解析HTML代码输出可以使用v-html指令。
<body>
<div id="app">
<div>
{{html}}
</div>
<div v-html="html"></div>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data = {
html:'<font color="red">这是红色字体</font>'
}
var vm = new Vue({
el:'#app',
data:data
})
</script>
输出结果:
html属性中输出Vue实例对象的变量
在某些情况下,需要在HTML元素属性中输出变量,此时使用v-bind指令
具体的语法形式:
v-bind:属性名=”” 可以简写成 :属性名=””
注意: 若动态属性的变量值为false、null、undefined ,则该属性的值不存在。
<body>
<div id="app">
<div>
<a v-bind:href="link.link" :class="myclass">全写:{{link.name}}</a>
</div>
<div>
<a :href="link.link">简写:{{link.name}}</a>
</div>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data = {
myclass:false,
link:{
name:'Vue框架开发',
link:'http://www.baidu.com'
}
}
var vm = new Vue({
el:'#app',
data:data
})
</script>
输出结果:
表达式
Vue框架中提供了JavaScript表达式、四则运算、条件控制、字符串处理等等。
同样v-bind绑定中也可以进行一些运算 。
同样对于所有数据绑定(无论HTML元素还是HTML属性) vue都提供了完整的JavaScript表达式。
<body>
<div id="app">
{{5+5}}<br/>
{{ok?'YES':'NO'}}<br />
{{message.split('').reverse().join('')}}<br />
<div v-bind:id="'list-'+id">百度地图</div>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data = {
ok:false,
message:'今天晚上吃什么',
id:1
}
var vm = new Vue({
el:'#app',
data:data
})
</script>
输出结果:
计算属性
为什么使用计算属性?
在模板中可以使用JavaScript表达式做一些简单的运算,设计它的初衷是用于
简单计算,但在模板中放入太多处理逻辑会让模板过于难以维护。
例:在外卖系统中,怎么计算用户订单金额:商品个数count,商品平均价格price,折扣率discount,配送费freight等等
用JavaScript表达式,视图部分会变得越来越复杂,不符合vue实例对象的简洁设计原则。订单金额 = {{countpricediscount+freight}}
为了解决过于复杂的计算 我们引入了计算属性 computed
在使用时先定义计算属性 将复杂的计算在计算属性中直接计算完成,然后再给视图使用就可以了。
需要注意点是:
- computed是由一系列json方法组成的,表示一系列计算属性
- 每一计算属性都是一个function,这个函数必须有return,返回计算属性的值。
- 计算属性的使用和data属性一致,改变计算属性的参数,其数字也会发生变化,其实就是定义不同
- 当原始数据发生改变时 计算属性的值也会发生改变
- 计算属性也可以使用在html代码,但是在模板中引用时要使用v-html引用
<body>
<div id="app">
<p>商品总价:<span v-html="allPrice"></span></p>
<p>订单金额:{{amount}}</p>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//双向绑定数据
var data = {
count:5,//商品个数
price:11.5,//商品平均价格
discount:0.85,//折扣率
freight:3.5 //运费
}
var vm = new Vue({
el:'#app',
data:data,
computed:{
//每一计算属性值时已函数形式,并且有返回值
amount:function(){
//this代表当前vue实例对象
//this.$data 表示当前Vue实例对象装载的双向绑定数据
//代理: this.$data.count <=> this.count
console.log("haode");
return this.$data.count*this.$data.price*this.$data.discount+this.$data.freight;
},
//计算商品总价
allPrice:function(){
return '<span>'+ this.$data.count*this.$data.price+'</span>';
}
}
})
</script>
输出结果:
methods方法
在vue中可以使用methods编写自定义函数 methods用法与computed相同,它也是由一系列json方法组成的。
特别注意:计算属性与methods本质区别是,计算属性只有其相关依赖发生改变时才会重新计算,当data发生改变计算属性才会重新计算,大幅度提升了程序执行的效率,节省内存空间。但是methods只要调用,无论data是否改变它都会重新计算 所以在使用中优先使用计算属性。
<body>
<div id="app">
<p>订单金额(函数形式):{{getAmount()}}</p>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data = {
count:10,
price:12.5,
discount:0.75,
freight:30
}
var vm = new Vue({
el:'#app',
data:data,
methods:{
getAmount:function(){
console.log("nihao");
return this.count*this.price*this.discount+this.freight;
}
}
})
</script>
输出结果:
数组元素和对象元素的渲染(列表渲染)
列表的渲染就是如何在Vue中渲染输出数组元素和对象元素,同时在列表的渲染过程中会同时使用计算属性。
列表渲染主要的应用场景 就是循环输出一组相同个数的数据 将商品输出在同一个列表中。
在模板中,使用v-for指令循环输出某一组数据,基本语法如下:
v-for = "item in items"
这里item表示输出的某一条数据,items表示一组数据(可能是对象 可能是数组)。
- 当v-for渲染数组时,可以给出index参数,表示渲染数组的元素下标信息从0开始
v-for="(item,index) in items"
- v-for还可以渲染对象 渲染对象时 会遍历出对象所有的属性值
key -> 键/属性 value -> 值 index –> 属性索引
key、value和index在括号中的顺序最好不要改变
v-for="(value,key,index) in object"
<div id="app">
<ul>
<li v-for="good in goodsList">{{good.name}}==={{good.price}}</li>
<li v-for="good in goodsList">
<span>{{good.name}}</span>
<span style="color: red;">{{good.price}}</span>
</li>
<li v-for="(good,index) in goodsList">{{index+1}} - {{good.name}}</li>
<li v-for="good in goodsList">
<span v-for="(value,key,index) in good">{{key}}--{{value}}<br/></span>
</li>
</ul>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data = {
goodsList:[
{name:'iphone',price:'8888',color:'红色'},
{name:'mp3',price:'888',color:'橙色'},
{name:'vidio',price:'88',color:'粉色'}
]
}
var vm = new Vue({
el:"#app",
data:data
})
</script>
输出结果: