2.1 Vue实例及选项
- 每个Vue.js的应用都需要通过构造函数创建一个Vue的实例。创建一个Vue实例的语法格式如下:
var vm = new Vue ({
//选项
})
- 在创建对象实例时,可以在构造函数中传入一个选项对象。选项对象中包括挂载元素、数据、方法、生命周期钩子函数等选项。下述分别对这几个选项进行介绍。
- 在学习Vue阶段,建议使用HBuilder编程工具,该编译工具操作简单易于上手,使用HBuilder编程工具时,先将Vue.js文件导入创建的工程目录中。
- HBuilder下载地址:https://www.dcloud.io/hbuilderx.html
2.1.1 挂载元素
- 在 Vue.js 的构造函数中有一个 el 选项。该选项的作用是为Vue实例提供挂载元素。定义挂载元素后,接下来的全部操作都在该元素内进行,元素外部不受影响。该选项的值可以使用 CSS 选择符,也可以使用原生的DOM元素名称。例如,页面定义了一个 div 元素,代码如下:
<div id="box" class="box"></div>
- 如果将该元素作为Vue实例的挂载元素,可以设置为 :
el : ‘#box’、el : ‘box’ 或 el :‘div’
2.1.2 数据
- 通过 data 选项可以定义数据类型,这些数据可以绑定到实例对应的模板中。示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuedemo01</title>
//引用Vue.js
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<h3>网站名称:{{name}}</h3>
<h3>网站地址:{{url}}</h3>
</div>
<script type="text/javascript">
var demo = new Vue ({
el : '#box',
data : {
name :'上海戏剧学院',//定义网站名称
url : 'www.shanghaixijuxueyuan.com'//定义网站地址
}
});
</script>
</body>
</html>
- 在上述代码中创建了一个Vue实例demo,在实例的data中定义了两个属性:name 和 url。模板中的{{name}}用于输出name属性的值,{{url}}用于输出url属性的值。由此可见,data数据与DOM进行了关联。运行结果如下图所示:
- 在创建Vue实例时,如果传入的data是一个对象,那么Vue实例会代理data对象中的所有属性。当这些属性的值发生变化时,HTML视图也将会产生相应的变化。因此,data对象中定义的属性被称为响应式属性。实例代码如下:
<body>
<div id="box">
<h3>网站名称:{{name}}</h3>
<h3>网站地址:{{url}}</h3>
</div>
<script type="text/javascript">
var data ={name :'上海戏剧学院' , url:'www.shanghaixijuxueyuan.com'};
var demo = new Vue ({
el : '#box',
data : data
});
document.write(demo.name === data.name)//引用了相同的属性
demo.url = 'http://www.shanghaixijuxueyuan.com';//重新设置属性
</script>
</body>
- 在上述代码中,demo.name === data.name 的输出结果为true,当重新设置 url 属性值时,模板中的{{url}}也会随之改变。由此可见,通过实例demo就可以调用data对象中的属性。而且,当 data 对象中属性的值发生改变时,视图也会进行重新渲染。运行结果如下图所示:
- 需要注意的是,只有在创建Vue实例时,传入的data对象中的属性才是响应式的。如果开始不能确定某些属性的值,可以为它们设置一些初始值。例如:
data : {
name :''
count :''
price :''
flag :true
}
- 除了data数据属性,Vue.js还提供了一下有用的实例属性与方法。这些属性和方法的名称都有相同的前缀 $,以便与用户定义的属性进行区分。例如,可以通过Vue实例中的 $data属性来获取声明的数据,示例代码如下:
<script type="text/javascript">
var data ={name :'上海戏剧学院' , url:'www.shanghaixijuxueyuan.com'};
var demo = new Vue ({
el : '#box',
data : data
});
document.write(demo.$data === data)//输出true
</script>
2.1.3 方法
- 在Vue实例中,通过methods选项可以定义方法。示例代码如下:
<div id="box">
<h3>{{showInfo()}}</h3>
</div>
<script type="text/javascript">
var demo = new Vue ({
el : '#box',
data : {
name :'上海戏剧学院',
url :'www.shanghaixijuxueyuan.com'
},
methods :{
showInfo : function(){
return this.name +':'+this.url;//连接字符串
}
}
});
</script>
- 在上述代码中,实例的methods选项中定义了一个showInfo()方法,模板中的{{showInfo()}}用于调用该方法,从而输出data对象中的属性值,运行结果如下图所示:
2.1.4 生命周期钩子函数
- 每个Vue实例在创建时都有一系列的初始化步骤。例如,创建数据绑定、编译模板、将实例挂载到DOM并在数据变化时出发DOM更新、销毁实例等。在这个过程中会运行一些叫做生命周期钩子的函数,通过这些钩子函数可以定义业务逻辑。Vue实例中几个主要的生命周期钩子函数说明如下。
- beforeCreate:在Vue实例开始初始化时调用。
- created:在实例创建创建之后进行调用,此时尚未开始DOM编译。
- mounted:在DOM文档渲染完毕之后进行调用。相当于JavaScript中的window.onload()方法。
- beforeDestory:在销毁实例前进行调用,此时实例仍有效。
- destoryed:在实例被销毁之后进行调用。
- 下面通过一个示例来了解Vue.js内部的运行机制。为了实现效果,在mounted函数中应用了$destory()方法,该方法用于销毁一个实例。代码如下:
<div id="box"></div>
<script type="text/javascript">
var demo = new Vue ({
el : '#box',
beforeCreate : function(){
console.log('beforeCreate');
},
created:function(){
console.log('created');
},
beforeDestroy:function(){
console.log('beforeDestroy');
},
destroyed:function(){
console.log('destroyed');
},
mounted:function(){
console.log('mounted');
this.$destroy();
}
});
</script>
- 在控制台中运行了上述代码,结果如下图所示,在图中展示了这几个生命周期钩子函数的运行顺序。
2.2 数据绑定
- 数据绑定是Vue.js最核心的一个特性。建立数据绑定后,数据和视图会相互关联,当数据发生变化时,视图也会自动进行更新。这样就无需手动获取DOM的值再同步到js中,使代码更加简洁,提高了开发效率。下面介绍Vue.js中数据绑定的语法。
2.2.1 插值
1、文本插值
- 文本插值是数据绑定最基本的形式,使用的是双大括号标签 {{ }}。用双大括号标签将文本插入HTML中,代码如下:
<div id="box">
<h3>{{name}}</h3>
</div>
<script type="text/javascript">
var demo =new Vue({
el : '#box',
data :{
name :'你好,晓茗'//定义数据
}
})
</script>
- 上述代码中,{{name}}标签将会被相应的数据对象中name属性的值所代替,而且将DOM中的name与data中的name属性进行了绑定。当数据对象中的name属性值发生改变时,文本中的值也会相应的变化。运行结果如下图所示。
- 只需渲染一次数据,可以使用单次插值。单次插值即只执行一次插值,在第一次插入文本后,当数据对象中的属性值发生改变时,插入的文本将不会更新。单次插值可以使用v-once指令。示例代码如下。
<div id="box">
<h3 v-once> Hello {{name}}</h3>
</div>
2、插入HTML
- 双大括号标签会将在里面的值当作普通文本来处理。如果要输出真正的HTML内容,需要使用 v-html指令。使用 v-html指令将HTML内容插入标签,代码如下。
<div id="box">
<p v-html="message"></p>
</div>
<script type="text/javascript">
var demo =new Vue({
el : '#box',
data :{
message :'<h1>Vue.js入门教程</h1>'//定义数据
}
})
</script>
- 上述代码中,为 p 标签应用 v-html指令后,数据对象中的message属性的值将作为HTML元素插入 p 标签。运行结果如下图所示。
3、属性
- 双大括号标签不能应用在HTML属性中。如果要为HTML元素绑定属性,不能直接使用文本插值的方式,而需要使用 v-bind指令对属性进行绑定。使用 v-bind指令为HTML元素绑定class属性,代码如下。
<div id="box">
<span v-bind:class="value">面朝大海,春暖花开</span>
</div>
<script type="text/javascript">
var demo =new Vue({
el : '#box',
data :{
value :'title'//定义绑定的属性值
}
})
</script>
</body>
<style type="text/css">
.title{
color: #FF0000;
border: 1px solid #FF00FF;
display: inline-block;
padding: 5px;
}
</style>
- 上述代码中,为 span 标签应用 v-bind 指令,将该标签的 class属性与数据对象中的 value 属性进行绑定,这样,数据对象中 value 属性的值将作为 span 标签的class属性值。运行结果如下图所示。
- 在应用 v-bind 指令绑定元素属性时,还可以将属性值设置为对象的形式。示例代码显示如下。
<div id="box">
<span v-bind:class="{'title':value}">面朝大海,春暖花开</span>
</div>
<script type="text/javascript">
var demo =new Vue({
el : '#box',
data :{
value :true
}
})
</script>
- 上述代码中,应用 v-bind 指令将 span 标签的 class 属性与数据对象中的 value 属性进行绑定,并判断 title 的值,如果title的值为 true,则使用 title类的样式,否则不使用该类。当title的值为 true时,运行结果如下图1所示。
当title的值为 falase时,运行结果如下图2所示。
- 为HTML元素绑定属性的操作比较频繁。为了防止经常使用 v-bind指令带来的繁琐操作,Vue.js为该指令提供了一种简写形式: “:” 。例如,为“上海戏剧学院”超链接设置 URL 的完整格式如下所示。
<a v-bind:href="url">上海戏剧学院</a>
//简写格式如下:
<a :href="url" >上海戏剧学院</a>
4、表达式
- 在双大括号标签中进行数据绑定,标签中可以是一个JavaScript表达式。这个表达式可以是常量或者变量,也可以是常量、变量、运算符组合而成的式子。表达式的值是其运算后的结果。示例代码如下所示。
<div id="box">
{{number+10}}<br>
{{boo ? '真' : '假'}}<br>
{{str.toLowerCase()}}
</div>
<script type="text/javascript">
var demo =new Vue({
el : '#box',
data :{
number :10,
boo : true,
str :'你好,晓茗'
}
})
</script>
- 运行结果如下图所示。
2.2.2 过滤器
- 对于一些需要经过复杂计算的数据绑定,简单的表达式可能无法实现,这时可以使用Vue.js的过滤器进行处理。通过自定义的过滤器可以对文本进行格式化。
- 过滤器可以用在双大括号插值和 v-bind 指令中,过滤器需要被添加在JavaScript表达式的尾部,由管道符号 “|” 表示。格式如下代码所示。
<!-- 在双大括号中 -->
{{ message | myfilter }}
<!-- 在 v-bind指令中 -->
<div v-bind:id="rawId" | formatId"></div>
- 定义过滤器主要有两种方式,第一种是应用 Vue.js提供的全局方法 Vue.filter()进行定义,第二种是应用选项对象中的 filters 选项进行定义。下面分别进行介绍。
1、应用Vue.filter()方法定义全局过滤器
- Vue.js提供了全局方法Vue.filter()定义过滤器。格式如下:
Vue.filter(ID,funcation(){})
- 该方法有两个参数,第一个参数为定义的过滤器ID,作为自定义过滤器的唯一标识,第二个参数为具体的过滤器函数,过滤器函数以表达式的值作为第一个参数,再将接收到的参数格式化为想要的结果。
使用全局方法Vue.filter()定义的过滤器需要定义在创建的Vue实例之前
- 应用Vue.filter()方法定义过滤器,获取当前的日期和星期并输出。代码如下。
<div id="box">
<span>{{date | nowdate}}</span>
</div>
<script type="text/javascript">
Vue.filter('nowdate',function(value){
var year=value.getFullYear();//获取当前年份
var month=value.getMonth()+1;//获取当前月份
var date=value.getDate();//获取当前日期
var day=value.getDay();//获取当前星期
var week="";
switch(day){
case 1:
week="星期一";
break;
case 2:
week="星期二";
break;
case 3:
week="星期三";
break;
case 4:
week="星期四";
break;
case 5:
week="星期五";
break;
case 6:
week="星期六";
break;
default:
week="星期日";
break;
}
return "今天是:"+year+"年"+month+"月"+date+"日"+week;
});
var demo = new Vue({
el : '#box',
data :{
date : new Date()
}
});
</script>
- 运行结果如下图所示。
2、应用filters选项定义本地过滤器
- 应用filters选项定义的过滤器包括过滤器名称和过滤器函数两部分,过滤器函数以表达式的值作为第一个参数。应用filters选项定义的过滤器,以对商城头条的标题进行截取并输出为例。示例代码如下显示。
<div id="box">
<ul>
<li><a href="#"><span>[特惠]</span>{{title1 | subStr}}</a></li>
<li><a href="#"><span>[公告]</span>{{title2 | subStr}}</a></li>
<li><a href="#"><span>[特惠]</span>{{title3 | subStr}}</a></li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
title1 :'商城爆品1分秒杀',
title2 :'家点狂欢千亿卷,买1送1!',
title3 :'全场清仓大处理,走过路过不要错过!'
},
filters:{
subStr : function(value){
if(value.length>10){//如果字符串长度大于10
return value.substr(0,10)+"...";//返回字符串前10个字符,然后输出省略号
}else{//如果字符串长度小于10
return value;//直接返回该字符串
}
}
}
});
</script>
- 运行结果如下图所示。
- 多个过滤器可以串联使用,在串联使用过滤器时,首先调用过滤器filterA对应的函数,然后调用过滤器filterB对应的函数。其中,filterA对应的函数以message作为参数,而filterB对应的函数将以filterA的结果作为参数。多个过滤器可以串联使用的格式如下。
{{ message | filterA | filterB }}
- 例如,将字符串“HTML+CSS+JavaScript”转换为首字母大写,其他字母小写。实例代码如下。
<div id="box">
<span>{{str | lowercase |firstUppercase}}</span>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
str : 'HTML+CSS+JavaScript'
},
filters:{
lowercase : function(value){
return value.toLowerCase();//转换为小写
},
firstUppercase : function(value){
return value.charAt(0).toUpperCase()+value.substr(1);//首字母大写
},
}
});
</script>
- 运行结果如下图所示。
- 过滤器实质上是一个函数,因此也可以接受额外的参数,格式如下。
{{ message | filterA(arg1,arg2,......) }}
- 其中,filterA为接受多个参数的过滤器函数。message的值作为第一个参数,arg1的值作为第二个参数,arg2的值作为第三个参数,以此类推。
2.2.3 指令
1、参数
- 一些指令能够接收一个参数,例如,v-bind、v-on指令。该参数位于指令和表达式之间,并用冒号分隔。v-bind指令的示例代码如下所示。
<img v-bind:src="imageSrc">
- 上述代码中,src即为参数,通过 v-bind指令将img元素与表达式imgSrc进行绑定。
- v-on指令的示例代码如下所示。
<button v-on:click="login">登录</button>
- 上述代码中,click(点击事件)为参数,该参数为监听的事件名称。触发“登录”按钮的click事件时会调用login()方法。
2、修饰符
- 修饰符是在参数后面,以半角句点符号指明的特殊后缀。例如,prevent 修饰符用于调用 event.preventDefault()方法。示例代码如下。
<form v-on:submit.prevent="onSubmit"></form>
- 上述代码中,当提交表单时会调用 event.preventDefault()方法用于阻止浏览器的默认行为。
备注:后期继续跟进Vue.js前端框架:条件判断与列表渲染,希望大家多多支持和关注。