GuLi商城-前端基础Vue指令-单向绑定&双向绑定

女爷i 2024-03-22 23:15 96阅读 0赞

什么是指令?

指令 (Directives) 是带有 \`v-\` 前缀的特殊特性。

指令特性的预期值是:单个 JavaScript 表达式。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM

例如我们在入门案例中的 v-on，代表绑定事件

![ebea02a442f447ad80da40a00ad4205a.png][]

![1e07679f8a80461d86a76ecb1bea6ccc.png][]

![cb2384d85f27462d9f8d7e37c788850e.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <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>",
                    link:"http://www.baidu.com"
                },
                methods:{
                    hello(){
                        return "World"
                    }
                }
            })
        </script>
        
    </body>
    </html>

![413bebfb96a8472ca39360457be95cf9.png][]

--------------------

![598fdc4d198246e080bec43d6692ca5f.png][]

![b1cac9e74eb54a45b3a05d972d2d0512.png][]![4729e3ebd4cf4f1788c7fd217e879b87.png][]

![7781a8dd6a9e4a3dadc8663a312c8f51.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
        
        <div id="app"> 
    
            <a v-bind:href="link">gogogo</a>
    
            
            <span v-bind:class="{active:isActive,'text-danger':hasError}"
              :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:'36px'
                }
            })
        </script>
    
    </body>
    </html>

![9c0c675bb7e54e119885e172ab512775.png][]

--------------------

![69eb72896c9c4657b5eeb5c7b610da80.png][]

![9ec455aa65704563bbeccd5aecc247f0.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <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="Python"> Python<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>

注意：页面上显示的是小写的java，操作的是value里面大写的Java

![fc21cd92500e4db2a361b0bb3832ac97.png][]

[谷粒商城项目4——前端基础 Vue框架的属性 ES6前端编程规范学习\_谷粒商城mvvm思想\_HotRabbit.的博客-CSDN博客][4_ Vue_ ES6_mvvm_HotRabbit._-CSDN]

[ebea02a442f447ad80da40a00ad4205a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/0332dc89704547c39a57d224911347de.png
[1e07679f8a80461d86a76ecb1bea6ccc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/58c76ef0fcc04977b49b9c4d0adeed06.png
[cb2384d85f27462d9f8d7e37c788850e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/a3acd9b83667488bb1964015fe6b48b5.png
[413bebfb96a8472ca39360457be95cf9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/a32d68ae12dd4ad59d879a397c6477ea.png
[598fdc4d198246e080bec43d6692ca5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/81f7d90608304896b1cc4f4ea2325a48.png
[b1cac9e74eb54a45b3a05d972d2d0512.png]: https://img-blog.csdnimg.cn/b1cac9e74eb54a45b3a05d972d2d0512.png
[4729e3ebd4cf4f1788c7fd217e879b87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/e73cbcd3dfbd4c1293e77e872f5eacad.png
[7781a8dd6a9e4a3dadc8663a312c8f51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f8a818eb81cd48658a168a318154ad06.png
[9c0c675bb7e54e119885e172ab512775.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3c6aba91172a4b9faa96304105d51055.png
[69eb72896c9c4657b5eeb5c7b610da80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/4a2cd4763c2d429e821cc6d10d5afcb4.png
[9ec455aa65704563bbeccd5aecc247f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d516eed0f8404077911f8efe68272c2e.png
[fc21cd92500e4db2a361b0bb3832ac97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/4a8f8331d4594af5a1befad658c5a23d.png
[4_ Vue_ ES6_mvvm_HotRabbit._-CSDN]: https://blog.csdn.net/qq_52476654/article/details/125362988