前言

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

安装环境

Vue 的使用有几种方式:

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

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

1
2
3
4
# install CLI
npm install -g @vue/cli
# or
yarn global add @vue/cli

初始化项目test:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
# 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

项目初试化好后,我们先来启动项目:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 平凡公子 ➜  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.使用 {{}} 绑定文本数据,并且可以使用单个js表达式(不包括if, for等流程控制)

1
2
3
4
5
<!-- {% raw %} -->
<span>{{ hello }}</span>
<span>{{ hello.toUpperCase() }}</span>
<span>{{ hello ? hello : 'hello world' }}</span>
<!-- {% endraw %} -->

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

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

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

3.使用 v-ifv-show 指令插入,显示元素:

1
2
3
4
5
6
7
8
<!-- {% 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-ifv-show 之间的区别,v-if 会控制元素是否真的会被插入页面,而 v-show 只是控制元素是否 display: none;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- {% 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 : 绑定属性值(: 为缩写方式):

1
2
3
4
5
<!-- v-bind -->
<a v-bind:href="url">...</a>

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

6.使用 v-on or @ 绑定事件(@ 为缩写方式):

1
2
3
4
5
<!-- v-bind -->
<button v-on:click="clickBtn">点这里</button>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- 来源于官方文档 -->

<!-- 阻止单击事件继续传播 -->
<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 绑定表单的值:

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

使用 v-model 绑定的值为双向绑定,等价于:

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

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

转载说明

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