Vue---渐进式 JavaScript 框架

渐进式 JavaScript 框架

Vue 的特点

遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

与其它前端 JS 框架的关联

借鉴 angular 的模板和数据绑定技术
借鉴 react 的组件化和虚拟 DOM 技术

Vue 扩展插件

vue-cli: vue 脚手架
vue-resource(axios): ajax 请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 基于 vue 的 UI 组件库(移动端)
element-ui: 基于 vue 的 UI 组件库(PC 端)

Vue 的基本使用

效果 (HelloWorld/test.html)

<div id="app">
<input type="text" v-model="username">
<p>Hello, {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
username: 'atguigu'
}
})
</script>

• 双大括号表达式
  语法:
  {{exp}}
  功能: 向页面输出数据
  可以调用对象的方法
• 指令一
  强制数据绑定
  功能: 指定变化的属性值
  完整写法:v-bind:xxx=‘yyy’
  简洁写法::xxx=‘yyy’
  //yyy 会作为表达式解析执行
• 指令二
  绑定事件监听
  功能: 绑定指定事件名的回调函数
  完整写法:
  v-on:keyup=‘xxx’
  v-on:keyup=‘xxx(参数)’
  v-on:keyup.enter=‘xxx’
  简洁写法:
  @keyup=‘xxx’
  @keyup.enter=‘xxx’

 eg:
<div id="app">
<h2>1. 双大括号表达式</h2>
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<h2>2. 指令一: 强制数据绑定</h2>
<a href="url">访问指定站点</a><br><!--不能使用-->
<a v-bind:href="url">访问指定站点 2</a><br>
<a :href="url">访问指定站点 3</a><br>
<h2>3. 指令二: 绑定事件监听</h2>
<button v-on:click="handleClick">点我</button>
<button @click="handleClick">点我 2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {// data 的所有属性都会成功 vm 对象的属性, 而模板页面中可以直接访问
msg: 'NBA I Love This Game!',
url: 'http://www.baidu.com'
},
methods: {
handleClick () {
alert('处理点击')
}
}
})
</script>
 
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
姓名 1(单向): <input type="text" placeholder="Full Name" v-model="fullName1"><br>
姓名 2(单向): <input type="text" placeholder="Full Name" v-model="fullName2"><br>
姓名 3(双向): <input type="text" placeholder="Full Name2" v-model="fullName3"><br>
</div>

计算属性和监视

• 计算属性
  在 computed 属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
• 监视属性
  通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
• 计算属性高级
  通过 getter/setter 实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次 getter 计算

例如：
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Kobe',
lastName: 'bryant',
fullName2: 'Kobe bryant'
},
computed: {
fullName: function () {
return this.firstName + " " + this.lastName
},
fullName3: {
get: function () {
return this.firstName + " " + this.lastName
},
set: function (value) {
var names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
},
watch: {
lastName: function (newVal, oldVal) {
this.fullName2 = this.firstName + ' ' + newVal
}
}
})
vm.$watch('firstName', function (val) {
this.fullName2 = val + ' ' + this.lastName
}) 
<style>

###class 与 style 绑定

• 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style 绑定就是专门用来实现动态样式效果的技术
• class 绑定
  :class=‘xxx’
  表达式是字符串: ‘classA’
  表达式是对象: {classA:isA, classB: isB}
  表达式是数组: [‘classA’, ‘classB’]
• style 绑定
  :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
  其中 activeColor/fontSize 是 data 属性

