介绍
# 简介
- 在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架
- 思路提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架
- Vue 最早发布于 2014 年 2 月
- Vue 是 Github 上最受欢迎的开源项目之一
- 在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目
- Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发
- Vue 所关注的核心是 MVC 模式中的视图层，它也能方便地获取数据更新，实现视图与模型的交互
- 官方网站：https://cn.vuejs.org
- 示例链接
# 初步使用
- 创建demo-vue项目文件夹，添加vue.min.js文件到该文件夹下
- vue.min.js 可以从官网下载，或者从本示例 github (opens new window) gitee (opens new window) 中获取
- 创建01.helloworld.html
- 点击右键找到Open Live Server 运行，在浏览器上观察
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="vue.min.js"></script>
<div id="app">
<!-- 插值表达式-->
{{message}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello vue'
}
})
</script>
</body>
</html>
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
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
声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
核心思想：没有繁琐的DOM操作，如jQuery中，需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作
注意
可以使用VSCode中的创建代码片段快速的创建代码模板，如下模板
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
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
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
Last Updated: 2022/01/16, 11:29:51