vue.js 是一个构建数据驱动的 web 界面 渐进式驱动框架。
引用的话，直接使用script标签引入就可以了；
<script src="./lib/vue.js"></script>
最简单的，创建一个vue对象，怎样引入到页面中呢？
1. 在调用vue对象时，要先创建对象，然后才调用，下面window.onload 使用的是es6的箭头函数
<!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>
<script src="./lib/vue.js"></script>
<script> window.onload = () => {
// 创建第一个vue对象
new Vue({
el: '#box',
data: {
name: 'huanying2015',
age: 25,
sex: 'man'
}
});
// 创建第二个vue对象
new Vue({
el: '#box1',
data: {
name: '路人甲',
age: 23,
}
});
new Vue({
el: '.box',
data: {
card: '身份证',
}
}); }
</script>
</head> <body>
<!-- 调用第一个Vue对象中的数据 -->
<div id="box">
{{name}} <br/> {{age}} <br/> {{sex}}
</div>
<!-- 调用第二个vue对象中的数据 -->
<div id="box1">
<p>
{{name}}<br/> {{age}}
</p>
<p>
{{name}}<br/> {{age}}
</p>
</div>
<!-- 调用第三个vue对象中的数据 -->
<div class="box">
{{card}}
</div>
</body> </html>
运行结果：
2. vue 中绑定事件：在new Vue 中增加一个methods 属性，在methods 属性中增加方法，这样就可以在html行间增加行间事件，进行事件绑定了
<!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>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: 'body',
methods: {
show2() {
alert('hello,你已经调用过vue了');
},
show() {
alert("显示使用的函数是es6 的简写方式");
this.show2();
}
}
});
}
</script>
</head> <body>
<!-- 绑定vue 的点击事件，使用的是在行间添加 行间事件 ，关键字 v-on:click -->
<input type="button" value="点击触发事件" v-on:click="show();">
</body> </html>
运行结果：
3. vue中属性，事件的调用：
<!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>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: 'body',
data: {
name: 'huanying2015',
},
methods: {
show1(n1, n2) {
alert(n1 + n2);
},
show2(n1 = 100, n2 = 200) {
alert(n1 + n2);
},
showName() {
alert(this.name);
}
}
});
}
</script>
</head> <body>
<!-- 绑定vue 的点击事件，使用的是在行间添加 行间事件 ，关键字 v-on:click -->
<input type="button" value="显示结果1" v-on:click="show1(100,200)">
<input type="button" value="显示结果2" v-on:click="show2(10,20)">
<input type="button" value="显示姓名" v-on:click="showName()">
</body> </html>
运行结果：
4. vue 中data属性中的其他数据格式：
<!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>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: 'body',
data: {
name: 'huanying2015',
age: 25,
userlist: ['zhangsan', 'lisi', 'wanger'],
colorlist: {
0: 'red',
1: 'blue',
2: 'yellow'
},
flag: true,
}, });
}
</script>
</head>
<body>
<div id="box">
{{name}}<br>
{{age}}<br>
{{userlist}}<br>
{{colorlist}}<br>
{{flag}}<br>
</div>
</body>
</html>
运行结果：
5. vue 中输出对象的时候，需要使用 v-for 进行循环，才能输出
<!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>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: 'body',
data: {
name: 'huanying2015',
age: 25,
userlist: ['zhangsan', 'lisi', 'wanger'],
colorlist: {
0: 'red',
1: 'blue',
2: 'yellow'
},
persons: {
name1: '赵子龙',
name2: '关云长',
name3: '张翼德'
},
flag: true,
}, });
}
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="val in colorlist">{{val}}</li>
</ul>
<ul>
<li v-for="v in colorlist">{{v}}</li>
</ul>
<ul>
<li v-for="v in colorlist">{{$index}}---->{{v}}</li>
</ul>
<ul>
<li v-for="v in userlist">{{v}}</li>
</ul>
<ul>
<li v-for="v in userlist">{{$index}}---->{{v}}</li>
</ul>
<ul>
<li v-for="p in persons">{{$key}}--->{{$index}}---->{{p}}</li>
</ul>
<ul>
<li v-for="(k,v) in persons">{{k}}--->{{v}}---->{{$key}}--->{{$index}}</li>
</ul> </div>
</body>
</html>
运行结果：数组和对象
6. v-model 同步改变vue的data 值：
<!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>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: '#box',
data: {
name: 'huanying2015',
age: 25,
}, });
}
</script>
</head> <body>
<div id="box">
<input type="text" v-model="name">
<input type="text" v-model="name">
<br>
<p>{{name}}</p>
<p>{{name}}</p>
</div>
</body> </html>
运行结果：改变输入框的内容，可以同步显示在网页上
7. 修改数组的值：
<!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>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: '#box',
data: {
userList: ['zhangsan', 'lisi', 'wanger']
},
methods: {
add() {
this.userList.push("mazi");
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击添加" v-on:click="add();">
<ul>
<li v-for="v in userList" track-by="$index">{{$index}}---->{{v}}</li>
<hr>
<hr> <li v-for="v in userList">{{$index}}---->{{v}}</li>
</ul>
</div>
</body>
</html>
运行结果：可以看出，点击添加的时候，循环输出是，没有加入track-by="$index"的循环，会把原来前面添加的覆盖，不再输出
8. vue中显示影藏的实现
<!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>
<script src="./lib/vue.js"></script>
<style>
div {
width: 300px;
height: 300px;
background: red;
}
[v-cloak] {
display: none;
}
</style>
<script>
window.onload = () => {
new Vue({
el: '#box',
data: {
flag: false
},
methods: {
tooglebg() {
this.flag = !this.flag;
}
}
});
}
</script>
</head>
<body>
<ul id="box">
<input type="button" value="显示影藏" v-on:click="flag=!flag;">
<input type="button" value="使用方法操作显示影藏" v-on:click="tooglebg();">
<div v-show="flag" v-cloak> zheli </div>
</ul>
</body>
</html>
运行结果：在这里 v- show 是一个显示隐藏的开关，为false是隐藏，为true时显示
而 v-cloak 没有太多的作用，主要是为了预防闪动而增加的，预防在加载时出现闪动