Vue基础
模板语法
被vue托管的标签中可以写 {{}} 中可以写：变量，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">
<h1>vue插值渲染变量</h1>
<p>名字：{{name}}</p>
<p>年龄：{{age}}</p>
<p>爱好：{{hobby}}</p>
<p>第0个爱好：{{hobby[0]}}</p>
<p>wife：{{wife}}</p>
<p>wife的名字：{{wife['name']}}</p>
<p>wife的年龄：{{wife.age}}</p>
<p>标签：{{a}}</p>
<h1>vue插值渲染简单表达式</h1>
<p>{{10 > 9 ? '大于' : '小于'}}</p>
<p>{{age+1}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
name: 'lqz',
age: 19,
hobby: ['篮球', '足球', '乒乓球'],
wife: {name: '刘亦菲', age: 38},
a: '<a href="http://www.baidu.com">点我</a>'
},
})
// 三目运算符----》三元表达式
// var a = 10 > 9 ? '大于' : '小于'
</script>
</html>
指令系统
写在[任意]标签上 以 v-xx 开头的，都是vue的指令
文本指令
| 指令 | 作用 |
|---|---|
| v-text | 把变量渲染到标签中，如果之前有数据，覆盖掉 |
| v-html | 如果是标签字符串，会把标签渲染到标签内 |
| v-show | 控制标签的显示与隐藏，但是它是通过style的display控制的：style="display: none;" |
| v-if | 控制标签的显示与隐藏，但是它是通过dom的增加和删除 |
-
v-show和v-if的区别
v-show：标签还在，只是不显示了（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">
<h1>文本指令 v-text</h1>
<p v-text="name">彭于晏</p>
<h1>文本指令 v-html</h1>
<span v-html="a"></span>
<h1>v-show</h1>
<img v-show='b' src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" width="300px" height="300px">
<h1>v-if</h1>
<div v-if="b1">
<a href="">点我看美女</a>
<h3>美女</h3>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
name: 'lqz',
a: '<a href="http://www.baidu.com">点我</a>',
b:true,
b1:true
},
})
</script>
</html>
事件指令
-
事件指令的用法
v-on:事件名='函数' 可以简写成 @事件名='函数'
事件指令是放在标签上的，事件名可以是click,dbclick, input标签:change,blur,input
-
事件指令的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>事件指令</h1> <button v-on:click="handleShow">点我显示消失</button> <div v-if='show'> <img src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" width="300px" height="300px"> </div> <h1>事件指令函数带参数</h1> <button @click="handleClick">函数需要参数，但是没传，默认会把event事件传入</button> <br> <button @click="handleClick1('lqz')">函数需要参数，但是传值了</button> <br> <button @click="handleClick2('lqz')">函数需要3参数，但是传了1个</button> <br> <button @click="handleClick3($event,'lqz')">函数需要2参数，一个事件，一个字符串</button> </div> </body> <script> var vm = new Vue({ el: "#app", data: { show: true, }, methods: { // handleShow: function () { // // this 就是vm对象 vm.show // this.show = !this.show // }, //es6的语法，对象写法,以后都这样写 handleShow() { // this 就是vm对象 vm.show this.show = !this.show }, // 需要一个参数，但是没有传，会把事件传入 handleClick(a) { console.log(a) alert('帅哥') }, // 需要1个，传了一个，但是需要传数字，字符串，布尔，或变量 handleClick1(name) { console.log(name) }, // 需要3个参数，传了一个，没问题，后面俩都是 undefined handleClick2(a, b, c) { console.log(a) console.log(b) console.log(c) }, handleClick3(event,name){ console.log(event) console.log(name) } } }) // es5中 // var obj={'name':'lqz','age':19} // var obj={name:'lqz',age:19} // es6中 var name = 'lqz' var age = 19 // var obj={name:name,age:age} var obj = { name, age, handleClick() { } } </script> </html>
属性指令
属性指令中的属性就是在标签中的 name，class,href,src,id 等属性
指令为 v-bind:属性名='变量' --->可以简写为 :属性名="变量"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>属性指令</h1>
<button @click="handleClick">点我看美女</button>
<br>
<img v-bind:src="url" alt="" width="300px" height="300px">
<hr>
<button @click="handleChange">点我换美女</button>
<br>
<img :src="img_url" alt="" width="300px" height="300px">
<hr>
<img :src="img_url2" alt="" width="300px" height="300px">
<hr>
<div :id="id_div">
我是div
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
url: 'https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg',
img_url: 'https://p.qqan.com/up/2022-8/202283919254843.jpg',
img_url2: 'https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg',
imgList: ['https://img2.woyaogexing.com/2022/10/23/af963193e9fb67ee!400x400.jpg',
'https://img2.woyaogexing.com/2022/10/22/95afdd5cd39d556d!400x400.jpg',
'https://img2.woyaogexing.com/2022/10/21/f06c65142fe50c19!400x400.jpg',
'https://img2.woyaogexing.com/2022/10/20/c0135f7e74050a74!400x400.jpg',
'https://img2.woyaogexing.com/2022/10/20/5972f09505ac681d!400x400.jpg'],
id_div:'xxx'
},
methods: {
handleClick() {
this.url = 'https://p.qqan.com/up/2022-8/202283919254843.jpg'
},
handleChange() {
// floor:只取整数部分
//Math.random() 生成0--1直接的数字，小数
var i = Math.floor(Math.random() * this.imgList.length)
console.log(i)
this.img_url = this.imgList[i]
}
},
mounted() {
// 页面加载完，开启一个定时器，每隔3s干函数内容，函数里面在变化变量
setInterval(() => {
var i = Math.floor(Math.random() * this.imgList.length)
this.img_url2 = this.imgList[i]
}, 1000)
}
})
</script>
</html>