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>VUE</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<script type="text/javascript" src='js/vue.js'></script>
<script type="text/javascript" src='js/axios.js'></script>
<script type="text/javascript" src='js/index.js'></script>
</head>
<body>
<div id="my" >
<div class="panel panel-info" style="margin:20px;">
<!-- 头部 -->
<div class="panel-heading">
<h1 style="display: inline-block;">我的购物清单列表</h1>
<span>清单总数
<span class="label label-warning" >{{lists.length}}</span>
</span>
</div>
<!-- 内容 -->
<div class="panel-body">
<div class="input-group">
<input class="form-control" type="text" v-model="name"/>
<span class="input-group-btn">
<button class="btn btn-primary" @click="add" :disabled="!name">添加</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>清单名称</th>
<th>状态</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(list,i) in lists">
<td>{{list.name}}</td>
<td>{{list.state | stateFilter}}</td>
<td><button type="button" class="btn btn-danger btn-sm" @click="del(i)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
window.onload = function(){
new Vue({
el:"#my",
data:{
name:'', //添加的表单值
lists:[
{name:'手机',state:'0'},
{name:'电脑',state:'1'},
{name:'包包',state:'2'},
{name:'衣服',state:'1'}
]
},
methods:{
add:function(){ //添加
//判断是否为空
if(!this.name) return;
this.lists.unshift({name:this.name,state:'0'});
this.name = ''; //清除
},
del:function(i){ //删除
this.lists.splice(i,1); //i表示位置 1个数
}
},
filters:{ //过滤器
stateFilter:function(d){ //{{list.state | stateFilter}} d=list.state
// if(d){
// return '已采购'
// }else {
// return '未采购'
// }
switch(d){
case '0':
return '未采购';
case '1':
return '采购中';
case '2':
return '已采购';
default:
return d;
}
}
}
})
}
常用指令
v-on
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#my",
data:{
age:20
},
methods:{
action1:function(){
this.age=100
},
action2:function(i){
this.age=i
}
}
})
}
</script>
<style>
</style>
</head>
<body>
<div id="my">
<h1>{{age}}</h1>
<button v-on:click="age=25">click</button>
<button @click="action1">click2</button>
<button @click="action2(30)">click3</button>
<button @dblclick="action2(30)">dblclick</button>
<button @mouseover="action2(50)" @mouseout="action2(80)">移入/移出</button>
<!-- 键盘事件 keydown keyup
enter 13 a 65 b66 c67
-->
<!-- 按钮别名 .enter .a .b .esc .up .tab -->
<button @keydown.enter="action2(20)">keydown</button>
<button @keydown.a="action2(20)">keydown</button>
<button @keydown.ctrl.67="action2(20)">keydown</button>
<button @keydown.ctrl.c="action2(20)">keydown</button>
</div>
</body>
</html>
v-bind
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#my",
data:{
d1:'d1',
d2:'d2',
check:true, //复选框
backgreen:{background:'green'},
blue:{color:'blue'},
red:'red',
url:'https://www.baidu.com/img/bd_logo1.png'
},
methods:{
action:function(){
return 'green'
},
}
})
}
</script>
<style>
.d1{
color:#f00;
}
.d2{
border:1px solid #666;
}
.green{
color:green;
}
.blue {
color:blue;
}
</style>
</head>
<body>
<div id="my">
<!-- 单个引用 -->
<div class="d1">红色</div>
<!-- 单个引用 'd1'这个表示样式名 d1表示变量，需要在data中定义-->
<div v-bind:class="'d1'">红色</div>
<div :class="d1">红色</div>
<!-- 多个引用 -->
<div :class="['d1','d2']">红色</div>
<div :class="[d1,d2]">红色</div>
<div :class="[d1,check?d2:'blue']">红色</div>
<!-- 条件 -->
<!-- 三目运算 -->
<input type="checkbox" v-model="check" />{{check}}
<div :class="check ? d1 :'blue'">红色</div>
<!-- 键值对 {样式名：判断条件} -->
<div :class="{'blue':check}">红色</div>
<div :class="{blue:check}">红色</div>
<!-- 条件是函数 加括号 -->
<div :class="action()">function</div>
<!-- style -->
<!-- 单个引用 -->
<div style="color:red">红色</div>
<div style="color:#f00">红色</div>
<!-- 变量 -->
<div :style="backgreen">红色</div>
<div :style="{background:'#f60',fontSize:'30px',marginTop:'20px'}">红色</div>
<div :style="{background:red}">红色</div>
<div :style="{background:'blue'}">红色</div>
<!-- 多个引用 -->
<div :style="[backgreen,blue]">红色</div>
<div :style="[backgreen,check?blue:{background:'#f60'}]">红色</div>
<img :src="url" />
</div>
</body>
</html>
v-for
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#my",
data:{
arr:['a','b','c','d'],
obj:{id:1,name:'abc'},
num:10,
items:[
{name:'a',age:20},
{name:'b',age:30},
{name:'c',age:40},
]
},
methods:{
action1:function(){
this.age=100
},
action2:function(i){
this.age=i
}
}
})
}
</script>
<style>
</style>
</head>
<body>
<div id="my">
<h1>{{age}}</h1>
<!-- 遍历数组 v =value i= index-->
<!-- :key防止从缓存中去取值，担心页面不能渲染 -->
<ul>
<li v-for="(v,i) in arr" :key="i">{{v}}===={{i}}</li>
</ul>
<ul>
<li v-for="v in arr" :key="i">{{v}}</li>
</ul>
<!-- 遍历数组对象 v =value i= index-->
<ul>
<li v-for="(v,i) in items" :key="i">{{v.name}}===={{v.age}}</li>
</ul>
<!-- 遍历对象 v =value k= key-->
<ul>
<li v-for="(v,k) in obj" :key="k">{{v}}===={{k}}</li>
</ul>
<!-- 遍历数值 v =value i= index--->
<ul>
<li v-for="(v,i) in num" :key="i">{{v}}===={{i}}</li>
</ul>
</div>
</body>
</html>
v-html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#my",
data:{
msg:'hello world',
html:'<p>hello</p>'
}
})
}
</script>
<style>
[v-cloak] {
display:none;
}
</style>
</head>
<body>
<div id="my">
<!-- 解决浏览器闪烁 -->
<h1 v-cloak>{{msg}}</h1>
<h1 v-text="msg"></h1>
<h1 v-html="html"></h1>
</div>
</body>
</html>
v-if
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#my",
data:{
flag:true,
age:26
},
methods:{
}
})
}
</script>
<style>
</style>
</head>
<body>
<div id="my">
<h1 v-if="age>=18">成年喽</h1>
<h1 v-else-if="age>=25">25岁了</h1>
<h1 v-else>30岁了</h1>
<h1 v-if="flag?age=20:age=30">30岁了</h1>
</div>
</body>
</html>
event
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#my",
data:{
flag:true,
age:26,
name:'签到'
},
methods:{
change1(){
this.age=1;
console.log(this.age);
},
change2(){
this.age=2;
console.log(this.age);
},
change3(e){
//e.stopPropagation(); //阻止事件冒泡
this.age=3;
console.log(this.age);
},
go(e){
//e.preventDefault(); //取消事件的默认动作
console.log('go');
},
once(){
this.name = '已签到';
console.log('once');
}
}
})
}
</script>
<style>
</style>
</head>
<body>
<div id="my">
<div @click="change1()">d1
<div @click="change2()">d2
<button @click="change3($event)">d3</button>
<button @click.stop="change3()">d3</button>
</div>
<a href="http://www.baidu.com" @click="go($event)">go</a>
<a href="http://www.baidu.com" @click.prevent.stop="go()">go</a>
</div>
<!-- 只执行一次 -->
<button @click.once="once()">{{name}}</button>
</div>
</body>
</html>
v-model
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#my",
data:{
value:'hello world',
flag:false,
flag1:['火龙果','香焦'], //复选框多个
flag2:['0'],
lists:[{title:'管理者',i:0},{title:'产品经理',i:1},{title:'开发者',i:2}],
radio1:'0', //单选框
radio2:'0', //单选框
select1:'香焦',//下拉框
select2:'1',//下拉框
}
})
}
</script>
<style>
[v-cloak] {
display:none;
}
</style>
</head>
<body>
<div id="my">
<h1>输入框</h1>
<!-- 输入框 -->
<input type="text" :disabled="value>=100" v-model="value" /> {{value}}
<h1>复选框</h1>
<div>
<!-- 复选框 默认值为true false-->
<input type="checkbox" v-model="flag" /> {{flag}}
</div>
<div>
<!-- 复选框有多个 -->
<input type="checkbox" v-model="flag1" value="苹果"/>苹果
<input type="checkbox" v-model="flag1" value="芒果"/>芒果
<input type="checkbox" v-model="flag1" value="火龙果"/>火龙果
<input type="checkbox" v-model="flag1" value="香焦"/>香焦
<p>获取的值：{{flag1}}</p>
</div>
<div>
<!-- 复选框有多个 传入其它的参数-->
<input type="checkbox" v-model="flag2" value="0"/>苹果
<input type="checkbox" v-model="flag2" value="1"/>芒果
<input type="checkbox" v-model="flag2" value="2"/>火龙果
<input type="checkbox" v-model="flag2" value="3"/>香焦
<p>获取的值：{{flag2}}</p>
</div>
<!-- 复选框有多个 动态数据-->
<div v-for="(v,index) in lists" :key="v.i">
<input type="checkbox" v-model="flag2" :value="v.i"/>{{v.title}}
</div>
<p>获取的值：{{flag2}}</p>
<h1>单选框</h1>
<!-- 单选框 -->
<div>
<input type="radio" v-model="radio1" value="0"/>{{radio1}}
</div>
<!-- 单选框多个 -->
<div>
<input type="radio" name="radio" v-model="radio2" value="0"/>男
<input type="radio" name="radio" v-model="radio2" value="1"/>女
<p>获取的值：{{radio2}}</p>
</div>
<h1>下拉框</h1>
<div>
<select v-model="select1">
<option>苹果</option>
<option>火龙果</option>
<option>香焦</option>
</select>
<p>获取的值：{{select1}}</p>
</div>
<div>
<select v-model="select2">
<option value='0'>苹果</option>
<option value='1'>火龙果</option>
<option value='2'>香焦</option>
</select>
<p>获取的值：{{select2}}</p>
</div>
<div>
<select v-model="select2">
<option v-for="(v,index) in lists" :key="v.i" :value='v.i'>{{v.title}}</option>
</select>
<p>获取的值：{{select2}}</p>
</div>
<!-- 修饰符 -->
<!-- 光标离开触发 -->
<input type="text" v-model.lazy="value" /> {{value}}
<!-- 过滤首尾空格 -->
<input type="text" v-model.trim="value" /> {{value}}
<!-- 只能输入数字 -->
<input type="number" v-model.number="value" /> {{value}}
</div>
</body>
</html>
双向数据绑定实现 - defineProperty
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
window.onload=function(){
//Object.defineProperty(obj,prop,des); //动态添加属性
//添加一个属性
// var obj = {};
// Object.defineProperty(obj,'name',{
// value:'abc',
// writable:true //表示属性值是否可以修改 true可以修改
// });
//添加多个属性
// var obj = {};
// Object.defineProperties(obj,{
// 'name':{
// value:'abc',
// writable:true
// },
// 'age':{
// value:20,
// writable:false
// }
// });
// console.log(obj)
//存 取方法 getter setter
var obj = {};
var n = 100;
Object.defineProperty(obj,'name',{
get:function(){
return n;
},
set:function(value){
n = value;
}
});
//obj.name=200; //对象的值改变时 触发set
document.querySelector("#input").onkeyup = function(e){
obj.name = e.target.value;
document.querySelector("#span").innerHTML = obj.name;
}
}
</script>
<style>
</style>
</head>
<body>
<div id="my">
<input type="text" id="input" />
<p>输出：<span id="span"></span></p>
</div>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>用户列表checkbox选项操作（全选）</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src='js/vue.js'></script>
<script src='js/axios.js'></script>
<script src='js/index.js'></script>
</head>
<body>
<div id='demo'>
<table class="table">
<thead>
<tr >
<th>
<input type="checkbox" v-model="checkAll" @change="checkChange"/>{{checkAll}}
</th>
<th>用户姓名</th>
<th>用户性别</th>
<th>所在城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,i) in lists" :key="i">
<th><input type="checkbox" v-model="v.check" @change="curCheckChange"></th>
<td>{{v.name}}</td>
<td>{{v.sex}}</td>
<td>{{v.city}}</td>
<td><button disabled="true">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
window.onload = function(){
new Vue({
el:'#demo',
data:{
checkAll:false, //全选
lists:[
{name:'张三1',sex:'男',city:'北京1',check:true},
{name:'张三2',sex:'女',city:'北京2',check:false},
{name:'张三3',sex:'男',city:'北京3',check:false},
{name:'张三4',sex:'男',city:'北京4',check:false},
{name:'张三5',sex:'女',city:'北京5',check:false},
{name:'张三6',sex:'男',city:'北京6',check:false},
{name:'张三7',sex:'男',city:'北京7',check:true},
]
},
methods:{
checkChange(){ //全选的状态改变
this.lists.forEach(item=>{
item.check = this.checkAll
})
},
curCheckChange(){ //当前
//当前选中的状态
// var num = this.lists.filter(item=>item.check).length;
//console.log(num);
//num==this.lists.length ? this.checkAll = true : this.checkAll = false;
//every() 检测数组中的元素是否符合条件，都满足，返回true, 只要有一个没有满 足，返回false
this.checkAll = this.lists.every(item=>item.check);
}
}
})
}
ul {
list-style-type:none;
}
.table{
width: 70%;
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
.table td,
.table th{
border: 1px solid #ddd;
padding: 10px;
}
.table thead tr {
background:#1f76b3;
color:#fff;
}
扫一扫
506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
