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

Posted doudoutj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第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>

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" 第170天学习打卡（项目 谷粒商城12 Vue整合ElementUI快速开发）


 第176天学习打卡（项目 谷粒商城 18 API三级分类 删除效果细化 新增效果）


 第166天学习打卡（项目 谷粒商城8 前端基础ES6 promise 模块化 Vue）


 第197天学习打卡（项目 谷粒商城 排错）


 第169天学习打卡（项目 谷粒商城11 使用vue脚手架进行模块化开发 整合ElementUI ）


 第182天学习打卡（项目 谷粒商城24 OSS前后联调测试上传 ）