昨日内容回顾
-
前端发展历史
- vue react
- 谷歌flutter， Dart语言
- uni-app:小公司
- vue：3.x2.x
- 3.x ====>ts
- 2.x ====>js
-
vue
- 渐进式
- MVVM
- M层：
model，数据层，js - V层：
view，视图层，html，css - VM层：
viewModel层，负责M和V的交互
- M层：
- 组件化开发，单页面应用
- 组件有自己的html，css，js
- 在index.html 中做组件的替换，实现单页面应用spa
- js框架，源代码下载引用，cdm引用
new Vue({el:,data:,})
-
插值语法
- 字符串，数字，布尔，数组，对象，标签
- 三目运算符
条件?符合条件:不符合条件
-
指令系统
- 文本指令：
v-text，v-html，v-show，v-if - 事件指令：
v-on:事件名='函数'- 简写：@click='函数'
- 函数传参
- 属性指令：
v-bind:属性名='变量'- 简写：:属性名='变量'
- 文本指令：
今日学习内容
一、style和class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.red{
background-color: red;
}
.yellow{background-color: yellow}
.green{background-color: green}
.size{
font-size: 40px;
}
</style>
</head>
<body>
<div id="app">
style和class
<h1>class的使用</h1>
<div :class="classStr">
我是classObj的div
</div>
<div :class="classList">
我是classList的div
</div>
<div :class="classObj">
我是classObj的div
</div>
<h1>style的使用</h1>
<div :style="styleStr">
我是styleStr的div
</div>
<div :style="styleList">
我是styleList的div
</div>
<div :style="styleObj">
我是styleObj的div
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// class 的字符串用法
classStr:'red',
//class的数组写法，因为类本身可以放多个，用数组最合适
classList:['red'],
//class的对象
classObj:{red:true, size:false},
//style的字符串写法，以后不好改
styleStr:'background-color: green; font-size:100px',
//style的数组写法
//styleList:[{'background-color': 'green'}, {'font-size': '80px'}]
styleList:[{backgroundColor: 'green'}, {fontSize: '80px'}],
//style的对象写法
styleObj:{backgroundColor: 'blue', fontSize: '150px'},
}
})
</script>
</html>
注意
如果属性是有“-”则必须以字符串形式。如果属性是单个单词没有“-”，则可以不用字符串形式。针对有“-”我们可以采用驼峰命名的方式就不用以字符串形式了。
效果
.
.
.
二、条件渲染
写在标签上，控制标签的显示与不显示
v-if='布尔值/运算完是布尔值'
v-else-if='布尔值/运算完是布尔值'
v-else
body代码
<div id="app">
<h1>条件渲染</h1>
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80 && score<90">良好</div>
<div v-else-if="score>=60 || score<80">及格</div>
<div v-else>不及格</div>
</div>
script代码
var vm = new Vue({
el: '#app',
data: {
score: 98
}
})
注意
python 中的and or 在这里是不适用的。
只能用 && 或者 || 表示 and
三、列表渲染
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="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<button @click="handleClick" class="btn btn-info" style="margin-top: 20px">加载购物车</button>
<div v-if="goodList.length>0" style="margin-top: 20px">
<table class="table table-bordered">
<thead>
<tr>
<th>商品id</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goodList" :key="good.id">
<td>{{good.id}}</td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
</tr>
</tbody>
</table>
</div>
<div v-else class="text-center" style="font-size: 20px; margin-top: 20px">购物车空空如也~~~</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
goodList: []
},
methods: {
handleClick(){
// 假设去后端加载数据
this.goodList = [
{id: 1, name: '小汽车', price: '29999元', count: 1},
{id: 2, name: '钢笔', price: '9元', count: 2},
{id: 3, name: '铅笔', price: '4元', count: 10},
{id: 4, name: '苹果', price: '2元', count: 3},
]
}
}
})
</script>
</html>
1. v-for 循环（数组、字符串、数字、对象）
v-for="a in obj"
1.如果是数组：a就是数组的一个个元素
2.如果是数字：a就是从1开始的一个个数字
3.如果是字符串：a就是一个个字符
4.如果是对象：a就是一个个value值
v-for="(a,b) in obj"
1.如果是数组：a就是数组一个个元素，b就是索引
2.如果是数字：a就是从1开始的一个个数字，b就是索引
3.如果是字符串：a就是一个个字符，b就是索引
4.如果是对象：a就是一个个value值，b就是一个个key值
注意
每次循环的标签上，一般都会带一个属性 :key='值必须唯一'
eg: :key='循环的每个对象.id'
作用：'为了加速虚拟dom的替换'
2.数组的检测与更新
body代码
<div id="app">
<h1>数组的检测与更新</h1>
<button @click="handleClick">点我追加惊喜</button>
<hr>
<button @click="handleClick1">点我追加一批惊喜</button>
<hr>
<button @click="handleClick4">点我修改数组页面变化</button>
<hr>
<p v-for="girl in girls">{{girl}}</p>
<h1>对象的检测与更新</h1>
<button @click="handleClick2">点我追加美食</button>
<hr>
<button @click="handleClick3">点我追加美食---解决方案</button>
<hr>
<p v-for="(value, key) in obj">Key:{{key}}------Value:{{value}}</p>
</div>
script代码
var vm = new Vue({
el: '#app',
data: {
girls:['刘亦菲', '刘诗诗', '肖战', '于文文', '王一博'],
obj:{'name':'517花甲粉丝', 'num': 222},
},
methods: {
handleClick() {
this.girls.push('肖战')
},
handleClick1() {
var a = this.girls.concat(['于文文', '薛凯琪', 'Ella'])
console.log(a)
},
handleClick2() {
this.obj.price = '180' // 监控不到变化
console.log(this.obj)
},
handleClick3() {
Vue.set(this.obj,'price',18) // 监控到变化了
},
handleClick4(){
Vue.set(this.girls,0,'晨哥')
}
}
})
四、双向数据绑定
input标签，v-model：数据双向绑定
使用 属性指令绑定 :value='变量' 是数据的单向绑定
使用 v-model="name" ：数据双向绑定
body代码
<div id="app">
<h1>数据双向绑定</h1>
<p>用户名: <input type="text" v-model="name"></p>
<p>密码: <input type="password" v-model="password"></p>
<button @click="handleSubmit">提交</button> <span v-if="" style="color: red">{{err}}</span>
</div>
script代码
var vm = new Vue({
el: '#app',
data: {
name: '',
password: '',
err:''
},
methods: {
handleSubmit() {
console.log(this.name, this.password)
this.err='用户名密码错误'
}
}
})
五、事件处理
事件绑定 v-on:事件名='函数'---》@事件名='函数'
input 标签也有很多事件
1.blur:失去焦点
2.change：发生变化触发
3.input：输入触发
body代码
<h1>input 的事件处理</h1>
<h2>blur</h2>
<p><input type="text" v-model="name1" @blur="handleBlur">----->{{name1}}</p>
<h2>change</h2>
<p><input type="text" v-model="name2" @change="handleChange">----->{{name2}}</p>
<h2>input</h2>
<p><input type="text" v-model="name3" @input="handleInput">----->{{name3}}</p>
script代码
var vm = new Vue({
el: '#app',
data: {
name1: '',
name2: '',
name3: ''
},
methods: {
handleBlur() {
console.log('失去焦点了，触发了blur事件', this.name1)
},
handleChange() {
console.log('前后发生变化，触发了change事件', this.name2)
},
handleInput() {
console.log('输入了内容，触发了input事件', this.name3)
}
}
})
1.过滤案列
body代码
<div id="app">
<h1>过滤案例</h1>
<p><input type="text" v-model="search" placeholder="请输入要搜索的内容" @input="handleSearch"></p>
<ul>
<li v-for="item in newdataList">{{item}}</li>
</ul>
</div>
script代码
var vm = new Vue({
el: '#app',
data: {
search:'',
dataList:['肖战','肖战和王一博', '王一博', '王一博喜欢肖战吗？', '博君一肖是真的', '肖战玉骨遥', '王一博风起洛阳'],
newdataList:['肖战','肖战和王一博', '王一博', '王一博喜欢肖战吗？', '博君一肖是真的', '肖战玉骨遥', '王一博风起洛阳'],
},
methods: {
handleSearch() {
console.log('搜索的内容是：', this.search)
// var _this=this
// 复杂写法
// this.dataList=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 = ['肖战','肖战和王一博', '王一博', '王一博喜欢肖战吗？', '博君一肖是真的', '肖战玉骨遥', '王一博风起洛阳']
// filter数组内置的，需要传一个匿名函数，接受一个参数，会循环的从数组中取出值，传入匿名函数，执行
// 匿名函数返回true或false，如果返回true，该值保留，如果返回false该值丢弃
l = l.filter(function (item){
console.log('进来一个值：', item)
return false
})
console.log(l)
2.判断子字符串是否在字符串中
var s = 'xxaxxx'
var a = 'a'
console.log(s.indexOf(a)>=0)
3.es6模板字符串 `` 对象写法 箭头函数
1.匿名函数
var f = function(){
console.log('打印了')
}
2.不带参数的箭头函数
var f = () =>{
console.log('打印了')
}
3.带一个参数，没有返回值的箭头函数
var f = name =>{
console.log('打印了', name)
}
4.多个参数，没有返回值
var f = (name, age) =>{
console.log('打印了', name, age)
}
5.带一个参数，有返回值，函数体代码只有一行的话就可简写，多行就不要简写了。
var f = name =>{
return name + 'nb'
}
var f = name => name + 'nb'
有什么用?1.简洁 2.箭头函数没有自己的this，会用上一层的this
箭头函数和匿名函数this区别
无外部Vue类实例化对象:
var f = function () {
console.log('匿名函数的this', this)
}
var f1 = () => {
console.log('箭头函数的this', this)
}
f()
f1()
'结果都是windows对象，因为他们上一层对象是windows'
.
var obj = {
f: function () {
console.log('匿名函数的this', this)
},
f1: () => {
console.log('箭头函数的this', this)
}
}
obj.f()
obj.f1()
'结果一个匿名函数是当前对象的this，二箭头函数没有自己的this，只能往外层找，外层没有，就找windows对象的this'
2.事件修饰符
1. .stop 只处理自己的事件，不向父控件冒泡，在子控件上处理。
2. .self 只处理自己的事件，子控件冒泡的事件不处理，在父控件上处理。
4. .prevent 阻止a链接的跳转
5. .once 事件只会触发异常（使用于抽奖页面）
body代码
<div id="app">
<h1>事件修饰符</h1>
<h2>事件冒泡--通过 事件修饰符 stop ，加在子控件上，阻止事件冒泡</h2>
<ul @click="handleUl">
<li @click.stop="handleMn">美女</li>
<li @click="handleSg">帅哥</li>
</ul>
<h2>事件冒泡--通过 事件修饰符 self加在父控件上，只处理自己的事件</h2>
<ul @click.self="handleUl">
<li @click="handleMn">美女</li>
<li @click="handleSg">帅哥</li>
</ul>
<h3>阻止a标签跳转</h3>
<a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
<h4>once只执行一次</h4>
<button @click.once="handleOnce">点我秒杀</button>
</div>
script代码
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleUl() {
console.log('ul被点了')
},
handleMn() {
console.log('美女被点了')
},
handleSg() {
console.log('帅哥被点了')
},
handleA() {
console.log('a被点了')
},
handleOnce() {
console.log('恭喜你，秒到了')
}
}
})
3.按键修饰符
body代码
<div id="app">
<input type="text" v-model="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">
</div>
script代码
var vm = new Vue({
el: '#app',
data: {
search: ''
},
methods: {
handleUp(event) {
console.log('回车键被按了')
// if (event.code == 'Enter') {
// console.log('回车键被案例', event)
// }
}
}
})
注意
如果在:keyup后面不加enter的话就要从浏览器页面中code中判断用户是否按了回车键。加了，就不用再做判断。