平凡公子

Theme

Vue从入门到精通入门篇之模板语法

2018年12月12日

前言 ​

本文尝试从刚开始接触vue开始讲解，当然这部分内容会比较简单无趣，而且 Vue 官方文档 已经写的比较详尽且易懂，只是作为系列，入门篇缺是必不可少的，毕竟总有人是刚接触 Vue ，总会有后来者，能给予到他们以帮助，那也是与有荣焉！但是关于具体入门细节部分，本系列也会推荐大家去看 官方文档，不会花费大量篇幅进行介绍！

安装环境 ​

Vue 的使用有几种方式：

  • 使用 <script> 标签引入
  • 安装 Vue CLI 官方脚手架

这里推荐使用官方脚手架进行开发：

shell
# install CLI
npm install -g @vue/cli
# or
yarn global add @vue/cli

初始化项目test：

bash
# Create a project:
# vue create my-project
# OR
# vue ui

平凡公子 ➜  myself vue create test

Vue CLI v3.2.1
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn


Vue CLI v3.2.1
✨  Creating project in /Users/wuxiaoyu/myself/test.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.9.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
info To upgrade, run the following command:
$ brew upgrade yarn
✨  Done in 24.53s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.9.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...

success Saved lockfile.
✨  Done in 9.74s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project test.
👉  Get started with the following commands:

 $ cd test
 $ yarn serve

项目初试化好后，我们先来启动项目：

shell
 平凡公子 ➜  myself cd test
 平凡公子 ➜  test git:(master) npm run serve

> test@0.1.0 serve /Users/wuxiaoyu/myself/test
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 3524ms                                                                                                                                    13:10:40


  App running at:
  - Local:   http://localhost:8082/
  - Network: http://10.154.100.73:8082/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

到这里我们就可以进行实际的开发了，至于更多使用方式及注意，这里就不多讲了，这部分内容推荐去看Vue CLI 3官方文档；

我们已经将项目启动了，接下来我们就来简单介绍一下 Vue 语法，这里我们将分两部分来讲：模板语法, 实例属性；

模板语法 ​

一. 首先我们先来讲一下模板语法，这部分内容对应Vue 官方文档 - 模板语法；

1.使用 {% raw %}{% endraw %} 绑定文本数据，并且可以使用单个js表达式（不包括if, for等流程控制）：

html
<!-- {% raw %} -->
<span>{{ hello }}</span>
<span>{{ hello.toUpperCase() }}</span>
<span>{{ hello ? hello : 'hello world' }}</span>
<!-- {% endraw %} -->

2.使用 v-html 指令输出真正有效的 HTML (注意区分 HTML 代码文本)

html
<!-- 将span标签渲染成真正的dom元素 -->
<div v-html="spanHtml"></div>
<!-- {% raw %} -->
<!-- 将span以文本形式显示 -->
<div>{{ spanHtml }}</div>
<!-- {% endraw %} -->

这里要注意 v-html 和 {% raw %}{% endraw %} 的区别，v-html 会生成真正的HTML元素，而 {% raw %}{% endraw %} 只会讲元素以文本形式显示在页面中！

3.使用 v-if，v-show 指令插入，显示元素：

html
<!-- {% raw %} -->
<!-- 使用 v-if 会控制元素是否会插入页面 -->
<!-- 使用 v-if 在值为false时，绑定的js也不会执行计算 -->
<p v-if="isShow">{{ isShow ? 'xxx' : '' }}</p>

<!-- 使用 v-show 在值为false时，元素display: none -->
<p v-show="isShow">{{ isShow ? 'xxx' : '' }}</p>
<!-- {% endraw %} -->

这里要注意 v-if，v-show 之间的区别，v-if 会控制元素是否真的会被插入页面，而 v-show 只是控制元素是否 display: none;

4.使用 v-for 指令循环列表：

html
<!-- {% raw %} -->
<!-- 循环数组 -->
<ul id="test">
  <li v-for="(item, index) in array" :key="item.msg">
    {{ item.msg }}
  </li>
</ul>

<!-- 循环对象 -->
<ul id="test">
  <li v-for="(item, key) in object" :key="key">
    {{ item.msg }}
  </li>
</ul>
<!-- {% endraw %} -->

在使用 v-for 循环列表数据时，可以使用（value in obj）模式，也可以使用（(value, key) in obj）模，还可以使用（item of obj）模式。 Vue 强烈推荐在使用 v-for 时，提供唯一key作为数据顺序变化时，复用已有元素，减少性能开销 Vue 风格指南 - 为-v-for-设置键值！ Vue 强烈要求避免在同一个元素上使用 v-for 和 v-if Vue 风格指南 - 避免-v-if-和-v-for-用在一起-必要！

5.使用 v-bind or : 绑定属性值（: 为缩写方式）：

html
<!-- v-bind -->
<a v-bind:href="url">...</a>

<!-- 使用 `:` -->
<a :href="url">...</a>

6.使用 v-on or @ 绑定事件（@ 为缩写方式）：

html
<!-- v-bind -->
<button v-on:click="clickBtn">点这里</button>

<!-- 使用 `@` -->
<button @click="clickBtn">点这里</button>

绑定事件时，Vue 还提供了一些修饰符：.prevent，.native，.stop，.capture，.self，.once，.passive

html
<!-- 来源于官方文档 -->

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<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>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

除以上修饰符以外，还有很多按键修饰符修饰符 Vue 官方文档 - 按键修饰符；

6.使用 v-model 绑定表单的值：

html
<input v-model="value" />

使用 v-model 绑定的值为双向绑定，等价于：

html
<input :value="value" @input="($event) => {value = $event.target.value}"/>

至此模板语法部分，基本就介绍完了，当然还有如：过滤器filter，插槽<slot> 等特性会在后面的文章中在详细介绍！下篇文章我们来详细介绍 Vue 实例属性等内容！

转载说明 ​

本文允许全文转载，转载请注明来源： 平凡公子 - vue从入门到精通入门篇之模板语法

Copyright © 2024 by 平凡公子