一、引入Vue
将下载好的Vuei相关的文件粘贴到项目的lib目录即可直接使用如下:
然后我们还需要在IDEA中下载Vue插件,重启IDEA即可使用
二、第一个Vue程序
在写第一个Vue程序前,我们首先要了解几个概念
-
插值表达式
格式:{{要插入的值}},这里的值只相当于一个占位符,也可理解为数据的引用(名字),通过这个引用,Vue可以找到对应的值
-
v-cloak指令
它可以直接当作HTML的一个属性来使用,即直接在标签内使用,例如
<p v-cloak>{{msg1}}</p>
,该指令用于解决网速较慢时Vue初始化未完成,插值表达式不能被解析,会直接显示出来,加载完毕之后又会被替换成真实结果,造成闪烁的问题<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--在css中选择样式--> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <p v-cloak="">{{msg}}</p> </div> <script src="../lib/vue.js" type="text/javascript"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ msg:"hello Vue" } }); </script> </body> </html>
运行结果:
三、其他常用指令
-
v-text指令
该指令和插值表达式一样,用于给HTML元素添加文本,但v-text不会存在闪烁问题,其会将Model中的数据完全替换到HTML元素中(覆盖),而插值表达式只会将Model中的数据替换到插值表达式中(占位符内容的替换),相同点是插值表达式和v-text都不会解析要添加文本中的HTML标签(原样显示),具体使用如下,使用该指令不再需要css设置样式
<div id="app"> <p v-text="msg"></p> </div>
-
v-html指令
该指令也可用于给HTML元素添加文本,和v-text的唯一区别:给HTML添加内容时会解析内容中的HTML
-
v-bind指令
在HTML元素的属性目前加上绑定标识,此时HTML的该属性的值就会根据属性值的名字从Model中获取数据
-
v-on指令
在HTML的事件属性(不带on)前加上绑定标识,此时HTML触发此事件时,会执行事件中绑定的代码,v-on指令可以用
@事件=
代替<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>v-bind、v-on指令的学习</title> <script src="../lib/vue.js" type="text/javascript"></script> </head> <body> <h1>v-bind、v-on指令的学习</h1> <div id="app"> <label>用户名:<input type="text" name="username" v-bind:value="msg" /></label> <hr/> <!--这是上面这种写法的简写--> <label>用户名:<input type="text" name="username" :value="msg" /></label> <hr/> <label>用户名:<input type="text" name="username" :value="msg+'你好'"></label> <hr/> <label>用户名:<input type="text" name="username" :value="msg+name"></label> <button v-on:click="sayHello(name)">点击下显示你好</button> <button @click="sayHello(name)">点击下显示你好</button> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ msg:"我是来自Model中的内容!", name:"张三" }, methods:{ sayHello:function (name) { alert("你好!"+name); } } }); </script> </body> </html>
运行结果:
四、双向数据绑定
v-model而可以实现数据和视图层双向绑定
使用双向相互据绑定实现一个建议计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
num1: <input type="text" v-model="num1">
<select v-model="opr">
<option value="+" selected disabled>+</option>
<option value="-">-</option>
<option value="-">*</option>
<option value="-">/</option>
</select>
num2: <input type="text" v-model="num2">
<button @click="calc()">=</button>
<span v-text="result"></span>
</div>
<script src="../lib/vue.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
num1:0,
num2:0,
result:0,
opr:'+'
},
methods:{
calc(){
var flag = this.opr;
switch (flag) {
case '+':
this.result = parseInt(this.num1) + parseInt(this.num2);
break;
case '-':
this.result = parseInt(this.num1) - parseInt(this.num2);
break;
case '*':
this.result = parseInt(this.num1) * parseInt(this.num2);
break;
case '/':
this.result = parseInt(this.num1) / parseInt(this.num2);
break;
}
}
}
})
</script>
</body>
</html>
运行结果:
五、v-for指令
使用v-for实现遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1.使用v-for指令遍历简单数组-->
<p v-for="name in names">{{name}}</p>
<hr/>
<!--这里的index表示元素在数组中的索引,从0开始-->
<p v-for="name,index in names" v-text="name+'---'+index"></p>
<hr/>
<!--2.使用v-for指令遍历对象数组-->
<p v-for="user in users">id:{{user.id}}---name:{{user.name}}---age:{{user.age}}</p>
<hr/>
<!--3.使用v-for指令遍历对象属性值-->
<p v-for="value,key in city">{{key+'---'+value}}</p>
<!--4.使用v-for指令遍历数字(作用就是标准的for循环次数遍历)-->
<p v-for="index,num in 5" v-text="index+'---'+num"></p>
</div>
<script src="../lib/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
names:["张三","李四","王五","赵六"],
users:[
{id:1,name:"张三",age:13},
{id:2,name:"李四",age:18},
{id:3,name:"王五",age:29}
],
city:{
province:"陕西省",
level:"西安市",
area:["雁塔区","长安区","未央区","莲湖区"]
}
}
});
</script>
</body>
</html>
测试结果:
v-for指令实现数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--v-for指令实现数据绑定-->
<label>id:<input type="text" v-model="id"/></label>
<label>name:<input type="text" v-model="name"/></label>
<label>age:<input type="text" v-model="age"/></label>
<label><button @click="add()">添加人员信息</button></label>
<p v-for="user in users" :key="user.id">
<label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label>
</p>
</div>
<script src="../lib/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
users:[
{id:1,name:"张三",age:13},
{id:2,name:"李四",age:18},
{id:3,name:"王五",age:29}
],
id:'',
name:'',
age:''
},
methods:{
add(){
this.users.unshift({id:this.id,name:this.name,age:this.age})
}
}
});
</script>
</body>
</html>
测试结果: