js框架
用来简化了我们对项目业务（需求 实际的一些功能）操作的复杂度（封装了很多现成的一些与业务无关的代码块）方便我们把数据插入到页面
ui框架
用来帮助我们写页面的
什么是html的属性?
属性是写在html的开标签中 使用属性=“属性值”的语法 属性用来扩展html标签的功能 让标签的功能更加强大与灵活
vue.js是现今最为主流的前端MVVM框架
作者:尤雨溪
vue是一套用于构建用户界面的 渐进式 和 自低向上增量开发的 框架
渐进式 ：每个框架都有一些自己的特点 这些特点会对开发者有一定的要求 但是要求有强有弱 这些要求可以这叫做主张 vue可以在整个项目中都使用 也可以在项目的局部使用 因为vue只会对使用它的范围生效 没有使用的不会生效 那么这样一来 vue就可以非常方便的与现有的第三方框架进行整合使用
自底向上增量开发：一种开发模式 先写基本的页面 然后再里面逐步的添加一个个功能 由简单到繁琐的开发流程
helloworld
1.下载相关依赖包 需要使用npm管理
（1-1）初始化 npm init -y
（1-2）开始下载 npm install –save vue@2
如果下载速度过慢 那么可以使用淘宝镜像
…
npm install -g cnpm –registry=https://registry.npm.taobao.org
…
（1-3）在页面的使用
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
| <!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>
<script src="./node_modules/_vue@2.6.14@vue/dist/vue.js"></script>
</head>
<body>
model-----> 模型（数据）
V -----> view------> 视图 （页面）
VM-----> viewModel--> 视图模型 （数据与页面之间的桥梁）
-->
<div id="box">
<h5>{{text}}-----{{obj.name}}</h5>
</div>
<script>
new Vue({
el: "#box",
data: {
text: "我是字符串",
num: 18,
Boolean: true,
arr: [1, 2, 3, 4, 5, 6, 7],
obj: {
"name": "laowang",
"age": 18
}
}
})
</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
28
29
30
31
32
33
| <!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>
<script src="./node_modules/_vue@2.6.14@vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h5>{{}}表达式</h5>
<h5>{{num+1}}</h5>
<h5>{{sex?"男":"女"}}</h5>
<h5>{{text.slice(2,6).toUpperCase()}}</h5>
</div>
<script>
new Vue({
el: "#box",
data: {
text: "asdfghjkqwert",
num: 18,
sex: true
}
})
</script>
</body>
</html>
|
