vue介绍描述
- 渐进式 JavaScript 框架
- 作用: 动态构建用户界面
vue的特点
- 遵循 MVVM 模式
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
- 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目
与其它前端 JS 框架的关联
- 借鉴 angular 的模板和数据绑定技术
- 借鉴 react 的组件化和虚拟 DOM 技术
vue相关语法
双大括号表达式
- 语法: {{exp}}
- 功能: 向页面输出数据
- 可以调用对象的方法
指令一: 强制数据绑定
- 功能: 指定变化的属性值
- 完整写法: v-bind:xxx=‘yyy’
- 简洁写法::xxx=‘yyy’
指令二: 绑定事件监听
- 功能: 绑定指定事件名的回调函数
- 完整写法:
v-on:keyup=‘xxx’
v-on:keyup=‘xxx(参数)’
v-on:keyup.enter=‘xxx’ - 简洁写法:
@keyup=‘xxx’
@keyup.enter=‘xxx’
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: #F0F8FF;
}
#div2 {
width: 100px;
height: 100px;
background: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
new Vue({
el: '#box',
data: {
msg: '呀呀嘿',
url: 'http://hao.195855.com/',
url1: 'http://www.baidu.com/'
},
methods: {
change(num) {
if (num == 1) {
alert("天蓝色")
} else if (num == 2) {
alert("红色");
}
}
}
});
}
</script>
</head>
<body>
<div id="box">
<a v-bind:href="url" target="_blank">进入360浏览器</a>
<a :href="url1" target="_blank">百度一下，你就知道</a>
{{msg}}
<div id="div1" v-on:click="change(1)">
</div>
<div id="div2" @click="change(2)">
</div>
</div>
</body>
</html>
计算属性和监视
计算属性
- 在 computed 属性对象中定义计算属性的方法
- 在页面中使用{{方法名}}来显示计算的结果
监视属性
- 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
- 当属性变化时, 回调函数自动调用, 在函数内部进行计算
计算属性高级
- 通过 getter/setter 实现对属性数据的显示和监视
- 计算属性存在缓存, 多次读取只执行一次 getter 计算
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
new Vue({
el:'#box',
data:{
xing:'王',
ming:'五'
},
computed:{
fullname:{
get:function(){
return this.xing+' '+this.ming;
},
set:function (value) {
var a=value.split(" ");
this.xing=a[0];
this.ming=a[1];
}
}
}
})
}
</script>
</head>
<body>
<div id="box">
姓：<input type="text" id="" value="" v-model="xing"/>
名：<input type="text" id="" value="" v-model="ming"/>
姓名：<input type="text" id="" value="" v-model="fullname"/>
</div>
</body>
</html>
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>
<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>
条件渲染指令
- v-if 与 v-else
- v-show
比较 v-if 与 v-show
- 如果需要频繁切换 v-show 较好
- 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background: aliceblue;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
new Vue({
el: '#div1',
data: {
flag: true
}
})
}
</script>
</head>
<body>
<div id="div1">
<div id="box" v-show="flag">
</div>
<button type="button" @click="flag=!flag">隐藏与显示</button>
</div>
</body>
</html>
列表渲染
-
列表显示指令
数组: v-for / index
对象: v-for / key -
列表的更新显示
删除 item
替换 item -
列表的高级处理
列表过滤
列表排序
列表显示编码
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
new Vue({
el: "#box",
data: {
name: "",
age: "",
jsonArray: []
},
methods: {
addElements() {
var name = this.name.trim();
var age = this.age.trim();
if (!name || !age) {
return;
}
var json = {
'name': name,
'age': age
}
this.jsonArray.push(json);
this.name = '';
this.age = '';
},
delElements(index,num){
// num : 1 删除单个元素 2删除所有元素
if(num==1){
this.jsonArray.splice(index,1);
}else if(num==2){
if(window.confirm("确定删除？")){
this.jsonArray=[];
}
}
},
changeElements(num,index){
// num 1 修改名字 2 修改年龄
if(num==1){
var new_name=window.prompt("请输入新的称呼：");
this.jsonArray[index].name=new_name;
this.jsonArray.push();
}else if(num==2){
var new_age=window.prompt("请输入新的年龄：");
this.jsonArray[index].age=new_age ;
this.jsonArray.push();
}
}
}
});
}
</script>
</head>
<body>
<center>
<div id="box">
<input type="text" name="" id="" value="" placeholder="请输入姓名" v-model="name" />
<input type="text" name="" id="" value="" placeholder="请输入年龄" v-model="age" />
<a href="" @click.prevent="addElements()">添加</a>
<br><br><br>
<table border="1" cellspacing="0" cellpadding="" width="600px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="(obj,index) in jsonArray" :key="index" align="center">
<td>{{index}}</td>
<td>{{obj.name}} <a href="" @click.prevent="changeElements(1,index)">修改</a></td>
<td>{{obj.age}} <a href="" @click.prevent="changeElements(2,index)">修改</a></td>
<td><a href="" @click.prevent="delElements(index,1)">删除</a></td>
</tr>
<tr v-if="jsonArray.length>0" align="center">
<td colspan="4"><a href="" @click.prevent="delElements(index,2)">全部删除</a></td>
</tr>
<tr v-else align="center">
<td colspan="4">无数据，无法删除</td>
</tr>
</table>
</div>
</center>
</body>
</html>
列表过滤编码
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
new Vue({
el:"#box",
data:{
a:[],
jsonArr: [{
'name': 'zhangsan',
'age': 24,
'sex': '男'
}, {
'name': 'lisi',
'age': 23,
'sex': '男'
}, {
'name': 'wangwu',
'age': 22,
'sex': '男'
}, {
'name': 'zhaoliu',
'age': 28,
'sex': '男'
}, {
'name': 'tianqi',
'age': 27,
'sex': '男'
}],
flag:true,
b:""
},
computed:{
newArry:function(){
var bianzhi=this.b;
var arr=this.jsonArr.filter(function(ele){
if(ele.name.indexOf(bianzhi)!=-1){
return true;
}else{
return false;
}
})
return arr;
}
},
methods:{
sortd(num){
if(this.flag){
for (var i = 0; i < this.jsonArr.length; i++) {
this.a[i]=this.jsonArr[i]
}
this.flag=false;
}
if(num==1){
this.jsonArr.sort(function(a,b){
return -(a.age-b.age);
})
}else if(num==2){
this.jsonArr.sort(function(a,b){
return a.age-b.age;
})
}else if(num==3){
for (var i = 0; i < this.a.length; i++) {
this.jsonArr[i]=this.a[i];
// alert(this.jsonArr[i].name)
}
this.jsonArr.reverse().reverse();
}
}
}
});
}
</script>
</head>
<body>
<center>
<div id="box">
<input type="text" name="" id="" value="" placeholder="请输入检索号:" v-model="b"/>
<ul style="list-style: none;">
<li v-for="(obj,index) in newArry" :key="index">
{{index}}---{{obj.name}}---{{obj.age}}---{{obj.sex}}
</li>
</ul>
<button type="button" @click="sortd(1)">年龄降序</button>
<button type="button" @click="sortd(2)">年龄升序</button>
<button type="button" @click="sortd(3)">默认排序</button>
</div>
</center>
</body>
</html>
事件处理
绑定监听:
- 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>
扫一扫
600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
