<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{msg}} <br/> <span v-html="msg"></span> <br/> <span v-text="msg"></span> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data:{ msg:"<h1>Hello</h1>" } }) </script> </body> </html>
1.差值表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{msg}} {{1+1}} {{hello()}} <br/> <span v-html="msg"></span> <br/> <span v-text="msg"></span> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data:{ msg:"<h1>Hello</h1>" }, methods: { hello(){ return "World" } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 给html标签的属性绑定 --> <div id="app"> <a v-bind:href="link">gogogo</a> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data:{ link:"http://www.baidu.com" } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 给html标签的属性绑定 --> <div id="app"> <a v-bind:href="link">gogogo</a> <!-- class,style --> <span v-bind:class="{active:isActive, 'text-danger':hasError}">你好</span> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ link:"http://www.baidu.com", isActive: true, hasError: true } }) </script> </body> </html>
style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 给html标签的属性绑定 --> <div id="app"> <a v-bind:href="link">gogogo</a> <!-- class,style 动态改class {class名: 加上?}--> <span v-bind:class="{active:isActive, 'text-danger':hasError}" style="color: crimson; font-size: 90px;">你好</span> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ link:"http://www.baidu.com", isActive: true, hasError: true } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 给html标签的属性绑定 --> <div id="app"> <a v-bind:href="link">gogogo</a> <!-- class,style 动态改class {class名: 加上?}--> <span v-bind:class="{active:isActive, 'text-danger':hasError}" v-bind:style="{color: color1, fontSize: size}">你好</span> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ link:"http://www.baidu.com", isActive: true, hasError: true, color1:'red', size:'30px' } }) </script> </body> </html>
在控制台动态修改
v-bind可以缩写为:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 表单项,自定义组件 --> <div id="app"> 精通的语言: <input type="checkbox" v-model="language" value="Java">java<br/> <input type="checkbox" v-model="language" value="PHP">PHP<br/> <input type="checkbox" v-model="language" value="C++">C++<br/> 选中了 </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ language: [] } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 表单项,自定义组件 --> <div id="app"> 精通的语言: <input type="checkbox" v-model="language" value="Java">java<br/> <input type="checkbox" v-model="language" value="PHP">PHP<br/> <input type="checkbox" v-model="language" value="C++">C++<br/> 选中了{{language.join(",")}} </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ language: [] } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 事件中直接写js片段 --> <button v-on:click="num++">点赞</button> <!-- 事件指定一个回调函数,必须是Vue实例中定义的函数 --> <button v-on:click="cancle">取消</button> <!-- --> <h1>有 {{num}}个赞</h1> <!-- 事件修饰符 --> <div style="border: 1px solid red;padding: 20px;"> 大div <div style="border: 1px solid blue;padding: 20px;"> 小div <br/> <a href="http://www.baidu.com">去百度</a> </div>> </div> <!-- 按键修饰符 --> <input type="text"><br/> 提示: </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data:{ num: 1 }, methods: { cancle(){ this.num-- } } }) </script> </body> </html>
v-on可以简写为@
这里发生了事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 事件中直接写js片段 --> <button v-on:click="num++">点赞</button> <!-- 事件指定一个回调函数,必须是Vue实例中定义的函数 --> <button @click="cancle">取消</button> <!-- --> <h1>有 {{num}}个赞</h1> <!-- 事件修饰符 --> <div style="border: 1px solid red;padding: 20px;" v-on:click="hello"> 大div <div style="border: 1px solid blue;padding: 20px;" @click="hello"> 小div <br/> <a href="http://www.baidu.com">去百度</a> </div> </div> <!-- 按键修饰符 --> <input type="text"><br/> 提示: </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data:{ num: 1 }, methods: { cancle(){ this.num-- }, hello(){ alert("点击了") } } }) </script> </body> </html>
.stop
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 事件中直接写js片段 --> <button v-on:click="num++">点赞</button> <!-- 事件指定一个回调函数,必须是Vue实例中定义的函数 --> <button @click="cancle">取消</button> <!-- --> <h1>有 {{num}}个赞</h1> <!-- 事件修饰符 --> <div style="border: 1px solid red;padding: 20px;" v-on:click="hello"> 大div <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello"> 小div <br/> <a href="http://www.baidu.com">去百度</a> </div> </div> <!-- 按键修饰符 --> <input type="text"><br/> 提示: </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data:{ num: 1 }, methods: { cancle(){ this.num-- }, hello(){ alert("点击了") } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 事件中直接写js片段 --> <button v-on:click="num++">点赞</button> <!-- 事件指定一个回调函数,必须是Vue实例中定义的函数 --> <button @click="cancle">取消</button> <!-- --> <h1>有 {{num}}个赞</h1> <!-- 事件修饰符 --> <div style="border: 1px solid red;padding: 20px;" v-on:click="hello"> 大div <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello"> 小div <br/> <a href="http://www.baidu.com" @click.prevent>去百度</a> </div> </div> <!-- 按键修饰符 --> <input type="text"><br/> 提示: </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data:{ num: 1 }, methods: { cancle(){ this.num-- }, hello(){ alert("点击了") } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 事件中直接写js片段 --> <button v-on:click="num++">点赞</button> <!-- 事件指定一个回调函数,必须是Vue实例中定义的函数 --> <button @click="cancle">取消</button> <!-- --> <h1>有 {{num}}个赞</h1> <!-- 事件修饰符 --> <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello"> 大div <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello"> 小div <br/> <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a> </div> </div> <!-- 按键修饰符 --> <input type="text"><br/> 提示: </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data:{ num: 1 }, methods: { cancle(){ this.num-- }, hello(){ alert("点击了") } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 事件中直接写js片段 --> <button v-on:click="num++">点赞</button> <!-- 事件指定一个回调函数,必须是Vue实例中定义的函数 --> <button @click="cancle">取消</button> <!-- --> <h1>有 {{num}}个赞</h1> <!-- 事件修饰符 --> <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello"> 大div <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello"> 小div <br/> <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a> </div> </div> <!-- 按键修饰符 --> <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br/> 提示: </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data:{ num: 1 }, methods: { cancle(){ this.num-- }, hello(){ alert("点击了") } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="user in users"> <!-- 1.显示user信息: v-for="item in items" --> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <!-- 2.获取数组下标: v-for="(item,index) in items" --> <!-- 3.遍历对象: v-for="value in object" v-for="(value, key) in object" v-for="(value, key, index) in object" --> <!-- 4.遍历的时候都加上:key来区分不同数据,提高vue渲染效率 --> </li> </ul> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({ el:"#app", data: { users: [{name: '肖战', gender: '男', age: 29}, {name: '王一博', gender: '男', age: 23}, {name: '蔡徐坤', gender: '男', age:22}, {name: '杨洋', gender: '男', age:28}, {name: '吴磊', gender: '男',age:21}] }, }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="(user,index) in users" :key="user.name"> <!-- 1.显示user信息: v-for="item in items" --> 当前索引:{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}}<br> <!-- 2.获取数组下标: v-for="(item,index) in items" --> <!-- 3.遍历对象: v-for="value in object" v-for="(value, key) in object" v-for="(value, key, index) in object" --> 对象信息: <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}};</span> <!-- 4.遍历的时候都加上:key来区分不同数据,提高vue渲染效率 --> </li> </ul> <ul> <li v-for="(num,index) in nums" :key="index"></li> </ul> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({ el:"#app", data: { users: [{name: '肖战', gender: '男', age: 29}, {name: '王一博', gender: '男', age: 23}, {name: '蔡徐坤', gender: '男', age:22}, {name: '杨洋', gender: '男', age:28}, {name: '吴磊', gender: '男',age:21}], nums: [1,2,3,4,4] }, }) </script> </body> </html>
B站学习网址:全网最强电商教程《谷粒商城》对标阿里P6/P7,40-60万年薪哔哩哔哩bilibili