Vue 基础语法

6次阅读

共计 9144 个字符，预计需要花费 23 分钟才能阅读完成。

Vue 的官方文档写的非常棒 (另一个我觉得中文文档写的很好地是 Ant-Design)。
这篇文章以使用 vue-cli 生成的项目为基础，以完整 demo 的形式讲解 Vue 的基础语法。关于 vue-cli 生成项目的讲解，可以参考：vue-cli 构建 vue 项目详解。
在 vue-cli 生成的项目中，我们打开 src/components 文件夹下 HelloWorld.vue 组件，为便于演示，删减了一部分内容（本文中的例子都将改造 HelloWorld.vue 组件来演示 Vue 语法）：
<template>
<div class=’hello’>
<h1>{{msg}}</h1>
<h2>Essential Links</h2>
</div>
</template>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>
h1,
h2 {
font-weight: normal;
}
</style>
<!– more –>
一、创建组件
在 vue 中，有好几种方式用来创建组件，后面会单独写一篇文章来介绍。
HelloWord.vue 文件中的内容分为三个部分：
<template>
…
</template>

Vue.use(Router);

export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld,
},
],
});
引入的方式一目了然，不再赘述。那如何在组件中引入组件呢？下面我们在 App 组件中直接引入 Helloworld 看看：
<template>
<div id=’app’>
<img src=’./assets/logo.png’>
<HelloWorld/>
</div>
</template>

export default {
name: ‘App’,
components: {HelloWorld},
};
</script>

export default {
name: ‘App’,
components: {
‘hello-world’: HelloWorld,
demo: Demo,
},
};
</script>
在 components 对象中定义多个属性，指向引入的组件即可。
三、插值和指令
1、插值 (Interpolation)
文本插值：
Vue 插值最常见的形式就是使用双大括号 {% raw %}{{}} {% endraw %} 的文本插值。在文章开头中的 HelloWorld 组件中就使用了插值的方式实现数据绑定。这里我们详细介绍一下：
在 Vue 组件中，都有一个 data 属性，data 必须是一个函数，该函数的返回值是一个对象。我们可以在 template 中通过双大括号来读取 data 中的属性值：
<template>
<div>
<h1>{{msg}}</h1>
<span v-once> 这个将不会改变: {{msg}}</span>
</div>
</template>

<button v-bind:disabled=’btnState’>{{name}}</button>
</div>
</template>
用双大括号将表达式括起来。此时页面上会显示：The button is disabled。当然，你可以表达式中添加更加复杂的逻辑。
2、指令 (Directives)
指令 (Directives) 是带有 v- 前缀的特殊特性。它的作用是什么呢？就是当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。我们看看几个例子：

v-for :
<tamplate>
<div>
<ul>
<li v-for=’todo in todos’ :key=’todo.key’>{{todo.text}}</li>
</ul>
</div>
</tamplate>

v-if 和 v-else :
<tamplate>
<div>
<ul>
<li v-for=’todo in todos’ :key=’todo.key’>{{todo.text}}</li>
</ul>
// add this
<p v-if=’todos.length >= 1′>You have more than 1 todo</p>
<p v-else>You have no todos</p>
</div>
</tamplate>
这里，v-if 指令将根据表达式的值的真假来插入 / 移除 <p> 元素。
关于更多 vue 指令，可以查看 vue 指令 api，这里不再一一讲述。
四、事件处理
vue 中可以用 v-on 指令监听 DOM 事件，并在触发时运行相关 JavaScript 代码。我们通过几个例子来看看 vue 中的事件处理。
1、计数器
<template>
<div>
<span>{{counter}}</span>
<button v-on:click=’counter += 1′>+ 1</button>
</div>
</template>

<!– 提交事件不再重载页面 –>
<form v-on:submit.prevent=”onSubmit”></form>

<!– 修饰符可以串联 –>
<a v-on:click.stop.prevent=”doThat”></a>

<!– 只有修饰符 –>
<form v-on:submit.prevent></form>

<!– 添加事件监听器时使用事件捕获模式 –>
<!– 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 –>
<div v-on:click.capture=”doThis”>…</div>

<!– 只当在 event.target 是当前元素自身时触发处理函数 –>
<!– 即事件不是从内部元素触发的 –>
<div v-on:click.self=”doThat”>…</div>

.stop
.prevent
.capture
.self
.once
.passive

注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。注意这一点对我们定位 bug 时很关键。
五、处理用户输入
我们可以用 v-model 指令来处理用户输入。v-model 指令可以在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。v-model 本质上是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
看看如何使用：
1、文本
<template>
<div>
<input type=’text’ placeholder=’Enter a todo..’ v-model=’todo’>
<div>{{todo}}</div>
</div>
</template>