2.Vue.js前端框架:基础特性

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 选项可以定义数据类型,这些数据可以绑定到实例对应的模板中。示例代码:
   
   <html>
	   <head>
		   <meta charset="utf-8">
		   <title>vuedemo01title>
		    //引用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进行了关联。运行结果如下图所示:
    2.Vue.js前端框架:基础特性_第1张图片
  • 在创建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 对象中属性的值发生改变时,视图也会进行重新渲染。运行结果如下图所示:
    2.Vue.js前端框架:基础特性_第2张图片
  • 需要注意的是,只有在创建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.Vue.js前端框架:基础特性_第3张图片

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.Vue.js前端框架:基础特性_第4张图片

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属性值发生改变时,文本中的值也会相应的变化。运行结果如下图所示。
    2.Vue.js前端框架:基础特性_第5张图片
  • 只需渲染一次数据,可以使用单次插值。单次插值即只执行一次插值,在第一次插入文本后,当数据对象中的属性值发生改变时,插入的文本将不会更新。单次插值可以使用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 :'

Vue.js入门教程

'
//定义数据 } })
script>
  • 上述代码中,为 p 标签应用 v-html指令后,数据对象中的message属性的值将作为HTML元素插入 p 标签。运行结果如下图所示。
    2.Vue.js前端框架:基础特性_第6张图片
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属性值。运行结果如下图所示。
    2.Vue.js前端框架:基础特性_第7张图片
  • 在应用 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所示。
    2.Vue.js前端框架:基础特性_第8张图片
    当title的值为 falase时,运行结果如下图2所示。
    2.Vue.js前端框架:基础特性_第9张图片
  • 为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.Vue.js前端框架:基础特性_第10张图片

2.2.2 过滤器

  • 对于一些需要经过复杂计算的数据绑定,简单的表达式可能无法实现,这时可以使用Vue.js的过滤器进行处理。通过自定义的过滤器可以对文本进行格式化。
  • 过滤器可以用在双大括号插值和 v-bind 指令中,过滤器需要被添加在JavaScript表达式的尾部,由管道符号 “|” 表示。格式如下代码所示。
   
   {
    { message | myfilter }}
   
   <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.Vue.js前端框架:基础特性_第11张图片
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>
  • 运行结果如下图所示。
    2.Vue.js前端框架:基础特性_第12张图片
  • 多个过滤器可以串联使用,在串联使用过滤器时,首先调用过滤器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>
  • 运行结果如下图所示。
    2.Vue.js前端框架:基础特性_第13张图片
  • 过滤器实质上是一个函数,因此也可以接受额外的参数,格式如下。
   {
    { 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前端框架:条件判断与列表渲染,希望大家多多支持和关注。

你可能感兴趣的:(Vue.js入门知识,过滤器,vue,js,javascript,java)