模版语法
<!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> <p>渲染字符串-姓名：{{name}}</p> <p>渲染字符串-年龄：{{age}}</p> <p>渲染字数组-数组：{{list1}}</p> <p>渲染字数组-数组--按位置取值：{{list1[1]}}</p> <p>渲染字对象-个人信息：{{obj1}}</p> <p>渲染字对象-个人信息--按key取值：{{obj1.name}}</p> <p>渲染字对象-个人信息--按key取值：{{obj1['age']}}</p> <p>渲染字标签字符串(处理了xss攻击)：{{link1}}</p> <p>三目运算符(运算完的结果被渲染)：{{10 > 9 ? 1 : 2}}</p> <p>三目运算符：{{list1.length > 2 ? "大于2" : "不大于2"}}</p> <p>简单表达式：{{1+99}}</p> <p>函数返回结果渲染：{{add(1,2)}}</p> </div> </body> <script> new Vue({ el: '#app', data: { name: 'lqz', age: 99, list1: [1, 2, 3, 4], // 数组 obj1: {name: 'lqz', age: 19}, // 对象 link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>' } }) var list1 = [1, 2, 3, 4] var res = list1.length > 2 ? "大于2" : "不大于2" console.log(res) </script> </html>
文本指令
Vue的指令系统，放在标签，以 v- 开头的，每个指令都有特殊用途
v-text：把字符串内容渲染到标签内部
v-html：把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签
v-show：控制标签显示与否；通过style的display是否等于 none 控制，在html中还存在
v-if：控制标签显示与否：通过dom操作做的，这个标签从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 v-html</h1> <h2>v-text把字符串内容渲染到标签内部</h2> <h2>v-html把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签</h2> <p v-text="name"></p> <p v-text="link1"></p> <p v-html="name"></p> <hr> <h1>文本指令 v-show v-if</h1> <h2>v-show控制标签显示与否:通过style的display是否等于none控制，在html中还存在</h2> <div> <p v-show="isShow">我是p</p> </div> <h2>v-if控制标签显示与否:通过dom操作做的，这个标签从dom中删除了</h2> <span v-if="isShow2"> 我是span </span> <hr> <div> <button @click="handleShow">点我看美女</button> <br> <img src="./img/1.jpeg" alt="" height="400px" width="400px" v-if="showPhoto"> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { name: 'lqz', link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>', isShow: true, isShow2: true, showPhoto: false }, methods: { handleShow() { this.showPhoto = !this.showPhoto } } }) </script> </html>
事件指令
用 v-on 绑定事件后，只要触发事件，就会执行函数
v-on：点击事件，双击事件，滑动事件 = ‘函数’
用的最多的就是 click 事件===》单击事件
v-on：click = ‘函数’===》放在标签上，点击标签，就会触发函数执行===》函数必须写在 methods 中，可以用 es6 语法的简写
methods: {
// handleClick: function () {
// alert('美女')
// }
handleClick() { // es6 语法
alert('美女')
},
}
v-on ：可以用 @ 替换
<!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="handleClick">点我，弹美女</button> <br> <button v-on:click="handleClick1">点我，传参数,如果不传，默认第一个参数是 ：点击事件对象：PointerEvent</button> <br> <button v-on:click="handleClick1(1)">点我，传参数,传一个参数，只要传了参数，点击事件对象就不传入了</button> <br> <button v-on:click="handleClick1(1,2)">点我，传参数,传两个参数，正常使用</button> <br> <button v-on:click="handleClick1(1,2,3)">点我，传参数,传多个参数，只用前两个</button> <br> <button v-on:click="handleClick1(1,$event)">点我，传参数,第一个是数字，第二个是点击事件</button> <h1>v-on: 简写 @ </h1> <button @click="handleClick">点我，弹美女</button> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: {}, methods: { // handleClick: function () { // alert('美女') // } handleClick() { // es6 语法 alert('美女') }, handleClick1(a, b) { console.log(a, b) } } }) // es6对象写法 //var userinfo={"username":"lqz","password":"123"} //var userinfo={username:"lqz",password:"123"} // var username="lqz" // var password="123" // var userinfo={username:username,password:password} // var userinfo={username,password} // 放个变量到对象中，会一变量名作为key，值作为value // console.log(userinfo['username']) // console.log(userinfo.username) // var printName=function () { // console.log(this.username) // } var userinfo = { username: "lqz", password: "123", printName() { console.log('sxxxss') } } userinfo.printName() </script> </html>
属性指令
每个标签都会有属性，动态替换属性的值，就要用到属性指令
v-bind：属性=‘变量’===》针对所有标签的所有属性 id name
简写成 ：属性=‘变量’
：id=‘变量’
：name=‘变量’
切换图片案例===》点击就修改src属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> .red { color: rgba(248, 12, 12, 0.7); } .purple { color: rgba(27, 27, 171, 0.7); } </style> </head> <body> <div id="app"> <h1>属性指令</h1> <div> <button @click="handleClick">点我显示美女</button> <br> <button @click="handleClick1">点我变大美女</button> <br> <!-- <img v-bind:src="img_url" v-bind:height="height" v-bind:width="width">--> <img :src="img_url" :height="height" :width="width"> </div> <hr> <h1>点击按钮，切换图片</h1> <button @click="handleChange">点我换美女</button> <img :src="img_url2" height="400px" width="400px"> <h2>class属性</h2> <button @click="handleChangeClass">点我变class</button> <div :class="isActivate?'red':'purple'"> <h1>我是一个div</h1> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { img_url: '', height: '400px', width: '400px', img_url2: './img/1.jpeg', img_list: ['https://up.enterdesk.com/edpic_source/92/e5/5a/92e55afed48d470aa18c304ef0eed788.jpg', 'https://up.enterdesk.com/edpic_source/2f/50/23/2f5023cacdacdce62e2838e5630c8fa9.jpg', 'https://up.enterdesk.com/edpic_source/00/49/06/004906cdedbc2e63b8453a01574d4811.jpg', 'https://up.enterdesk.com/edpic_source/d1/c5/40/d1c5404b1a7bab59511502337c8e471e.jpg', 'https://up.enterdesk.com/edpic_source/48/f0/b7/48f0b7bd54348323afa41e4807a4123d.jpg', 'https://up.enterdesk.com/edpic_source/02/01/1b/02011b5edd76f0165e0506af409daab7.jpg'], isActivate: false }, methods: { handleClick() { this.img_url = './img/1.jpeg' }, handleClick1() { this.height = '500px' this.width = '500px' }, handleChange() { // Math.random() 0--1 之间的小数 // this.img_list.length 数组长度 3 this.img_url2 = this.img_list[Math.floor(Math.random() * this.img_list.length)] }, handleChangeClass() { this.isActivate = !this.isActivate } } }) </script> </html>
style和class
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> .big { font-size: 60px; } .back { background-color: greenyellow; } </style> </head> <body> <div id="app"> <h1>class和style:能够绑定什么类型的变量：字符串，数组，对象</h1> <h2>style绑定字符串，数组，对象</h2> <div :style="style_obj"> <button @click="handleXi">点击变细</button> <button @click="handleFont">点击字变小</button> <p>我是div内的p</p> </div> <h2>class绑定字符串，数组，对象</h2> <div :class="class_obj"> <button @click="handleClick1">点击去掉背景</button> <button @click="handleClick2">点击子变大</button> <button @click="handleClick3">点击子变小</button> <p>我是div内的p</p> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { // style是字符串类型 style_str: 'background: red;font-size: 60px;font-weight: bold', // style是数组类型 style_list: [{'background': 'red'}, {fontSize: '60px'}, {fontWeight: 'bold'}], // style:是对象类型(建议用对象) style_obj: {'background': 'red', fontSize: '60px', 'font-weight': 'bold'}, // class 是字符串类型 class_str: 'big back', // class 是数组类型--->推荐用它 class_list: ['big', 'back'], // class 是对象类型 class_obj: {big: true, back: true} }, methods: { handleXi() { //this.style_str = 'background: red;font-size: 60px' this.style_list.pop() }, handleFont() { this.style_obj.fontSize = '30px' }, handleClick1() { // this.class_str = 'big' // this.class_list.pop() this.class_list.shift() }, handleClick2() { this.class_list.push('big') }, handleClick3() { this.class_obj.big = false } } }) </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> </head> <body> <div id="app"> <h1>条件渲染</h1> <span v-if="score>=90">优秀</span> <span v-else-if="score>=80&&score<90">良好</span> <span v-else-if="score>=60&&score<80">及格</span> <span v-else>不及格</span> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { score: 99 }, }) </script> </html>
列表渲染
列表渲染 v-for 显示多行
购物车案例+bootstrap
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="text-center"> <button class="btn btn-danger" @click="handleShow">点我显示购物车</button> <button class="btn btn-danger" @click="handleDelete">删除最后一条</button> </div> <table class="table table-bordered"> <thead> <tr> <th>id号</th> <th>商品名字</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> <td>{{item.count}}</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { good_list: [] }, methods: { handleShow() { this.good_list = [ {id: 1, name: '钢笔', price: 9.9, count: 4}, {id: 2, name: '足球', price: 99, count: 4}, {id: 3, name: '篮球', price: 44, count: 32}, {id: 4, name: '电脑', price: 1299, count: 48}, {id: 5, name: '鼠标', price: 23, count: 4}, {id: 6, name: '脸盆', price: 8, count: 4}, ] }, handleDelete() { this.good_list.pop() } } }) </script> </html>
v-for能循环的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>循环数组--》见过了</h1> <p v-for="(value,index) in girls">第 {{index + 1}}个女神是：{{value}}</p> <h1>循环对象</h1> <p v-for="(value,key) in userinfo">key值是：{{key}}，value值是：{{value}}</p> <h1>循环字符串</h1> <p v-for="(value,index) in s">第 {{index}}个字母是：{{value}}</p> <h1>循环数字</h1> <p v-for="i in 10">{{i}}</p> </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { girls: ['刘亦菲', '迪丽热巴', '高圆圆'], userinfo: {name: 'lqz', age: 19, hobby: '篮球'}, s: 'hello world' }, methods: {} }) </script> </html>