Vue基本使用

Vue基本使用

[TOC]

简述

摘自百度百科

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动

MVVM模式

以前的MVC为

Model层—View层—Controller层

MVVM层分为

Model层—-View层—-ViewModel

Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

View:它专注于界面的显示和渲染,在Vue中则是包含一堆声明式Directive和Component的视图模板。

ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在vue中“Vue对象实例”充当了这个ViewModel的角色;

安装

首先安装Node.js

Node.js安装很简单

Node.js地址 直接下载傻瓜式安装即可

然后创建好项目,以本人的Java项目为例

在终端里使用命令

npm install vue

这样就在此次项目中安装好了vue

也可以进行全局安装

npm install vue -g

ECMAScript6语法

常用语法

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6语法</title>
<script>
for (var i = 0; i < 5; i++) {
/*console.log(i);*/
}
/*console.log("让我康康i有没有值"+i);*/

/* 块级元素let 相当于局部变量*/
for (let j=0;j<5;j++){
/*console.log(j);*/
}
/*console.log("让我康康i有没有值"+j);*/

/* const代表常量*/
/*const s = 5;
s = 78; //报错,因为const定义后就为常量*/

/* 解构表达式 */
/* 数组解构 */
let arr = [15,56,69];
const [a1,a2,a3] = arr;
console.log(a1,a2,a3);

/* 对象解构 */
let ars = {'name':'不想说',age:18}
let {name,age} = ars;
console.log(name,age);

/* 箭头函数 */
let product = {
name:'最爱',
eat:function (food) {
alert(this.name+"吃"+food);
},
//箭头函数
eat1:food=>alert(this.name+"吃"+food),
//简写
eat2(food){
alert(this.name+"吃"+food);
}
}
/*product.eat('汉堡');
product.eat1('汉堡');
product.eat2('汉堡');*/

/* 箭头表达式 + 解构表达式 */
const person = {
name:'山泥若',
age:25,
speak:['疼痒集团','火焰鼠','喂喂喂']
}
function hello(person) {
alert(person.name+"是"+person.speak[0])
}
var hi = ({name,speak}) => alert(name+"是"+speak[0]);
hi(person);

/* Promise对象 */
/* Promise是异步编程的一种解决方案,比传统的解决方案(回调函数+事件)更加合理和强大 */
const p = new Promise((resolve, reject) => {
//模拟定时任务的异步
setTimeout(()=>{
const num = Math.random();
//随机返回成功或者失败
if (num<0.5){
resolve('成功!'+num)
}else {
reject('失败!'+num)
}
},300)
});
//成功后调用
p.then(function (msg) {
alert(msg);
}).catch(function (msg) {
//失败后调用
alert(msg);
})

</script>
</head>
<body>

</body>
</html>

Vue常用语法

数据绑定

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="con">
{{msg}}
</div>
<div class="con1">
{{user}}
{{user.name}}
{{user.age}}
{{user.red}}
</div>
<script>
var app = new Vue({
el:"#con",
data:{
msg:'你看什么看?'
}
});

var app1 = new Vue({
el:'.con1',
data: {
user:{
name:'山泥若',
age:25,
color:'red'
}
}
});

</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
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="con">
<input type="text" v-model="message" v-on:change="changeData">
</div>
<script>
var vue = new Vue({
el:'#con',
data:{
message:'山泥若是大恶人'
},
methods:{
changeData(){
this.message='山泥若biss';
}
}
});
</script>

</body>

</html>

Vue表达式

1
2
3
4
5
一般表达式都是写在{{}}

语法:{{表达式}}

例如:{{5+5}}

Vue指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
v-text指令:
<标签名 v-text="表达式"></标签名>
v-html指令:
<标签名 v-html="表达式"></标签名>
v-for指令:
<标签 v-for="元素 in 数据源"></标签>
v-bind指令:
<标签 v-bind:标签属性名字="表达式"></标签>
v-model指令:
<标签 v-model="表达式"></标签>
v-show指令:
<标签名 v-show="表达式"></标签名>
v-if指令:
<标签名 v-if="表达式"></标签名>
v-else指令:
<标签名 v-if="表达式"></标签名>
<标签名 v-else></标签名>
v-else-if指令:
<标签名 v-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else></标签名>
❤赏点钱让我买杯快乐水8❤