本文详细介绍了Vue.js的模板语法，包括文本、HTML、绑定标签属性及JavaScript表达式。还深入探讨了指令，如参数、修饰符、v-bind和v-on的缩写、v-text和v-cloak的用法。此外，讲解了v-bind如何绑定样式，如class和内联样式。最后讨论了如何不用双向数据绑定获取input标签内容的技巧。
一. 模板语法
1. 文本
<span>Message: {{ msg }}</span>
msg属性发生了改变，插值处的内容都会更新。
如果只想更新一次: v-once
<span v-once>这个将不会改变: {{ msg }}</span>
2. HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用f="https://cn.vuejs.org/v2/api/#v-html">v-html指令
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>Using mustaches: {{ rawHtml }}</p>
<!-- 这个会被解析成文本 -->
<p><span v-html='rawHtml'></span></p>
<!-- 这个会被解析成HTML -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
rawHtml:'<span style="color: red;">this should be red</span>'
},
})
</script>
</body>
</html>
3.绑定标签属性
Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用f="https://cn.vuejs.org/v2/api/#v-bind">v-bind指令
<div v-bind:id="dynamicId"></div>
对于布尔 attribute (它们只要存在就意味着值为true)，v-bind工作起来略有不同，在这个例子中：
<button v-bind:disabled="isButtonDisabled">Button</button>
如果isButtonDisabled的值是null、undefined或false，则disabledattribute 甚至不会被包含在渲染出来的<button>元素中。
4. {{}} 和v-bind其实都可以用JavaScript表达式
有个限制就是，每个绑定都只能包含单个表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
-------------------------------------------------------------------------------------
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
二. 指令
指令 (Directives) 是带有v-前缀的特殊 attribute。比如: v-on v-if v-bind 等等
<p v-if="seen">现在你看到我了</p>
1. 参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind指令可以用于响应式地更新 HTML attribute
<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
<a v-on:click="doSomething">...</a>
2.修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
3.v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
4. v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
5. v-text
v-text是绑定文本数据的另一种形式,
但在浏览器渲染方面略有不同,因为通常都是window onload之后vue才会接管
v-text 确保 vue出问题时也不会把{{xxx}}显示出来,快速刷新也不会闪屏
<h1>{{msg}}</h1>
<h1 v-text=msg></h1>
6. v-cloak
v-text比较麻烦,{{}}又怕出丑,有没有一举两得的方法呢??? 有啊 v-cloak
v-cloak写在vue入口组件上,它会伪装一个样式,让浏览器将错误隐藏掉
在下面的例子中,#app组件上 加载了v-cloak 它可以被浏览器视为一个带有v-cloak属性的标签, 那么我们为带有v-cloak属性的标签设计一个样式,使其隐藏起来
当vue接管页面后,它会识别v-cloak 组件,并重新渲染出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1>{{msg}}</h1>
<h1>{{msg}}</h1>
<h1>{{msg}}</h1>
<h1 v-text=msg></h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
data: {
msg: 'hello'
}
}).$mount('#app')
</script>
</body>
</html>
7.v-pre //跳过该组件的编译
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<div v-pre>{{ this will not be compiled }}</div>
咋一看仿佛没有什么意义,其实它是为了加快Vue对网页解析渲染速度.
上例中如果div里面是无数的图片和文字的一篇新闻稿,那Vue完全应该跳过对他们的渲染,因为他们都是原生html而已,,有了v-pre,Vue会跳过他们,都不看任何一眼.
三. v-bind绑定样式
1. 绑定class
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>
比如:我们设计一个样式,当todo.done为true时触发这个样式,
<style>
.done{
text-decoration: line-through;
color: #aaa;
}
</style>
当todo.done为true时触发这个样式,则
<span v-bind:class="{done:todo.done}">{{todo.title}}</span>
class里传入一个对象,其实是个键值对,对象的键名就是class类名,键值是一个布尔值,布尔值为真时,执行这个样式,布尔值为假,不执行这个样式
2. 数组语法
我们可以把一个数组传给v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为：
<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
3.绑定内联样式
v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
鉴于它其实是对象,干脆写成对象: 这会让模板更清晰
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
v-bind:style的数组语法可以将多个样式对象应用到同一个元素上
<div v-bind:style="[baseStyles, overridingStyles]"></div>
四. 不用双向数据绑定来获取input标签的内容
我们知道,如果我们用双向数据绑定获得input的内容时,还需要一个中间变量
<input class="new-todo"
placeholder="What needs to be done?"
autofocus v-on:keyup.enter="handleIn"
v-model="add">
var app = new Vue({
el: ".todoapp",
data: {
add:'',
},
methods: {
handleIn(){
const addTodo={
done:false,
seen:true
}
addTodo.title=this.add
//需要中间变量过度以下以防一个数据源绑定多条数据,如下图
todos.push(addTodo)
this.add=''
})
上面的情况,可以通过局部中间变量的过渡解决,那么双向数据绑定还有什么意义?
所以,建议通过获取调用方法的元素的方式解决
调用方法时,方法会默认传入一个参数,event
我们用编写方法时接收这个event
handleIn(e){
console.log(e);
},
此时,我们得到一个event对象
查看对象属性,我们发现有一个target属性,其实就是调用这个方法的input
查看target的属性,我们发现有个value格外显眼,这就是我们想要的内容~所以
上面的程序可以弃用双向数据绑定,改用查询DOM属性的方式
handleIn(e){
todos.push({
title:e.target.value,
done:false,
seen:true
})
this.add=''
},
以此类推,如果input是checkbox, 我们可以去target中找checked
注意:上面的方法我们都用了一个参数叫event,但如果调用函数里面有形参,这个参数是无法获取的,如果想既传参又传event 则需要在调用时强烈的声明!!!
!并在写函数时做好形参接收工作!
<input class="new-todo"
placeholder="What needs to be done?"
autofocus v-on:keyup.enter="handleIn(index,$event)"
v-model="add">
handleIn(index,e){
}
扫一扫
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
