Loading...
墨滴

雄雄的小课堂

2021/08/04  阅读:37  主题:默认主题

vue第二讲

==Vue==第二讲

==vue==的模板语法

==Vue.js== 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

插值

文本

使用的是Mustache语法的文本插值

<div >{{name}}</div>

通过使用v-once指令也可以一次性的插值,当数据改变时,插值处的内容==不会==被更新

<span v-once>这个将不会改变: {{ msg }}</span>

原始HTML

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用v-html

<span v-html="info"></span>	

	data:{
			info:'<h2>信息</h2>'
		}

绑定属性

<button v-bind:disabled="isButtonDisabled">Button</button>

isButtonDisabled赋值为true,此时的按钮已经被禁用。

使用JavaScript表达式

vue.js也可以支持JavaScript表达式

<p>{{ number + 1 }}</p>
<p>{{ ok?'正确':'错误' }}</p>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return '正确' } }}

指令

在vue.js中,指令是带有v-前缀的特殊属性,指令的职责是,当表达式的值改变时,将其产生连带影响,响应式地作用与DOM,如下:

<p v-if="seen">现在你看到我了</p>

如果seen返回true,则p标签可见,否则p标签不可见

前面还学过v-for v-on:click

参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML attribute:

<a v-bind:href="url">百度一下</a>

在这里 href 是参数,告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

语法糖:<a :href="http://www.baidu.com">百度一下</a>

另一个例子是 v-on 指令,它用于监听 DOM 事件:

<a v-on:click="doSomething">百度一下</a>

在这里参数是监听的事件名。

动态参数

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 attributeName,其值为 "href",那么这个绑定将等价于 v-bind:href

<p><a v-bind:[attr]="url">超链接</a> </p>

v-on也是一样的。

<p><a v-bind:[attr]="url">超链接</a> </p>

对动态参数的值的约束

动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告(比如写个123或者true)。

对动态参数的表达式的约束

动态参数表达式有一些语法约束,因为某些字符,如空格和引号,放在 HTML attribute 名里是无效的。例如

<!-- 这会触发一个编译警告 --><p v-bind:['infos'+id]="url">超链接</p>	

怎么解决呢?只能不用空格或者引号。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写,比如下面:

<p v-bind:[Attrs]="url">超链接</p>

此时浏览器会自动将Attrs转换成小写的attrs,如果给Attrs赋值时,就不会有效果的。

修饰符

修饰符 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

<div id="app">			<input v-model.lazy="name"/ />			<h3>{{name}}</h3>		</div>				<script type="text/javascript">			var app = new Vue({				el:'#app',				data:{					name:'王炎霸'				}			});		</script>

lazy:表示延迟加载

缩写

v-bind的缩写

<!-- 完整语法 --><a v-bind:href="url">...</a><!-- 缩写 --><a :href="url">...</a>

v-on的缩写

<!-- 完整语法 --><a v-on:click="doSomething">...</a><!-- 缩写 --><a @click="doSomething">...</a>

计算属性和侦听器

我们都知道,在模板中可以直接通过插值语法显示一些data中的数据

但是在某些情况下,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示

  • 比如我们有xing和ming两个变量,我们需要显示完整的名称
  • 但是如果多个地方都需要显示完整的名称时,我们就需要写多个{{xing}}+{{ming}}

解决方法:

  • 采用方法的方法
  • 使用计算属性

方法的方式

<div id="app">			<h2>{{xing}} {{ming}}</h2>			<h2>{{xing+' '+ming}}</h2>			<h2>{{name()}}</h2>		</div>		<script type="text/javascript">			var app = new Vue({				el: '#app',				data: {					xing:'王',					ming:'炎霸'					},methods:{					name:function(){						return this.xing+' '+this.ming;					}				}			});		</script>

计算属性

当我们需要对数据进行变化之后再显示的时候, 我们可以在计算属性中重新定义一个属性,并且重新返回变化之后的数据。

