文章目录
什么是Vue？
官网有非常详细的Vue教程，强烈推荐跟着教程学（一点也不难，一两天搞定）。
Vue.js是一套构建用户界面的渐进式框架，Vue 采用自下向上增量开发的设计，其核心库只关注视图层，易于上手，同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
简单来说呢，Vue号称三大前端框架之一，以往的html+css+js的开发方式虽然可以满足大部分的需求，但是当项目足够大时，元素和数据之间的交互会非常复杂，如果你不想加班来整理这些数据的话，利用Vue就可以帮助我们非常迅速的完成数据绑定，它会以非常简洁的代码帮你完成数据绑定。另外，Vue的精髓在于组件，Vue的组件式开发特性使得网页数据和页面更新变得不再那么繁琐。总之呢，使用Vue会给你的前端工作带来非常有效的减轻你的工作量。
Vue的优势
vue在web开发，网站制作中有哪些显著优势？
- 数据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染 。
- 组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。
模板语法
1. hello world
一个简单的Vue实例，你只需要下载最新版本的Vue.js并把它当做普通的js文件引入到你的html页面就可以使用，Vue是一个固定的模板，它的语法非常简单，在使用vue之前，有必要学会这种基础的模板写法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个Vue实例</title>
</head>
<body>
<div id="app">
<!-- {{}}用来从data中获取数据，相当于getter -->
<!-- 这个值会根据data中数据的改变而动态的发生变化 -->
<h1>{{message}}</h1>
</div>
</body>
<!-- 导入vue.js，注意相对路径 -->
<script src="vue.js"></script>
<script>
// 创建一个Vue实例
var vue = new Vue({
// el用来指明 Vue 实例的挂载目标,该目标会被Vue生成的DOM对象所替换
// 不推荐把挂载目标设置为html或者body
// 注意','
el:"#app",
// data是Vue 实例的数据对象，在这里存放你要用到的数据。
// Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化
data:{
// 所有的数据必须是key:value的形式
message:"hello world !"
}
})
</script>
</html>
运行到浏览器试试看：
下面根据这个简单的hello world实例来进行一些扩展。
1.1 data中存放对象数据
data是Vue实例对象中的数据对象，在这里存放的数据必须是标准的key:value格式，除了存放一些简单的文本数据外，我们也可以存放对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生管理</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<ul>
<!-- HBuilder赋值上一行：ctrl+shift+r -->
<!-- 注意获取对象属性值的语法 -->
<li>{{stu.no}}</li>
<li>{{stu.name}}</li>
<li>{{stu.age}}</li>
<li>{{stu.hobby}}</li>
<li>{{stu.class.id}}</li>
<li>{{stu.class.name}}</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
message: "这是一个学生对象",
// 定义一个学生对象
stu: {
// 对象中的属性必须使用""
"no": "001",
"name": "bob",
"age": "12",
// 定义数组
"hobby": ["听歌", "读书"],
// 定义班级对象
"class": {
"id": "3-001-A",
"name": "3年级1班A"
}
}
}
})
</script>
</html>
使用浏览器打开：
1.2 给属性赋值（v-bind）
使用{{}}可以从data数据对象中获取值，但是如果要将这些值赋给属性，那么就不能用{{}}了，这里需要使用v-bind：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有颜色的字体</title>
</head>
<body>
<div id="app">
<!--注意语法 v-bind:属性名="key"-->
<p v-bind:style="myStyle">{{message}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
var vue = new Vue({
el:"#app",
data:{
message:"我希望它是红色的",
myStyle:"color:red;font-size:50px"
}
})
</script>
</html>
在浏览器中运行：
1.3 原始html代码（v-html）
从上面的实例中可以使用{{}}把数据显示为普通文本，如果想把数据区的数据以原始html代码的形式展示，就要用到v-html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-html的测试</title>
</head>
<body>
<div id="app">
<p>这是原始的html代码显示的：<span v-html="message"></span></p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"<span style='color:green'>这是绿色的</span>"
}
})
</script>
</html>
1.4 监听DOM事件（v-on）
我们现在来设计一个点击按钮换颜色的功能，v-on是用来监听DOM事件的指令，比如你想监听点击事件，就可以用v-on:click。v-on只是提供了便捷的绑定形式，并没有改变原生的js事件，也就是说，js中支持的事件都可以监听到。来看实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on的测试</title>
</head>
<body>
<div id="app">
<p><span v-bind:style="color">点击按钮变换颜色</span></p>
<button type="button" v-on:click="change">变色</button>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
color: "color:green"
},
// 在methods里面定义方法,模板写法
methods: {
change: function() {
// this指的是这个vue对象
// this.color就可以拿到color里面的值
if (this.color == "color:green") this.color = "color:red"
else this.color = "color:green"
}
}
})
</script>
</html>
效果：
Class绑定
我们都知道每个DOM元素都可以拥有一个或者多个类属性，这样会很方便用css快速的为每一个元素设计样式。如果能够动态的切换class属性，从而在样式之间进行切换，会不会更炫酷？要实现这个效果，就要使用v-bind对class属性进行绑定，利用一些
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class与style动态绑定</title>
</head>
<body>
<div id="app">
<!-- v-bind:class="{size:isDo}" 用来实现p标签class属性的动态绑定 -->
<!-- {size.isDo}的意思是如果isDo是true，那么p标签就属于size这个类，反之不属于这个类 -->
<p v-bind:class="{size:isDo}">{{message}}</p>
<!-- 设计点击事件改变isDo的值，就可以控制p标签的classsx -->
<button type="button" v-on:click="change">单击改变字体大小</button>
</div>
</body>
<style>
/* 为size这个类设计样式 */
.size{font-size: 250%;color: red;}
</style>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"测试文字",
isDo:false
},
methods:{
// 点击事件,改变isDo的值,取反
change:function(){
this.isDo=!this.isDo
}
}
})
</script>
</html>
这样就实现了class属性的动态切换。
常见的绑定class的其他写法还有：
-
这种写法相当于这个p标签属于text这个类，也可以同时属于msg这个类（取决于isDo是否为true）
<p class="text" v-bind:class="{msg:isDo}">{{message}}</p> -
你也可以传递一个数组来使一个标签同时属于多个类：
<p v-bind:class="[classone,classtwo]">{{message}}</p>data:{ classone:"text", classtwo:"msg" }这种写法等同于：
<p v-bind:class="text msg">{{message}}</p>也就是说，p标签同时属于text和msg这两个类。
条件渲染（v-if）
v-if这个指令用来根据条件渲染内容。被v-if所标记的内容只有当条件为true才会渲染展示，否则浏览器不会渲染它。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if 测试</title>
</head>
<body>
<div id="app">
<p v-if="isFlag">{{message}}</p>
<button type="button" @click="see">点击显示内容</button>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"现在你能看见我了",
isFlag:false
},
methods:{
see:function(){
this.isFlag=!this.isFlag
}
}
})
</script>
</html>
v-else-if和v-else标签通常和v-if标签搭配使用，v-else指令通常要跟在v-if或者v-else-if指令后面，不然它不会被识别。比如：
<p v-if="isFlag">{{message}}</p>
<p v-else>{{message2}}</p>
另外一个根据条件来展示元素的指令是v-show。
二者虽然有时候产生的效果相似，但是原理是不同的，比如把上面的v-if改为v-show：
这块内容并非没有被渲染，而只是改变了display属性，使其为none。
列表渲染（v-for）
v-for指令非常实用，常见的用法是用来遍历数组，或者遍历一个对象的属性。
遍历数组
v-for的语法是v-for:"item in items"。item指的是每一次迭代的对象，items指的是数组对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if 测试</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="s in students">{{s}}</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
students: ["张三", "李四", "王五"]
}
})
</script>
</html>
你也可以指定第二个参数来代表当前数组元素的索引（从0开始）：
<ul>
<li v-for="(s,index) in students">{{index}}---{{s}}</li>
</ul>
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
遍历对象
用法与遍历数组类似，不同的是，一个对象的属性名和属性值我们都可以取到，语法：(value,name,index) in object。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if 测试</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,name,index) in student">
{{index+1}}.
{{message}} -
{{name}} :
{{value}}
</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
message: "classA",
student: {
name: "张三",
age: "20",
sex: "男"
}
}
})
</script>
</html>
使用v-for实现省市级二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue二级联动</title>
</head>
<body>
<div id="app">
<select id="selectone" v-on:change="getProvince">
<option value="0">请选择省份</option>
<option v-for="p in provinces" v-bind:value="p.value">{{p.name}}</option>
</select>
<select id="selecttwo">
<option v-for="c in cities" v-bind:value="c">{{c}}</option>
</select>
</div>
</body>
<script src="vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
provinces: [{
name: '陕西',
value: "shanxi"
}, {
name: '四川',
value: "sichuan"
}, {
name: '河北',
value: "hebei"
}],
cities: ['请选择城市'],
shanxi: ['西安', '宝鸡', '延安'],
sichuan: ['成都', '宜宾', '攀枝花'],
hebei: ['石家庄', '天津', '北京']
},
methods: {
getProvince: function() {
// 拿到选择的省名
var v = document.getElementById("selectone").value;
// 直接赋新值v-for也能监测到
// 也可以用 splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
if (v == "shanxi") {
this.cities = this.shanxi;
// this.cities.splice(0, this.cities.length, "西安", "宝鸡")
} else if (v == "sichuan") {
this.cities = this.sichuan;
} else if (v == "hebei") {
this.cities = this.hebei;
}
}
}
})
</script>
</html>
表单输入绑定
使用v-model 指令可以在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它会默认忽略表单中value设置的初始值，你可以在data中给表单元素设置初始值。
最简单的用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model测试</title>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="请输入内容">
<p>Message is: {{ message }}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
message: ""
}
})
</script>
</html>
message是在vue实例中data区定义的。
- 利用v-model做一个学生管理系统。页面左半部分显示表单填写信息，提供按钮添加学生信息，右边显示学生信息列表：
<html>
<head>
<meta charset="utf-8">
<title> Demo </title>
<script src="vue.js"></script>
<style>
#Context.div{
height:500px;
width:49%;
float:left;
<!-- 上右下左 -->
margin:atuo;
}
input,td{
text-align:center;
}
</style>
</head>
<body>
<div id="Context">
<!-- 学号，姓名，性别，爱好， -->
<div id="leftContext">
<table border="1" height="200px" width="400px" align="left">
<tr>
<td>学号</td>
<td>
<input v-model="stu.snumber" type="text" name="id" placeholder="输入学号"></input>
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input v-model="stu.sname" type="text" name="name" placeholder="输入姓名"></input>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" v-model="stu.ssex">男</input>
<input type="radio" name="sex" value="女" v-model="stu.ssex">女</input>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input v-model="stu.shobbies" type="checkbox" name="hobby" value="唱">唱</input>
<input v-model="stu.shobbies" type="checkbox" name="hobby" value="跳">跳</input>
<input v-model="stu.shobbies" type="checkbox" name="hobby" value="rap">rap</input>
<input v-model="stu.shobbies" type="checkbox" name="hobby" value="篮球">篮球</input>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select v-model="stu.sprovince" name="province" id="selectP">
<option value="">--请选择省份--</option>
<option value="河南">河南</option>
<option value="陕西">陕西</option>
</select>
<select v-model="stu.scity" name="city" id="selectC">
<option value="">--请选择城市--</option>
<option value="西安">西安</option>
<option value="郑州">郑州</option>
</select>
</td>
</tr>
<tr>
<td>
<input v-model="stu.smessageAdd" type="text" name="备注" placeholder="输入备注信息"></input>
</td>
<td>
<button type="button" @click="add">添加</button>
</td>
</tr>
</table>
</div>
<div id="rightContext">
<table border="1" height="200px" width="400px" align="right">
<tr>
<td>序号</td>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>爱好</td>
<td>籍贯</td>
<td>备注</td>
<td>删除</td>
<TD </tr> <tr v-for="(s,index) in stulist">
<td>{{index+1}}</td>
<td>{{s.snumber}}</td>
<td>{{s.sname}}</td>
<td>{{s.ssex}}</td>
<td>{{s.shobbies}}</td>
<td>{{s.sprovince}}-{{s.scity}}</td>
<td>{{s.smessageAdd}}</td>
<td><button @click="deleteStu(index)">删除</button></td>
<td><button @click="updateStu(index)">修改</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: "#Context",
data: {
<!-- 定义学生对象 -->
stu: {
snumber: "",
sname: "",
ssex: "",
shobbies: [],
sprovince: "",
scity: "",
smessageAdd: ""
},
<!-- 定义学生列表 -->
stulist: []
},
methods: {
add: function() {
<!-- 新建一个临时学生变量 -->
var temp = {};
temp.snumber = this.stu.snumber;
temp.sname = this.stu.sname;
temp.ssex = this.stu.ssex;
temp.shobbies = this.stu.shobbies;
temp.sprovince = this.stu.sprovince;
temp.scity = this.stu.scity;
temp.smessageAdd = this.stu.smessageAdd;
<!-- 把这个临时变量加入学生列表中 -->
this.stulist.push(temp)
},
<!-- 删除功能 -->
deleteStu: function(index) {
<!-- 从数组中移除这个学生 -->
this.stulist.splice(index, 1)
}
<!-- 修改思路：使用两次完全复制，先把目标学生的信息copy下来放在一个临时变量里，修改这个临时变量，然后再完全复制给目标，注意学生hobby是数组类型 -->
}
});
</script>
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
