vue框架之基础语法等相关内容-111
作者：互联网
1 条件渲染
1.1 通过v-if和v-for实现购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
.red {
background: red;
}
.green {
background: green;
}
.font {
font-size: 30px;
}
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<!-- 土办法-->
<!-- <ul>-->
<!-- <li>{{shopping[0]}}</li>-->
<!-- <li>{{shopping[1]}}</li>-->
<!-- <li>{{shopping[2]}}</li>-->
<!-- </ul>-->
<!--v-for实现-->
<ul v-if="shopping.length>0">
<li v-for="data in shopping">{{data}}</li>
</ul>
<div v-else>购物车空空如也</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
shopping: ['苹果', '香蕉', '桃子'],
},
})
</script>
</html>
1.2 v-if/v-else-if/v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<div v-if="which==1">1111</div>
<div v-else-if="which==2">2222</div>
<div v-else>3333</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
which:1
},
})
</script>
</html>
2 列表渲染
2.1 for循环数组，对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<h1>循环数组</h1>
<div>
<p v-for="data in arr">{{data}}</p>
</div>
<h1>循环对象</h1>
<div>
<p v-for="data in obj">{{data}}</p>
</div>
<h1>循环数组索引和value</h1>
<div>
<p v-for="(data,index) in arr">索引是：{{index}}，数据是{{data}}</p>
</div>
<h1>循环对象key和value</h1>
<div>
<p v-for="(value,key) in obj">key是：{{key}}，value是：{{value}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
arr: ['zs', 'ls', 'ww'],
obj: {name: 'lqz', age: 18, sex: '男'},
},
})
</script>
</html>
2.2 key值的解释
1 v-for循环数组，对象时，建议在控件（组件，标签）写一个key属性，属性值唯一
2 页面更新以后，加速dom的替换（渲染）,虚拟dom的替换diff算法
3 :key="变量"
2.2 数组更新与检测
0 数据双向绑定，数据变化，页面变，页面变化数据变
1 使用以下方法操作数组，可以检测变动：push，pop，shift，unshift,splice,sort,reverse
2 不会检测变动filter(),concat(),slice(),map()，新数组替换旧数组
-页面不会更改：vm.arr.concat(['44','55'])
-解决vm.arr=vm.arr.concat(['44','55'])
3 页面不会更改：通过索引值更新数组
-解决方案一：
vm.arr[0]
"11"
vm.arr[0]='99'
"99"
vm.arr.splice(0,1,'88')
["99"]
-解决方案二
Vue.set(vm.arr,0,'lqz')
3 上面能更新是因为作者重写了那些方法
3 事件处理
3.1 input过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<!--
blur:失去焦点触发
change：失去焦点触发，跟blur一样
input:数据发生变化，就会触发
-->
<!-- <input type="text" v-model="myinput" @blur="handleChange"> {{myinput}}-->
<!-- <input type="text" v-model="myinput" @change="handleChange"> {{myinput}}-->
<input type="text" v-model="myinput" @input="handleChange"> {{myinput}}
<br>
<div>
<p v-for="data in new_arr">{{data}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
myinput:'',
arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
new_arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
},
methods:{
handleChange(){
console.log(this.myinput)
//控制arr的变化，数据又双向绑定了，页面就会变化
this.new_arr=this.arr.filter(item=>{
return item.indexOf(this.myinput) >-1
})
}
}
})
//
// var a=['aabbc', 'abc', 'aabcd','ccdd','bbcc']
// var res=a.filter(function (itme) {
// // if (itme.length >4){
// // return true
// // }else {
// // return false
// // }
// // if (itme.indexOf('aa')>-1){
// // return true
// // }else {
// // return false
// // }
// return itme.indexOf('a')>-1
//
// })
//
//
// var res=a.filter(item=>{
// return itme.indexOf('a')>-1
// })
// console.log(res)
//
//
// var a=function (a) {
// }
//
// var a=a=>{}
</script>
</html>
3.2 简单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<button @click="isShow=!isShow">点我折叠，展开</button>
<button @click="handleClick">点我折叠，展开2</button>
<!-- <button @click="handleClick($event)">点我折叠，展开2,传递event事件</button>-->
<button @click="handleClick">点我折叠，展开2,传递event事件</button>
<div v-show="isShow">
我很好看
<br>
你也很好看呢
<br>
大家都好看
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isShow:true
},
methods:{
handleClick(ev){
console.log(ev)
this.isShow=!this.isShow
}
}
})
//
// var a=['aabbc', 'abc', 'aabcd','ccdd','bbcc']
// var res=a.filter(function (itme) {
// // if (itme.length >4){
// // return true
// // }else {
// // return false
// // }
// // if (itme.indexOf('aa')>-1){
// // return true
// // }else {
// // return false
// // }
// return itme.indexOf('a')>-1
//
// })
//
//
// var res=a.filter(item=>{
// return itme.indexOf('a')>-1
// })
// console.log(res)
//
//
// var a=function (a) {
// }
//
// var a=a=>{}
</script>
</html>
3.3 事件修饰符
.stop 阻止事件冒泡
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接跳转
.once 只处理一次就解绑(抽奖页面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<ul @click.self="handleUl">
<!-- <li v-for="data in datalist" @click="handleLi($event)">{{data}}</li>-->
<!-- <li v-for="data in datalist" @click.stop="handleLi">{{data}}</li>-->
<!-- <li v-for="data in datalist" @click="handleLi">{{data}}</li>-->
<li v-for="data in datalist" @click.once="handleLi">{{data}}</li>
</ul>
<a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist: ['111', '222', '333']
},
methods: {
// handleLi(ev) {
// console.log('li被点击了')
// ev.stopPropagation() //点击事件停止向父组件传递
// },
handleLi() {
console.log('li被点击了')
},
handleUl() {
console.log('Ul被点击了')
},
// handleA(ev){
// console.log('a被点击了')
// ev.preventDefault() //阻止a标签的跳转
// }
handleA() {
console.log('a被点击了')
}
}
})
</script>
</html>
3.4 按键修饰符
1 敲击回车键干一个事
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<!-- <input type="text" v-model="myinput" @keyup.enter="handleKey">-->
<input type="text" v-model="myinput" @keyup.13="handleKey">
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
myinput: ''
},
methods: {
// handleKey(ev){
// console.log('xxx')
// console.log(ev)
// if(ev.keyCode==13){
// console.log('回车被按下了')
// }
//
// }
handleKey() {
console.log('回车被敲二零')
}
}
})
</script>
</html>
4 数据双向绑定
4.1 v-model使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<input type="text" v-model="myinput">
<br>
{{myinput}}
<br>
<textarea name="" id="" cols="30" rows="10" v-model="text"></textarea>
<br>
{{text}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
myinput: '',
text: '',
},
})
</script>
</html>
5 表单控制
5.1 checkbox选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<h1>表单相关之checkbox</h1>
<input type="checkbox" v-model="check">记住密码
<br>
{{check}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
check: true,
},
})
</script>
</html>
5.2 多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<h1>表单相关之checkbox多选</h1>
<h3>你喜欢的女明星</h3>
<input type="checkbox" v-model="checkgroup" value="lyf">刘亦菲
<input type="checkbox" v-model="checkgroup" value="baby">baby
<input type="checkbox" v-model="checkgroup" value="egon">egon
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
checkgroup:[],
},
})
</script>
</html>
5.3 单选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<h1>表单相关之radio</h1>
<input type="radio" v-model="ra" value="男">男
<input type="radio" v-model="ra" value="女">女
<input type="radio" v-model="ra" value="未知">未知
<br>
{{ra}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
ra:'',
},
})
</script>
</html>
5.4 购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<ul>
<!--<li v-for="item in datalist">商品名字：{{item.name}},商品数量：{{item.number}}</li>-->
<li v-for="item in datalist">
<input type="checkbox" :value="item" v-model="checkgroup">
{{item}}
</li>
</ul>
<br>
当前价格是：{{getPrice()}}
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist: [
{name: '特斯拉', price: 10, number: 1, id: '1'},
{name: '苹果', price: 3, number: 4, id: '2'},
{name: '香蕉', price: 80, number: 6, id: '3'}
],
checkgroup: [],
},
methods:{
getPrice(){
var sum_price=0
for(i in this.checkgroup){
sum_price+=this.checkgroup[i]['number']*this.checkgroup[i]['price']
}
return sum_price
}
}
})
</script>
</html>
5.5 购物车之全选，全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<input type="checkbox" v-model="isAll" @change="handleCheck"> 全选/全不选
<ul>
<!--<li v-for="item in datalist">商品名字：{{item.name}},商品数量：{{item.number}}</li>-->
<li v-for="item in datalist">
<input type="checkbox" :value="item" v-model="checkgroup" @change="handleOne">
{{item}}
</li>
</ul>
<br>
当前价格是：{{getPrice()}}
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist: [
{name: '特斯拉', price: 10, number: 1, id: '1'},
{name: '苹果', price: 3, number: 4, id: '2'},
{name: '香蕉', price: 80, number: 6, id: '3'}
],
checkgroup: [],
isAll:false,
},
methods:{
getPrice(){
var sum_price=0
for(i in this.checkgroup){
sum_price+=this.checkgroup[i]['number']*this.checkgroup[i]['price']
}
return sum_price
},
handleCheck(){
// console.log('xxx')
if(this.checkgroup.length>0){
this.checkgroup=[]
}else {
this.checkgroup=this.datalist
}
},
handleOne(){
console.log('选中',this.checkgroup.length)
console.log('总数据',this.datalist.length)
if(this.checkgroup.length==this.datalist.length){
this.isAll=true
}else {
this.isAll=false
}
}
}
})
</script>
</html>
标签：vue,console,log,vm,语法,checkgroup,111,var,data 来源： https://www.cnblogs.com/usherwang/p/14141118.html