插值语法
mvm演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{name}}</p>
</div>
<script>
var vm = new Vue({
el: '#app', //vue管理了这个div，以后在div中可以写vue的语法了
data: {// data中定义的变量，以后直接从vm实例直接可以拿到
name: 'jason',
age: 18
}
})
</script>
</body>
</html>
插值语法
# 插值语法可以放
-变量， 对象取值， 数组取值
<p>名字:{{name}}</p>
<p>年龄:{{age}}</p>
<p>爱好:{{hobby}}----->第一个爱好：{{hobby[1]}}</p>
<p>妻子:{{wife}}----》妻子的年龄:{{wife.age}}---{{wife['age']}}</p>
-简单的js语法（运算，三目运算）
<p>运算:{{10*2+3*4}}</p>
<p>三目运算符【条件?'符合了':'不符合了'】:{{10>90?'大于':'小于'}}</p>
-函数()
# 插值不能写在标签的属性上，只能写在标签内部
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<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>
</html>
文本指令
| 指令 | 释义 |
|---|---|
| v-html | 让HTML渲染页面 |
| v-text | 标签内容显示js变量对应的值 |
| v-show | 放1个布尔值：为真标签就显示；为假 标签就不显示 |
| v-if | 放1个布尔值：为真标签就显示；为假 标签就不显示 |
-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中删除标签
v-html:让HTML渲染成页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-html="link1"></li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#box', // 在box这个div中可以写 vue的语法
data: {
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
}
})
</script>
</html>
v-text:标签内容显示js变量对应的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-text="link1"></li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#box', // 在box这个div中可以写 vue的语法
data: {
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
}
})
</script>
</html>
v-show:显示/隐藏内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<h3>案例：控件通过按钮来控制显示和小事</h3>
<button @click="handleClick()">点我</button>
<br>
<div v-show="isShow">isShow</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
isShow: true,
},
methods: {
handleClick(){
this.isShow = !this.isShow // this指的是当前的vue对象
},
}
})
</script>
</html>
v-if：显示/删除内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<h3>案例：控件通过按钮来控制显示和消失</h3>
<button @click="handleClick()">点我</button>
<br>
<div v-if="isCreated">isCreated</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
isCreated:true
},
methods: {
handleClick(){
this.isCreated = !this.isCreated // this指的是当前的vue对象
},
}
})
</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">
<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>
属性指令
| 指令 | 释义 |
|---|---|
| v-bind | 直接写js的变量或语法（不推荐） |
| ： | 直接写js的变量或者语法（推荐） |
# 标签上的属性可以绑定变量，以后变量变化，属性的值跟着变化
-href -src -name -class -style -height ......
# 语法
v-bind:属性名 = '变量名'
# 可以简写成，以后都用简写
:属性名="变量名"
例如：
v-bind:href='js变量'可以缩写成：:href='js变量'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a :href="a_url">点击有惊喜</a>
<br>
<img :src="photo" alt="" :width="w" :height="h">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
a_url: "http://www.baidu.com",
photo: "https://img1.baidu.com/it/u=1570067586,2520295434&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
h: '200px',
w: '200px'
}
})
</script>
</html>
事件指令
| 指令 | 释义 |
|---|---|
| v-on | 触发事件（不推荐） |
| @ | 触发事件（推荐） |
| @[event] | 触发event事件（可以是其他任意事件） |
# 事件指令是：点击事件，双击事件，滑动事件。。。用的最多的是点击事件click
v-on:事件名='函数'
<button @click="handleClick">庄姐合集</button>
函数必须写在methods的配置项中
methods:{
'handleClick':function () {
this.show=!this.show //this 就是当前的vue实例
}，
}
-点击button就会接触发绑定函数(handleClick)的执行
# 可以简写成，以后都用简写
@事件名='函数'
案例：点击按钮，随机切换图片
<!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='变量'
变量可以是字符串，数组，对象
字符串
元组
对象
style
字符串
数组
对象
条件渲染
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>
</head>
<body>
<div id="app">
<p v-if="score > 89 && score<100">优秀</p>
<p v-else-if="score > 79 && score<90">良好</p>
<p v-else-if="score > 59&& score<80">及格</p>
<p v-else>不及格</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
score: 99,
}
})
</script>
</html>
列表渲染
就是用vue写for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<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">
<h3>商品列表</h3>
<button class="btn btn-primary" @click="he_click">点击显示</button>
<table v-show="v_show" class="table-striped table-hover table">
<thead>
<tr>
<th>编号</th>
<th>商品名称</th>
<th>商品价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in goods_list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
v_show: false,
goods_list: [
{"id": 1, "name": "苹果", "price": 12},
{"id": 2, "name": "栗子", "price": 13},
{"id": 3, "name": "香蕉", "price": 14},
{"id": 4, "name": "哈密瓜", "price": 15},
]
},
methods: {
he_click(){
this.v_show = !this.v_show
}
}
})
</script>
</html>
