谷粒商城31 - 前端基础 VUE-指令-单向绑定&双向绑定

文章目录

指令

v-html v-text指令

网速慢的问题

v-bind
v-model

指令

v-html v-text指令

v-html v-text 代码示例如下
v-html 指令, 解析html 渲染到页面上
v-text 指令, 不会进行渲染, 而是直接显示文本

<body>
   
    <div id="app">
        <!-- {{msg}} <br/> -->
      
          {{1+1}}  {{hello()}} 

          <!--  使用 v-html 指令, 解析html 渲染到页面上  -->
        <span v-html="msg"></span>
        <br/>      

        <!-- 使用 v-text 指令, 不会进行渲染, 而是直接显示文本  -->
        <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>

页面显示效果如图
使用了 v-html 的, 显示成了标题的样式
使用了 v-text 的 ,显示了 html标签的原本的样子.

网速慢的问题

在网速慢的时候, 如果使用了
{{msg}}

在页面上一开始会显示成 {{msg}}

只有等加载完成了, 才会变成赋予的值.

而使用 v-html v-text 的时候, 就不会有这个问题, 因此推荐使用 v-html v-text, 而不是直接在页面上使用{{}} 进行值的绑定

v-bind

v-bind 给html标签的属性绑定
使用的代码如下
a标签的href 属性 , 动态的获取跳转的链接 . 直接写对应的link即可引用

<body>

   <!-- v-bind  给html标签的属性绑定 -->
   <div id="app"> 

       <a v-bind:href="link">gogogo</a>
   </div>

   <script src="../node_modules/vue/dist/vue.js"></script>

   <script>
       let vm = new Vue({
           el:"#app",
           data:{
               link: "http://www.baidu.com",
           }
       })
   </script>

</body>

页面上可以看到渲染的如下 , 点击链接也可以跳转到百度

class 是否加上的用法
class : true/false
具体用法如下

<body>

    <!-- v-bind  给html标签的属性绑定 -->
    <div id="app"> 
          <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:{
                isActive:true,
                hasError:true
            }
        })
    </script>

</body>
</html>

页面显示如下, 可以看到是有这两个属性的.

给某一个属性为false, 可以看到就没有这个属性了,

v-bind 对style 进行动态赋值
完整的使用代码如下, 使用color1 和size来对样式动态的复制

<body>

    <!-- v-bind  给html标签的属性绑定 -->
    <div id="app"> 
        <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:{
                color1:'red',
                size:'36px'
            }
        })
    </script>

</body>

页面显示如下

动态赋值, 可以看到变绿了.

v-bind 也可以省略不写. 直接用:属性名称即可.

使用v-bind的缺点是单向绑定, 只能数据绑定页面元素. 而页面的值变化, vue中的值是不会变化的

v-model

v-model 一般用于表单项和自定义的组件

代码示例, 获取多选框选中的值

<body>


    <!-- 表单项，自定义组件 -->
    <div id="app">

        精通的语言：<br>
            <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>

在input 框中, 使用 v-model 对多选框的值,进行绑定, 适时地获取勾选中的多选框
效果如下