示例:

<h2>{{Computname}}</h2>computed:{	Computname:function(){		return this.xing+','+this.ming;	}}

記住,{{Computname}}里面是不能加括号的

复杂计算属性

<script type="text/javascript">			var app = new Vue({				el:'#app',				data:{					books:[{						id:1,						name:'三国演义',						price:120					},					{						id:2,						name:'水浒传',						price:120					},					{						id:1,						name:'红楼梦',						price:120					}]				},				computed:{					totalPrice:function(){						var sum = 0;						for(var i in this.books){							sum+=this.books[i].price;						}						return sum;					}				}			});		</script>

for的写法还可以这样:

for(var i of this.books){	sum+=i.price;}

计算属性的get和set方法

get,set语法:

fullName:function(){}funllName:{	set:function(){		//set方法	},	get:function(){		//get方法	}}

详细代码:

<script type="text/javascript">			var app = new Vue({				el:'#app',				data:{					firstName:'王',					lastName:'炎霸'				},				computed:{					fullName:{						//在设置值的时候被调用						set:function(firstName){							this.firstName = firstName;						},						//在获取的时候被调用						get:function(){							return this.firstName+','+this.lastName;						}					}				}			});		</script>

由于我们一般不需要别人随便给我们的计算属性设置值,所以没有必要要set方法,只需要留着get方法即可。(只读属性)

computed:{					fullName:{						//在获取的时候被调用						get:function(){							return this.firstName+','+this.lastName;						}					}				}

继续简写:

fullName:function(){	return '';}

此处只有get方法,没有set方法,故不能改变fullName属性的值。

计算属性的缓存

要想实现上面的案例(姓和名进行拼接),我们有三种方式可以实现:

  • 使用Mustache语法拼接
  • 写两个Mustche表达式
  • 使用计算属性实现computed
  • 使用方法实现methods

分析:

第一种过于繁琐,直接排除,况且复杂的操作太麻烦了。

计算属性与方法的区别:

  • 计算属性在多次调用时,只执行一次,效率比较高
  • 方法调用一次执行一次,是没有缓存的,性能比较低(如果涉及到循环,性能更差)

组件化

组件

问题:如何实现点击按钮让数字不断的加1

<div id="app">    <button @click="count++">    	点击{{count}}	</button></div><script>	var vm = new Vue({        el:'#app',        data:{            count:0        },        methods:{            getCount:function(){                return this.count++;            }        }    });</script>        

可以发现有通过直接通过属性++或者在方法中操作,但是如果要实现按钮与按钮之间的独立点击事件,上面案例显然是不可以的,我们需要分而写之。

如何解决

vue中的组件化思想。

  • 在开发中,我们经常把一些重复的功能封装个成组件,使得后续开发更快捷便捷,提高开发效率
  • 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用
  • 任何的应用都会被抽象成一颗组件树
img
img

组件使用的三个步骤:

  • 创建组件构造器
  • 注册组件
  • 使用组件(只能在vue的管理范围内,比如#app的div中,出了这个div就不可以了)

组件的语法:

  1. 构造器的创建

    var ve = Vue.extend({				data:function(){					return {						count:0					}				},				template:'<button @click="count++">{{count}}</button>'			});
    
  2. 组件注册

    Vue.component("button-counter",ve);

  3. 使用组件

	<div id="app">			<button-counter></button-counter>			<button-counter></button-counter>			<button-counter></button-counter>			<button-counter></button-counter>			<button-counter></button-counter>			<button-counter></button-counter>		</div>

全局组件

Vue.component("button-counter",ve);

意味着可以在多个vue的示例中使用

局部组件

很简单,只需要在vue是实例下面注册就可以,如下代码:

var vm = new Vue({				el:'#app',				data:{},				components:{					cpns:button-counter				}			});

雄雄的小课堂

2021/08/04  阅读:37  主题:默认主题

作者介绍

雄雄的小课堂