<style>
.classA {
color: red;
}
.classB {
background: blue;
}
.classC {
font-size: 20px;
}
</style>
<div id="demo">
<h2>1. class 绑定: :class='xxx'</h2>
<p class="classB" :class="a">表达式是字符串: 'classA'</p>
<p :class="{classA: isA, classB: isB}">表达式是对象: {classA:isA, classB: isB}</p>
<p :class="['classA', 'classC']"> 表达式是数组: ['classA', 'classB']</p>
<h2>2. style 绑定</h2>
<p :style="{color, fontSize}">style="{ color: activeColor, fontSize: fontSize +
'px' }"</p>
<button @click="update">更新</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el : '#demo',
data : {
a: 'classA',
isA: true,
isB: false,
color: 'red',
fontSize: '20px'
},
methods : {
update () {
this.a = 'classC'
this.isA = false
this.isB = true  
this.color ='blue'
this.fontSize = '30px' 
} 
}
}) 
</script>	

条件渲染

• 条件渲染指令
  v-if 与 v-else
  v-show
• 比较 v-if 与 v-show
  如果需要频繁切换 v-show 较好
  当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

<div id="demo">
<h2 v-if="ok">表白成功</h2>
<h2 v-else>表白失败</h2>
<h2 v-show="ok">求婚成功</h2>
<h2 v-show="!ok">求婚失败</h2>
<br>
<button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#demo',
data: {
ok: false
}
})
</script>

列表渲染

• 列表显示指令
  数组: v-for / index
  对象: v-for / key
  列表的更新显示

  删除 item
  替换 item
  列表的高级处理
  列表过滤
  列表排序

<div id="demo">
<h2>测试: v-for 遍历数组</h2>
<ul>
<li v-for="(p, index) in persons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
<button @click="deleteItem(index)">删除</button>
<button @click="updateItem(index, {name:'Jok',age:15})">更新</button>
</li>
</ul>
<h2>测试: v-for 遍历对象</h2>
<ul>
<li v-for="(value, key) in persons[0]">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
persons: [
{id: 1, name: 'Tom', age: 13},
{id: 2, name: 'Jack', age: 12},
{id: 3, name: 'Bob', age: 14}
]
},
methods: {
deleteItem(index) {
this.persons.splice(index, 1)
},
updateItem(index, p) {
// this.persons[index] = p // 页面不会更新
this.persons.splice(index, 1, p)
}
}
})
</script>

<div id="demo">
<input type="text" name="searchName" placeholder="搜索指定用户名"
v-model="searchName">
<ul>
<li v-for="(p, index) in filterPerson" :key="index">
{{index}}--{{p.name}}--{{p.age}}
</li>
</ul>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
orderType: 0, //0 代表不排序, 1 为升序, 2 为降序
searchName: '',
persons: [
{id: 1, name: 'Tom', age: 13},
{id: 2, name: 'Jack', age: 12},
{id: 3, name: 'Bob', age: 17},
{id: 4, name: 'Cat', age: 14},
{id: 4, name: 'Mike', age: 14},
{id: 4, name: 'Monica', age: 16}
]
},
methods: {
setOrderType (orderType) {
this.orderType = orderType
}
},
computed: {
filterPerson() {
let {orderType, searchName, persons} = this
// 过滤
persons = persons.filter(p => p.name.indexOf(searchName)!=-1)




 
// 排序
if(orderType!==0) {
persons = persons.sort(function (p1, p2) {
if(orderType===1) {
return p1.age-p2.age
} else {
return p2.age-p1.age
}
})
}
return persons
}
}
})
</script>

事件处理

• 绑定监听:
  v-on:xxx=“fun”
  @xxx=“fun”
  @xxx=“fun(参数)”
  默认事件形参: event
  隐含属性对象: $event
• 事件修饰符
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
• 按键修饰符
  .keycode : 操作的是某个 keycode 值的键
  .keyName : 操作的某个按键名的键(少部分)

