VUE初识
目录
插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/vue.js"></script>
</head>
<body>
<div id="app">
{{name}}}
{{age}}
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
name:'lqz',
age:19
}
})
</script>
</html>
# 插值语法中可以
-变量,对象取值,数值取值
-简单的js语法
-函数()
# 插值不能在标签的属性上,只能写在标签内部
<div id="app">
<p>名字:{{name}}</p>
<p>年龄:{{age}}</p>
<p>爱好:{{hobby}}---第一个爱好:{{hobby[1]}}</p>
<p>妻子:{{wife}}---妻子的年龄:{{wife.age}}---{{wife.['age']}}</p>
<p>运算:{{10*2+3*4}}</p>
<p>三目运算符【条件?'符合了':'不符合了'】:{{10>90?'大于':'小于'}}</p>
<p>标签（默认不会渲染成标签）:{{a_url}}</p>
<p>函数()</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'lqz',
age: 19,
hobby: ['篮球', '足球', '乒乓球'],
wife: {name: '刘亦菲', age: 38},
// 运算
a_url: '<a href="http://www.baidu.com">点我看美女</a>'
// 三目运算符 三元表达式
}
})
</script>
文本指令
指令系统
v-xx 写在标签上,任意标签
-v-xx="" ---》原来插值语法中能写的,它都能写，不加{{}}
# 指令系统:vue提供的 都v-xx 写在标签属性上的,统称为指令,例如a_url必须是data中定义的变量
<p v-text="a_url"></p>
# v-text直接把字符串内容渲染在标签内部,等同于
<p v-text="a_url"></p>
<p>{{a_url}}</p>
# v-html把字符串的内容渲染成标签,写在标签内部
<p v-html="a_url"></p>
# v-show 等于布尔值，该标签是否显示,样式控制显示不显示:style="display: none;"
# v-if 等于布尔值，该标签是否显示,整个标签直接删除，效率低,在dom中删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>v-text</h2>
<p v-text="a_url"></p>
<h2>v-html</h2>
<p v-html="a_url"></p>
<h2>v-show</h2>
<img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt="" v-show="show" width="200px" height="200px">
<h2>v-if</h2>
<div v-if="show_if">
<img src="https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg" alt="" width="200px" height="200px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
a_url: '<a href="http://www.baidu.com">点我看美女</a>',
show: true,
show_if:true
}
})
</script>
</html>
属性指令
# 标签上的属性可以绑定变量,以后变量变化，属性的值跟着变化
-href
-src
-name
-class
-style
-height
# 语法
v-bing:属性名="变量名"
# 可以简写成,以后都用简写
:属性名='变量名'
事件指令
事件指令是:点击事件，双击事件，滑动事件。。。用的最多的点击事件click
v-on:事件名="函数"
<button v-on:click="handleClick">点我看美女</button>
函数必须写在methods的配置项中
methods:{
'handleClick':function (){
// alert('美女')
console.log(this) // this 就是当前vue实例，就是vm实例
this.show=!this.show
},
}
-点击button就会触发绑定函数（handleClick）的执行
# 可以简写成,以后都用简写
@事件名="函数"
# 小案例:点击按钮,随机切换美女图片
-1 methods配置项中写成 这种形式 es6的对象写法
handleClick() {}
如果函数中再套函数，如何内部不是箭头函数，this指向有问题，需要在外部定义一下
var _this = this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="handleClick">点我看美女</button>
<div>
<img :src="url" alt="" width="600px"
height="600px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
url_list: [
'https://img.lesmao.vip/k/1178/T/XIAOYU/951/951_001_dj7_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_001_k4r_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_004_g66_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6165/6165_001_gwy_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XIAOYU/948/948_020_xcx_3600_5400.jpg',
]
},
methods: {
// 'handleClick': function () {
// // var i = Math.round(Math.random() * (this.url_list.length - 1))
// // this.url = this.url_list[i]
// // console.log(i)
// var _this=this
// setInterval(function () {
// console.log(_this)
// var i = Math.round(Math.random() * (_this.url_list.length - 1))
// _this.url = _this.url_list[i]
// console.log(i)
// }, 1000)
// },
// 简写成
handleClick() {
var _this = this //
setInterval(function () {
console.log(_this)
var i = Math.round(Math.random() * (_this.url_list.length - 1))
_this.url = _this.url_list[i]
console.log(i)
}, 1000)
},
}
})
// es 6 的对象写法
var hobby = ['篮球', '足球']
var f = function (a, b) {
console.log('匿名函数')
console.log(a + b)
}
// var d={'name':"lqz",age:19,'hobby':hobby}
// var d={'name':"lqz",age:19,hobby:hobby}
// var d = {'name': "lqz", age: 19, hobby} // es6 的简写形式
// var d = {'name': "lqz", age: 19, f} // es6 的简写形式
var d = {'name': "lqz", age: 19, handleClick(){
console.log('xxxxx')
}} // es6 的简写形式
console.log(d)
d.handleClick()
</script>
</html>
class和style
# 本身他俩都是属性指令,但是他们比较特殊,应用更广泛,单独再讲
# class:推荐用数组
:class="变量"
变量可以是字符串,数组,对象
# style:推荐用对象
:style="变量"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.font {
font-size: 60px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.font-color {
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<h1>clss</h1>
<div :class="class_obj">我是div</div>
<h1>style</h1>
<div :style="style_obj">我是style-----div</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// class_str:'font',
// class_list:['font'], # 推荐
class_obj: {font: true, green: false, 'font-color': false},
style_str: 'color: green;font-size:80px',
// style_list: [{color:'yellow'}, {'font-size':'90px'}],
style_list: [{color: 'yellow'}, {fontSize: '90px'}], // 可以用驼峰
style_obj: {color: 'yellow', fontSize: '80px'}
// style_obj: {color: 'yellow', 'font-size': '80px'}
},
})
</script>
</html>
条件渲染
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>
</style>
</head>
<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>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 99
},
})
</script>
</html>
列表渲染
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-lg-offset-3">
<div class="text-center">
<h1>v-if+v-for 显示购物车</h1>
<button @click="handClick" class="btn btn-danger">点我显示</button>
</div>
<div v-if="show">
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>商品名</th>
<th>商品价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
show:false,
good_list:[
{id: 1, name: '钢笔', price: '29'},
{id: 2, name: '铅笔', price: '29'},
{id: 3, name: '文具盒', price: '298'},
{id: 4, name: '彩笔', price: '298'}
]
},
methods:{
handClick(){
this.show=!this.show
}
}
})
</script>
v-for可以循环的变量
<div id="app">
<h1>v-for可以循环什么?</h1>
<h2>循环数组</h2>
<span v-for="item in l ">{{item}}}</span>
<h2>循环数组带索引</h2>
<span v-for="(item,index) in l ">索引是：{{index}},值是:{{item}}</span>
<h2>循环对象,默认是value</h2>
<div v-for="item in info">{{item}}</div>
<h2>循环对象:值和key一起</h2>
<div v-for="(item,key) in info">键是:{{key}},值是{{item}}</div>
<h2>循环字符串</h2>
<div v-for="item in s">
<p v-if="item!=' '">{{item}}</p>
<br v-else>
</div>
<h2>循环字符串带索引</h2>
<div v-for="(item,index) in s">
<p v-if="item!=' '">{{item}}---->索引是：{{index}}</p>
<br v-else>
</div>
<h2>循环数字</h2>
<div v-for="item in 8">{{item}}</div>
<h2>循环数字-带索引</h2>
<div v-for="(item,index) in 8">{{item}}----索引是：{{index}}</div>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
l:[1,2,3],
info:{name:"lqz",age:19},
s:'hello world'
}
})
</script>
总结:可以循环的有:
1.数组
2.对象
3.字符串
4.数字
js的循环方式
//1 js 的循环 基于索引的循环 python 没有基于索引的循环，python都是基于迭代的循环
// var a = [4, 5, 6, 7]
// for(i=0;i<10;i++){
// for (i = 0; i < a.length; i++) {
// // console.log(i)
// console.log(a[i])
// }
// 2 js 的in 循环 拿到的是索引 跟vue的v-for区分
// var a = [4, 5, 6, 7]
// for (i in a) {
// // console.log(i)
// console.log(a[i])
// }
// 3 es 6语法 of 循环
// var a = [4, 5, 6, 7]
// for (item of a) {
// console.log(item)
// }
// 4 数组的方法，forEach可以循环
// var a = [4, 5, 6, 7]
// a.forEach(function (item) {
// console.log('----',item)
// })
// 5 jq 的循环 循环数组，对象
var a = [4, 5, 6, 7]
$.each(a, function (index, item) {
console.log(index)
console.log(item)
})
key值的解释
vue的v-for写在标签上,在标签上加一个key,用属性指令绑定一个变量,key的值每次都不一样,这样可以加速虚拟dom的替换,从而提高循环效率,key值必须唯一
<div v-for="item in 8" :key="item">{{item}}</div>
# 尽量写上
数字,对象的检测与更新
对象,新增一个key-value,发现页面没有变化,以后用 vue.set(this.info,'hobby','篮球')
设置一下即可
<body>
<div id="app">
<h1>循环对象</h1>
<div v-for="(value,key) in info">
<h3>key值是:{{key}}</h3>
<h2>value是{{value}}</h2>
</div>
<button @click="handleAdd">点我加数据</button>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
info:{name:'lqz',age:19},
},
methods:{handleAdd(){
// 页面会变化
// this.info['name'] = '彭于晏'
// 页面不会变化,单是值有了
// this.info['hobby'] = ['篮球']
//遇到数据变了,页面没变,都是用
Vue.set(this.info,'hobby','篮球')
}
}
})
</script>
input事件
input的事件：
click 点击的时候触发
change 当元素的值发生改变时触发
blur 当输入框失去焦点的时候,触发的事件
focus 当获得焦点触发事件
<body>
<div id="app">
<h1>点击事件</h1>
<input type="text" @click="handClick">
<h1>失去焦点</h1>
<input type="text" @blur="handBlur">
<h1>input事件,只要输入,就会触发</h1>
<input type="text" @input="handInput">
<h1>change事件</h1>
<input type="text" @change="handChange">
<h1>focus事件</h1>
<input type="text" @focus="handFocus">
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
info:{name:'lqz',age:19},
},
methods:{handClick(){
console.log('我被点击了')
},
handBlur(){
console.log('失去焦点')
},
handInput(){
console.log('正在输入')
},
handChange(){
console.log('变了变了')
},
handFocus(){
console.log('获得焦点')
}
}
})
</script>
v-model双向数据绑定
input 可以输入值,输入后,就会js变量拿到,如果使用:value='变量'这种形式,页面中输入框变化,变量不会变,使用v-model做双向数据绑定
<div id="app">
<h1>单向数据绑定</h1>
<input type="text" :value="name">-----{{name}}---单向数据绑定
<h1>双向数据绑定</h1>
<input type="text" v-model="name">-----{{name}}
</div>
</body>
<script>
var vm= new Vue({
el:'#app',
data:{name:'lqz',age:18}
})
</script>
过滤案例
<div class="app">
<h1>过滤案例</h1>
<p>请输入要搜索的内容: <input type="text" v-model="myText" @input="handInput"></p>
</div>
</body>
<script>
var vm = Vue({
el: '.app',
data: {
myText: '',
dateList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
newdateList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
},
methods: {
handInput() {
// this.newdateList = this.dateList.filter(item=>{
// // 判断item在不在mytext中
// if (item.myText.indexOf(item)>=0){
// return true}
// else
// {return false}
// 上面5行,简写成
// return item.indexOf(this.myText)>=0
this.newdateList = this.dateList.filter(
item => item.indexOf(this.myText) >= 0
)
}
}
})
// 补充1:数组的过滤方法
// var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// var newdataList = dataList.filter(function (item){
// return false //return true标识这个值保留，false标识这个值不要
// })
//补充2:字符串的index()方法,判断子字符串是否在当前字符串中,如果返回的是索引,如果不是返回-1
// var s='lqz is handsome'
// var s1='qqq'
// var i =s.indexOf(s1)
// console.log(i) // -1 不在索引中,所以大于等于0就是在索引中
// 补充3 ：es6 的箭头函数写法---》函数中套函数，this指向有问题，有了箭头函数，箭头函数没有自己的this，用的都是上一级的this
// 1 无参函数,无返回值箭头函数
// var f = () => {
// console.log('函数')
// }
// 2 有参函数,没有返回值的箭头函数,括号可以去掉,可以加
// var f = item => {
// console.log(item)
// }
// 3 有多个参数,没有返回值的箭头函数,括号不能去掉
// var f= (item,key)=>{
// console.log(item,key)
// }
// 4 有一个参数,一个返回值
// var f=(item)=>{
// return item+'lqz'
// }
// var f=item=>item+'lqz'
// var res=f('lqz')
// console.log(res)
</script>
事件修饰符（了解）
| 事件修饰符 | 释义 |
|---|---|
| .stop | 只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡） |
| .self | 只处理自己的事件，子控件冒泡的事件不处理 |
| .prevent | 阻止a链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
学过事件:click,change,input
修饰click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<h1>事件修饰符stop，子控件不再冒泡给父控件</h1>
<ul @click='handleUl'>
<li @click.stop="handleLi">第一</li>
<li>第二</li>
</ul>
<h1>事件修饰符self:只处理自己的事件，子控件的冒泡，不处理</h1>
<ul @click.self='handleUl'>
<li @click="handleLi">第一</li>
<li>第二</li>
</ul>
<h1>prevent阻止a的跳转</h1>
<a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
<h1>once 只响应一次</h1>
<button @click.once="handleClick">点我抽奖</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {},
methods: {
handleLi() {
console.log('li被点击了')
},
handleUl() {
console.log('ul被点击了')
},
handleA() {
console.log('a标签被点了')
// 阻止a的跳转，自己决定要不要跳
// 手动指定跳
location.href = 'http://www.cnblogs.com'
},
handleClick() {
console.log('我被点了')
}
}
})
</script>
</html>
按键修饰符
# 按键事件:按了键盘某个键,就会触发函数的执行
@keyup = "handleKeyUp"
# 按键修饰符:只有某个按键被按下才触发
@keyup.enter
@keyup.13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<!-- <input type="text" v-model="text" @keyup="handleKeyUp">-–>{{text}}-->
<!-- <input type="text" v-model="text" @keyup.13="handleKeyUp2">-–>{{text}}-->
<input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">--->{{text}}
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
text: ''
},
methods: {
handleKeyUp(event) {
// console.log('按键被按下了')
// keyCode 对照表https://blog.csdn.net/zqian1994/article/details/109486445
// console.log('按钮被按下了：', event.key, event.keyCode)
if (event.keyCode == 13) {
console.log('开始跟后端交换搜索了')
}
},
handleKeyUp2(a, event) {
console.log(event)
console.log('enter被按了')
}
}
})
</script>
</html>
表单控制
input ---》变量类型是什么？
text 类型
radio:单选
checkbox:单选和多选
<body>
<div id="app">
<p>用户名: <input type="text" v-model="username"> </p>
<p>密码: <input type="password" v-model="password"> </p>
<p>性别:
男<input type="radio" v-model="gender" value="1">
女<input type="radio" v-model="gender" value="2">
</p>
<p>
记住密码: <input type="checkbox" v-model="remember">
</p>
<p>
篮球: <input type="checkbox" v-model="hobby" value="篮球">
足球: <input type="checkbox" v-model="hobby" value="足球">
排球: <input type="checkbox" v-model="hobby" value="排球">
</p>
<button @click="handClick">提交</button>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
username:'',
password:'',
gender:'', // radio单选,多个radio绑定同一个变量,选中某个，就对应value值
remember:false, //checkbox 单选是true或者false
hobby:[] // checkbox 多选是数组类型,必须一开始定义就是数组,多个checkbox绑定一个变量
},
methods:{
handClick(){
console.log(this.username,this.password,this.gender,this.remember,this.hobby)
}
}
})
</script>
补充
# python的海象运算符 Pyhton 3.9
a:=10
