起步案例
做为第一个案例, 主要给大家介绍 vue 的最基本使用.
vue 使用的 3 步曲
- 引入 vue.js
- 编写页面(视图)
- 编写 vue 实例
# 1 引入 vue.js
在 html 的头部, 通过<script src>
引入 vue.js
这里我用到了 VSCode 插件: Path Intellisense 快速补全路径
示例
<!-- 1. 引入vue.js -->
<script src="../node_modules/vue/dist/vue.js"></script>
1
2
2
演示
# 2 编写页面(视图)
在 boby 中, 编写一个div
元素, id 为 app, 所有视图部分将在这部分渲染
示例
<!-- 2. 编写页面 -->
<div id="app"></div>
1
2
2
演示
# 3 编写 vue 实例
在 body 的最末尾, 使用<script>
, 编写 vue 实例
示例
<!-- 3. 编写vue实例 -->
<script>
const vm = new Vue({
el: '#app', // 对应操作的元素, 必填参数
data: {}, // 数据部分
methods: {}, // 方法部分
})
</script>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- el(element 元素): 表示 vue 实例操作页面元素
- data(数据): 数据部分
- methods(方法): 方法部分
演示
# 4 渲染数据
需求
将数据渲染到页面中
# 1) 定义数据
在 data 中定义数据
示例
<!-- 3. 编写vue实例 -->
<script>
const vm = new Vue({
el: '#app', // 对应操作区的元素, 必填参数
data: {
msg: 'hello world',
}, // 数据部分
methods: {}, // 方法部分
})
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
使用键值对方式定义数据. 其中
- msg: 相当于变量名
- 'hello world': 相当于变量值
演示
# 2) 在页面中渲染
示例
<div id="app">
{{ msg }}
</div>
1
2
3
2
3
- 通过
{{}}
(插值表达式)使用在 data 部分定义的变量
演示
#
如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~
上次更新: 2021/09/03, 15:32:17