第167天学习打卡(项目 谷粒商城9 Vue指令)

Vue 指令

v-text v-html.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">
        {{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>

第167天学习打卡(项目 谷粒商城9 Vue指令)

1.差值表达式

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 

 <!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>

第167天学习打卡(项目 谷粒商城9 Vue指令)

v-bind.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>

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 

 <!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>

 

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 

style

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 

 <!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>

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 

 <!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>

在控制台动态修改

第167天学习打卡(项目 谷粒商城9 Vue指令)

v-bind可以缩写为:

v-model.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/>
        选中了
     </div>
     <script src="../node_modules/vue/dist/vue.js"></script>
     <script>
         let vm = new Vue({
             el:"#app",
             data:{
                 language: []
            }
        })
     </script>
     
 ?
 </body>
 </html>

 

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 

 <!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>

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 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>

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

v-on可以简写为@

第167天学习打卡(项目 谷粒商城9 Vue指令)

事件修饰符

这里发生了事件冒泡

 <!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>

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 

.stop

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 <!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>

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 <!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>

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 <!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>
按键修饰符

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

组合按钮

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 <!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>

v-for.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>

第167天学习打卡(项目 谷粒商城9 Vue指令)

 

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

第167天学习打卡(项目 谷粒商城9 Vue指令)

 

 <!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

 

第167天学习打卡(项目 谷粒商城9 Vue指令)

上一篇:ROS系统玩转自主移动机器人(2)--机器人机械结构设计


下一篇:Application 简介 常用方式