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

于 2021-06-24 22:42:38 发布
阅读量119 收藏
点赞数
文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/doudoutj/article/details/118197950
版权

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>

image-20210624193925727

1.差值表达式

image-20210624194724230

image-20210624194812526

image-20210624194844398

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

image-20210624200916191

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>

image-20210624201655435

image-20210624201718732

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

image-20210624202933900

image-20210624203015446

style

image-20210624203458205

image-20210624203512477

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

image-20210624204005542

image-20210624204027190

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

在控制台动态修改

image-20210624204331134

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>

image-20210624205402495

image-20210624205822981

image-20210624210015229

image-20210624205954595

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

image-20210624211529040

image-20210624211558488

v-on可以简写为@

image-20210624211745011

事件修饰符

这里发生了事件冒泡

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

image-20210624212818592

image-20210624212634754

.stop

image-20210624213531752

image-20210624213621003

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

image-20210624213922107

image-20210624213834142

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

image-20210624214205441

image-20210624214116937

image-20210624214401522

image-20210624214341390

image-20210624214542910

image-20210624214521616

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

image-20210624214709380

image-20210624214822346

image-20210624215258790

image-20210624215120224

组合按钮

image-20210624215402302

image-20210624215424674

image-20210624215617663

image-20210624215559555

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

image-20210624221712587

image-20210624221945193

image-20210624222003347

image-20210624222524551

image-20210624222427768

image-20210624223202221

image-20210624223459270

image-20210624223405440

image-20210624223430983

image-20210624224100382

image-20210625195750273

image-20210625195809308

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

doudoutj
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值