vue 插值语法、文本指令、属性指令、事件指令、class和style、条件渲染、列表渲染
vue
vue介绍
vue 是一套用于构建用户界面的渐进式框架 js框架
M-V-VM 架构思想 MVC MTV MVVC MVP移动端
-M：model 数据层 js的数据
-V：View 视图层 html，css
-VM：ViewModel vue做出来介于M和V之间的一层 以后不需要手动进行dom操作了
作用：以后页面变 js变量就变 js变量变 页面就变
组件化开发、单页面开发
组件化开发 以后都是写出一个个组件 组件的组合成页面
单页面开发：一个html页面
版本
1.x:使用的较少
2.x：普遍使用
3.x：新项目可能会使用 语法上有差异 但是vue3完全兼容vue2
vue写法
在html中引入 写vue语法
<script>
var vm = new Vue({
el: '#app',
data:{
}
})
</script>
#固定写法
插值语法
1.M-V-VM演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script></script>
</head>
<body>
<div id="app">
<p>{{name}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data:{
name:'joyce'
}
})
</script>
</html>
2.插值语法
#用法：
在html标签中插入{{变量名}} 可以直接读取到data中的所有数据
#插值语法中可以放
变量 --- 对象取值，数组取值
简单的js语法
函数（）
#插值语法不能写在标签的属性上 只能写在标签内部
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script></script>
</head>
<body>
<div id="app">
<p>姓名：{{name}}</p>
<p>年龄：{{age}}</p>
<p>爱好：{{hobby[0]}}</p>#数组可以用索引取值
<p>朋友：{{friend.name}}</p>#或{{friend['name']}} 字典用对象取值 也可以直接点
<p>网址：{{url}}</p> #默认不会渲染成标签
<p>三目运算符：{{1>2?'成立':'不成立'}}</p>#？成立执行：后面的 不成立执行？后面的
</div>
</body>
<a href=""></a>
<script>
var vm = new Vue({
el: '#app',
data:{
name:'akLian',
age:23,
hobby:['game','eat','sleep'],
friend:{name:'joyce',age:24},
url:'<a href="http://www.baidu.com">点我</a>'
//三目运算符 --- python叫三元表达式
}
})
</script>
</html>
文本指令
#指令系统 v-xxx
vue提供的 都是以 v-开头 写在标签属性上的 统称为指令 例如<p v-text="url"></p> 其中"url"必须是data中定义的变量
v-text
#直接把字符串内容渲染在标签内部 (普通字符串)通过转义字符转成了文本
<p v-text="url"></p>
等同于
<p>{{url}}</p>c
v-html
#v-html会将其当html标签解析后输出（标签）
<p v-html="url"></p>
v-show
#等于布尔值 该标签事否显示 样式控制显示不显示
<p v-show=false>{{name}}</p>
<p style="display: none;">akLian</p>
#v-show=false时 隐藏
<p v-show=true>{{name}}</p>
#v-show=true时 正常显示
v-if
#等于布尔值 该标签是否显示 整个标签都删除 效率低 在dom中删除标签
<p v-if=true>{{name}}</p>
<p v-if=false>{{name}}</p>
属性指令
#标签上的属性可以绑定变量 以后变量变化 属性的值跟着变化
#语法：
v-bind:属性名="变量名"
<img v-bind:src="photo" alt="">
#简写：
:属性名-'变量名'
事件指令
#事件指令是：点击事件、双击事件等等.....网页click用的最多
v-on:click（事件名） = '函数'
<button v-on:click="click"></button>
#函数必须写在methods的配置项中
<script>
var vm = new Vue({
el: '#app',
data:{
show:true,
},
methods:{
'click':function () {
this.show =! this.show //取反
}
}
})
</script>
#点击button就会触发绑定函数（click）的执行
#可以简写成 @click（事件名）='函数'
小案例：点击按钮，随即切换美女图片
#methods配置项中携程这种形式
handleClick（）{}
如果函数中再套函数 如果内部不是箭头函数 this指向有问题 需要在外部定义一下
var _this = this
代码：
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'https://img2.baidu.com/it/u=1604119766,3957090543&fm=253&fmt=auto&app=138&f=JPEG?w=546&h=500',
url_list: [
'https://img2.baidu.com/it/u=1166303631,1917184457&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=494',
'https://img2.baidu.com/it/u=2229888682,2986344751&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625',
'https://img2.baidu.com/it/u=382417669,3760900398&fm=253&fmt=auto&app=138&f=JPEG?w=211&h=308',
'https://img2.baidu.com/it/u=1835608370,987682292&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=360',
]
},
methods: {
'handleClick': function () {
var i = Math.round(Math.random() * (_this.url_list.length - 1))//随机生成一个数组里面个数的数 从0开始 所以数组长度-1
_this.url = _this.url_list[i]
}
}
})
</script>
案例2：自动变换图片setInterval(function () {},1000)1000=1秒
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'https://img2.baidu.com/it/u=1604119766,3957090543&fm=253&fmt=auto&app=138&f=JPEG?w=546&h=500',
url_list: [
'https://img2.baidu.com/it/u=1166303631,1917184457&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=494',
'https://img2.baidu.com/it/u=2229888682,2986344751&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625',
'https://img2.baidu.com/it/u=382417669,3760900398&fm=253&fmt=auto&app=138&f=JPEG?w=211&h=308',
'https://img2.baidu.com/it/u=1835608370,987682292&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=360',
]
},
methods: {
'handleClick': function () {
var _this = this
setInterval(function () {
var i = Math.round(Math.random() * (_this.url_list.length - 1))
_this.url = _this.url_list[i]
}, 100)
}
}
})
</script>
es6对象写法
// 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()
class和style
# 本身他俩都是属性指令，但是他们比较特殊，应用更广泛，单独再讲
# class：推荐用数组
:class='变量'
变量可以是字符串，数组，对象
<style>
.font{
font-size: 50px;
}
.red{
background-color: blue;
}
.colour{
color: hotpink;
}
</style>
</head>
<body>
<div id="app" >
<h1 :class="class_obj">哈哈哈哈</h1>
</div>
</body>
class_str:'red'
class_list:['red'] #推荐使用
class_obj:{"font":true,red:true}
# style：推荐用对象
:style='变量'
变量可以是字符串，数组，对象
<h1 :style="style_obj">hahah </h1>
style_str:'color:red'
style_list:[{color:'green'}]
style_obj:{color:'yellow'}
# 数组的方法：很多，自己学
条件渲染
# v-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
# v-else-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
# v-else 放在标签上，上面条件都不成立，显示这个标签
代码：
</head>
<body>
<div id="app" >
<div v-if="a>=80">优秀</div>
<div v-else-if="a>=60&&a>=80">良好</div>
<div v-else>不及格</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
a :33
}
})
列表渲染
v-for
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>购物车</h1>
<button @click="handleClick">点我</button>
<div v-if="show" >
<table class="table" class="tab-content" >
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Price</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:'物品1',price:'123元'},
{id:1,name:'物品2',price:'12元'},
{id:1,name:'物品3',price:'23元'},
{id:1,name:'物品4',price:'13元'},
]
},
methods:{
handleClick(){
this.show =! this.show
}
}
})
</script>
#想循环那个列表就在哪个上面加