<div id="example">
<h2>1. 绑定监听</h2>
<button v-on:click="test1">Greet</button>
<button @click="test1">Greet2</button>
<button @click="test2($event, 'hello')">Greet3</button>
<h2>2. 事件修饰符</h2>
<!-- 阻止事件默认行为 -->
<a href="http://www.baidu.com" @click.prevent="test3">百度一下</a>
<br/>
<br/>
<!-- 停止事件冒泡 -->
<div style="width: 200px;height: 200px;background: red" @click="test4">
<div style="width: 100px;height: 100px;background: green"
@click.stop="test5"></div>
</div>
<h2>3. 按键修饰符</h2>
<input @keyup.8="test6">
<input @keyup.enter="test6">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
methods: {
test1 (event) {
// 方法内 `this` 指向 vm
// alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.innerHTML)
},
test2 (event, msg) {
alert(event.target.innerHTML + '---' + msg)
},
test3() {
alert('阻止事件的默认行为')
},
test4() {
alert('out')
},
test5() {
alert('inner')
},
test6(event) {
alert(event.keyCode + '---' + event.target.value)
}
}
})
</script>

表单输入绑定

• 使用 v-model 对表单数据自动收集
  text/textarea
  checkbox
  radio
  select
• 编码

<div id="demo">
<form @submit.prevent="handleSubmit">
<span>用户名: </span>
<input type="text" v-model="user.username"><br>
<span>密码: </span>
<input type="password" v-model="user.pwd"><br>
<span>性别: </span>
<input type="radio" id="female" value="female" v-model="user.sex">
<label for="female">女</label>
<input type="radio" id="male" value="male" v-model="user.sex">
<label for="male">男</label><br>
<span>爱好: </span>
<input type="checkbox" id="basket" value="basketball"
v-model="user.likes">
<label for="basket">篮球</label>
<input type="checkbox" id="foot" value="football"
v-model="user.likes">
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="pingpang"
v-model="user.likes">
<label for="pingpang">乒乓</label><br>
<span>城市: </span>
<select v-model="user.cityId">
<option value="">未选择</option>
<option v-for="city in allCitys" :value="city.id">
{{ city.name }}
</option>
</select><br>
<span>介绍: </span>
<textarea v-model="user.desc" rows="10"></textarea><br><br>
<input type="submit" value="注册">
</form>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#demo',
data: {
user: {
username: '',
pwd: '',
sex: 'female',
likes: [],
cityId: '',
desc: '',
},
allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SZ'},{id: 4, name:
'SH'}],
},
methods: {
handleSubmit (event) {
alert(JSON.stringify(this.user)) 
}
}
})
</script>

Vue的Ajax请求

<script type="text/javascript">
			window.onload = function() {
				new Vue({
					el: '#box',
					data: {
						myarr: []
					},
					methods: {
						get: function() {
							//发送get请求
							this.$http.get('https://api.github.com/search/users', {
								params: {
									q: 'aa'
								}
							}).then(function(res) {
								//document.write(JSON.stringify(res.body));
								this.myarr = res.body.items;
							}, function() {
								console.log('请求失败处理');
							});
						}
					}
				});
			}
		</script>
		<div id="box">
			<button type="button" @click="get()">请求后台</button>
			<ul>
				<li v-for="(obj,index) in myarr" :key="index">
					{{index}}----{{obj.login}}----{{obj.id}}---{{obj.url}}
				</li>
			</ul>
		</div>

<script type="text/javascript">
			window.onload = function() {
				new Vue({
					el: '#box',
					data: {
						myarr: []
					},
					methods: {
						get: function() {
							//alert(this);
							var vue = this;
							axios
								.get('https://api.github.com/search/users', {
									params: {
										q: 'aa'
									}
								})
								.then(function(res) {
									//res 响应对象 里面的 data 属性,取出响应体,这个响应体就是 json对象
									vue.myarr = res.data.items;
								})
								.catch(function(error) { // 请求失败处理
									console.log(error);
								});
						}
					}
				});
			}
		</script>
		<div id="box">
			<button type="button" @click="get()">请求后台</button>
			<ul>
				<li v-for="(obj,index) in myarr" :key="index">
					{{index}}----{{obj.login}}----{{obj.id}}---{{obj.url}}
				</li>
			</ul>
		</div>