Vue入门简易命令
style和class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./JS/vue.js"></script>
<style>
.greenyellow {
background-color: greenyellow;
}
.size {
font-size: 40px
}
</style>
</head>
<body>
<div id="app01">
<h1>class的使用方式</h1>
<div :class="classStr">
class就在这里验证
</div>
<div :class="classList">
class就在这里验证
</div>
<div :class="classObj">
class就在这里验证
</div>
<h1>style的使用方式</h1>
<div :style="styleStr">
style就在这里验证
</div>
<div :style="styleList">
style就在这里验证
</div>
<div :style="styleObj">
style就在这里验证
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
calssStr: 'greenyellow',
classList: ['greenyellow','size'],
classObj: {greenyellow: true, size: false},
styleStr:'backgroundColor:orange;fontSize:60px',
styleList:[{backgroundColor:'pink'},{'font-size':'50px'}],
styleObj:{backgroundColor: 'red',fontSize:'100px'}
}
})
</script>
</html>
条件渲染
- 写在标签上，控制标签的显示与不显示
- v-if='布尔值/运算完成是布尔值'
- v-else-if='布尔值/运算完成是布尔值'
- v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>条件渲染</h1>
<div v-if="score>=10000">王者</div>
<div v-else-if="score>=8000 && score<10000">宗师</div>
<div v-else-if="score>=7000 && score<8000">大师</div>
<div v-else-if="score>=6000 && score<7000">钻石</div>
<div v-else-if="score>=5000 && score<60000">铂金</div>
<div v-else-if="score>=4000 && score<50000">黄金</div>
<div v-else-if="score>=3000 && score<40000">白银</div>
<div v-else-if="score>=2000 && score<30000">青铜</div>
<div v-else>黑铁</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app01',
data:{
score:99999
}
})
</script>
</html>
列表渲染
# v-for 可以循环数组，数字，字符串，对象
v-for="key in obj"
-如果是数组：key就是数组的一个个元素
-如果是数字：key就是从1开始的一个个数字
-如果是字符串：key就是一个个字符
-如果是对象：key就是一个个value的值
v-for="(key,value) in obj"
-如果是数组：key就是数组的一个个元素,value就是索引
-如果是数字：key就是从1开始的一个个数字,value就是索引
-如果是字符串：key就是一个个字符,value就是索引
-如果是对象：key就是一个个value的值，value就是一个个key
# 每次循环的标签上，一般都会带一个属性： :key='值必须唯一'
-key值得解释：为了加速虚拟dom的替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
<div class="container-fluid">
<div class="row top">
<div class="col-md-6 col-md-offset-3">
<div class="text-center" style="margin-bottom: 40px">
<button @click="handleClick" class="btn btn-danger">加载购物车</button>
</div>
<div v-if="shopList.length>0">
<table class="table table-bordered">
<thead>
<tr>
<th>商品编号</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="shop in shopList">
<th>{{shop.id}}</th>
<th>{{shop.name}}</th>
<th>{{shop.price}}</th>
<th>{{shop.count}}</th>
</tr>
</tbody>
</table>
</div>
<div v-else>
购物车空荡荡(地狱空荡荡，魔鬼在人间)
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app01',
data:{
shopList:[]
},
methods:{
handleClick(){
this.shopList = [{id:1, name:'比亚迪',price:'700000元',count:1},
{id:2, name:'索尼相机',price:'7688元',count:1},
{id:3, name:'吉他',price:'4399元',count:1},
{id:4, name:'苹果笔记本',price:'48900元',count:1},
{id:5, name:'华为手机',price:'12000元',count:1},
]
}
}
})
</script>
</html>
v-for循环数组，循环字符串，数字，对象等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>数组的检测与更新</h1>
<button @click="handleClick">点我追加友商</button>|
<button @click="handleClick1">点我追加一大批友商</button>|
<button @click="handleClick2">点我修改数组页面的变化</button>
<p v-for="firm in company">{{firm}}</p>
<h1>对象的检测与更新</h1>
<button @click="handleClick3">点我追加money</button>|
<button @click="handleClick4">点我追加money</button>|
<p v-for="(value, key) in obj">{{key}}-*-*-*-{{value}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:'#app01',
data:{
company:['小米','华为','海思','百度','腾讯','阿里','字节','bilibili'],
obj:{'name':'joseph', age:21}
},
methods:{
handleClick(){
this.company.push('宁德时代')
},
handleClick1(){
var a = this.company.concat(['比亚迪', '京东', '万达'])
console.log(a)
},
handleClick2(){
Vue.set(this.company,0,'介似嘛') # 监控到变化
},
handleClick3(){
this.obj.money = '10000000'
console.log(this.obj) # 监控不到变化
},
handleClick4(){
Vue.set(this.obj,'money',1000000)
}
}
})
</script>
</html>
数组的检验与更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
<div class="container-fluid">
<div class="row top">
<div class="col-md-6 col-md-offset-3">
<div class="text-center" style="margin-bottom: 40px">
<button @click="handleClick" class="btn btn-danger">加载购物车</button>
</div>
<div v-if="shopList.length>0">
<table class="table table-bordered">
<thead>
<tr>
<th>商品编号</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="shop in shopList">
<th>{{shop.id}}</th>
<th>{{shop.name}}</th>
<th>{{shop.price}}</th>
<th>{{shop.count}}</th>
</tr>
</tbody>
</table>
</div>
<div v-else>
购物车空荡荡(地狱空荡荡，魔鬼在人间)
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app01',
data:{
shopList:[]
},
methods:{
handleClick(){
this.shopList = [{id:1, name:'比亚迪',price:'700000元',count:1},
{id:2, name:'索尼相机',price:'7688元',count:1},
{id:3, name:'吉他',price:'4399元',count:1},
{id:4, name:'苹果笔记本',price:'48900元',count:1},
{id:5, name:'华为手机',price:'12000元',count:1},
]
}
}
})
</script>
</html>
双向数据绑定
- input标签 -model，双向数据绑定
- 使用 属性指令绑定:value='变量' 是数据的单向绑定
- v-model='name'：数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>数据的双向绑定</h1>
<p>用户名:
<input type="text" v-model="name">
</p>
<p>密码:
<input type="password" v-model="password">
</p>
<button @click="handleSubmit">提交</button>{{err}}
</div>
</body>
<script>
var vm = new Vue({
el:'#app01',
data:{
name:'',
password:'',
err:''
},
methods:{
handleSubmit(){
console.log(this.name, this.password)
this.err='从户名或密码错误'
}
}
})
</script>
</html>
事件处理
- 事件绑定 v-on:事件='函数' 简写 @事件名='函数'
- input 三种事件
- blur: 失去焦点事件
- change: 发生变化触发
- input: 输入触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>input的事件处理</h1>
<h2>blur</h2>
<p><input type="text" v-model="name" @blur="handleBlur">--*--{{name}}</p>
<h2>change</h2>
<p><input type="text" v-model="name1" @change="handleChange">--*--{{name1}}</p>
<h2>input</h2>
<p><input type="text" v-model="name2" @input="handleInput">--*--{{name2}}</p>
</div>
</body>
<script>
var vm = new Vue ({
el: '#app01',
data: {
name: '',
name1: '',
name2: ''
},
methods: {
handleBlur() {
console.log('失去焦点了，触发Blur执行', this.name)
},
handleChange() {
console.log('发生变化，触发了Change执行', this.name1)
},
handleInput() {
console.log('输入了内容，触发了Input执行', this.name2)
}
}
})
</script>
</html>
过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>过滤案例</h1>
<p><input type="text" v-model="search" placeholder="请输入您需要搜索的内容" @input="handleSearch"></p>
<ul>
<li v-for="item in newdataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el:'#app01',
data:{
search:'',
dataList:[
'a',
'black',
'pink',
'blue',
'emo',
'orange',
'write',
'yellow',
'green',
'pohiougyutyxtrzextycvu'
],
newdataList:[
'a',
'black',
'pink',
'blue',
'emo',
'orange',
'write',
'yellow',
'green',
'pohiougyutyxtrzextycvu'
],
},
methods:{
handleSearch(){
console.log('搜索的内容是:',this.search)
var _this = this
# 较为复杂的写法，后面可以缩微一行
// this.newdataList = this.dataList.filter(item=>{console.log(this)
# 判断this.search是否在item中，如果在保留，return true，如果不再返回false
// if(item.indexOf(this.search)>=0){
// return true
// }else {
// return false
// }
// })
# 简易写法
this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
}
}
})
# 数组过滤内置方法
// var l = [
// 'a',
// 'black',
// 'pink',
// 'blue',
// 'emo',
// 'orange',
// 'write',
// 'yellow',
// 'green',
// 'pohiougyutyxtrzextycvu'
// ]
# filter数组内置的，需要传一个匿名函数，接受一个参数，会循环的从数组中取出值，传入匿名函数，执行
# 匿名函数返回true或false，如果返回trur那么该值保留，如果返回false那么丢失
// l = l.filter(function (item){
// console.log('进来一个值:',item)
// return false
// })
// console.log(l)
// var s ='black'
// var a = 'a'
// console.log(s.indexOf(a)>=0)
// var f = (name,age) =>{
// console.log('打印了',name)
// }
// var f = (name,age) =>{
// console.log('打印了',name, age)
// }
// var f = function (name){
// return name+'nb'
// }
// var f = name => name+'nb'
// var f = function () {
// console.log('匿名函数的this',this)
// }
// var f1 = () => {
// console.log('箭头函数的this',this)
// }
// var obj = {
// f: function (){
// console.log('匿名函数的this',this)
// },
// f1 : () =>{
// console.log('箭头函数的this',this)
// }
// }
</script>
</html>
事件修饰符
- stop 只能处理自己的事件，不向父控件冒泡
- self 只处理自己的事件，子控件冒泡的时间不处理
- prevent 阻止a链接的转跳
- once 该事件只能发生一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>事件修饰符</h1>
<h2>时间冒泡 通过修饰符 stop加在子控件上，阻止事件冒泡</h2>
<ul @click="handleU1">
<li @click.stop="handlegirl">美女</li>
<li @click="handleyangman">帅哥</li>
</ul>
<h2>事件冒泡 通过 事件修饰符 self加在父控件上，只处理自己的事件</h2>
<ul @click.self="handleU2">
<li @click.stop="handlegirl">美女</li>
<li @click="handleyangman">帅哥</li>
</ul>
<h3>阻止a标签的跳转</h3>
<a href="https://www.jd.com/" @click.prevent="handleA">点我购物</a>
<h4>once只执行一次</h4>
<button @click.once="handleOnce">点我秒杀</button>
</div>
</body>
<script>
var vm = new Vue({
el:'#app01',
data:{},
methods:{
handleU1(){
console.log('ul被点了')
},
handlegirl(){
console.log('美女被点击')
},
handleyangman(){
console.log('帅哥被点了')
},
handleA(){
console.log('A被点了')
},
handleOnce(){
console.log('恭喜你秒杀成功')
}
}
})
</script>
</html>
按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
search: ''
},
methods: {
handleUp(event) {
console.log('回车被按了')
// if (event.code == 'Enter') {
// console.log('回车键被案例', event)
// }
}
}
})
</script>
</html>
