Vue 模板语法
1. 前言
- 一开始我一直以组件化的思维去学习Vue，但学习的效果不是很有效，生出了很多疑惑的地方。的确Vue是通过模板实现了组件化，但是在学习的过程中我们不能一下子就蹦到组件去，得需要去了解更多更多底层的东西，才能更好的把握上层的东西。
- 这一篇主要是了解一下Vue模板语法。知道Vue可以采用什么类型的表达式去输出，浅尝辄止，不会面面俱到把每种语法都做细致的介绍。
- Vue是一个渐变式的框架，渐变式的含义是你可以在已有的js项目中，一页页的去重构为Vue。这对我们学习Vue的语法也有好处，我们只需要引入一个Vue的js文件就可以学习Vue的模板语法了。
2. 创建HTML文件
- 编写简单的Vue实例
- el 属性映射到对应的id
- data 里面是我们可以使用的属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>myfirvue</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<div>Message: {{ message }}</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
- 浏览器打开
- Vue的语法也很多，这边我按类型各捡几种权做记录。另外下面的示例中不再完全贴出全部html，只展现相关html。
3. 插值
3.1. 文本插值
这是最普遍的插值方式，在模板里定义的属性或方法，在html中使用{{ }}来输出，在上面已经有示例了，我们看看方法的效果
- html
<div id="app">
<div>Message: {{ getMessage() }}</div>
</div>
- Vue
var app = new Vue({
el: '#app',
methods: {
getMessage: function () {
return 'Hello Vue again！'
}
}
})
3.2. 使用 JavaScript 表达式
- 在 {{ }}之中我们也可以使用JavaScript 表达式
- html
<div id="app">
<div>Message: {{ num*3 }}</div>
</div>
- Vue
var app = new Vue({
el: '#app',
data: {
num:10
}
})
4. 指令
- 刚才我都是对文本进行操作，接下来我们要对标签进行一下操作
- 指令 (Directives) 是带有 v- 前缀的特殊特性，我捡几个常用的指令来说明一下
4.1. v-if
- 如下方例子，如果seen为true即会渲染p标签，反之则看不见
- html
<div id="app"> <p v-if="seen">你看我啊</p> </div>
- Vue
var app = new Vue({
el: '#app',
data: {
seen:true
}
})
4.2. v-model
- 该指令可用于双向绑定；双向绑定的意思是，v-model将input同message属性进行绑定，当你修改input值的时候，message也会被修改即渲染到页面上。反之，你修改了message，input里面的值也会被修改
- html
<div id="app">
<div> {{ message }}</div>
<input v-model="message">
</div>
- Vue
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
- 效果
- 可以在试一下在f12里赋值app.message，input值也会被修改
4.3. v-bind 参数
- v-bind 是一个非常常用的指令，用于绑定标签的属性。以前我们用jquery的时候，用的是attr方法来修改属性，在vue里面就是v-bind。先上例子再说明：
- html
<a v-bind:href="url">点我啊</a>
- Vue
var app = new Vue({
el: '#app',
data: {
url: 'https://mp.csdn.net'
}
})
- 我们在v-bind的后面用 :接了一个 href。href就是参数，这也是指令的另一个特性 参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示。在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。当然我们还可以使用v-bind:class，v-bind:title等等。
4.3. v-on 参数
- v-on 指令不同于v-bind，它是用于监听 DOM 事件，比如点击，双击等。
- html
<div> {{ message }}</div>
<button v-on:click="reverseMessage">反转message</button>
- Vue
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
4.4. 修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。在 v-on 和 v-for中有使用到。
- html
- .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
<form v-on:submit.prevent="onSubmit">...</form>
4.5. 动态参数
- 这是vue2.6.0 新增的特性，这个我觉得使用场景很少，也不建议使用。
- 我们用v-bind的来举例，之前v-bind后面是直接跟href，现在我们能动态的决定v-bind后面是跟href还是class。
- html
<a v-bind:[attrName]="url">点我啊</a>
- Vue
var app = new Vue({
el: '#app',
data: {
attrName: title,
url: 'https://mp.csdn.net'
}
})
4.6. 缩写
- Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写
- v-bind 缩写 :
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>
- v-on 缩写 @
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>
4.7. 指令值的表达式
- 表达式结果的类型除了字符串之外，我们也可以像插值一样的使用javascript表达式来处理，以及还可以是对象或数组。
- 先上一个javascript表达式例子
- html
<a v-bind:href="'https://'+url">点我啊</a>
- Vue
var app = new Vue({
el: '#app',
data: {
url: 'mp.csdn.net'
}
})
- 对象或数组 常用于Class 与 Style 绑定，直接上例子
- html（对象）
<div class="static" v-bind:class="{ active: isActive,error:isError }">xxx</div>
// 如果isActive 为真,isError 不为真就会渲染为
<div class="static active">xxx</div>
- html（数组）
<div v-bind:class="[activeClass, errorClass]">xxx</div> //渲染为 <div class="active error">xxx</div>
- Vue
var app = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
}
})
- 大致其实我们理解了，这里面可以放表达式，对象，数组。那其他塞方法，或更复杂的嵌套的逻辑也可以举一反三得出。