vue学习小结——常用指令

最新推荐文章于 2023-12-23 11:00:33 发布

yenible

最新推荐文章于 2023-12-23 11:00:33 发布

阅读量229

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_42351895/article/details/104294888

版权

常用的vue指令

v-text、v-html

前者只能渲染文本，后者不仅可以渲染文本还可以渲染html标签
例子：

 <h1 v-text="msg1"></h1>
        <h1 v-html="msg1"></h1>
		<div class="clr"></div>
        <!-- 但是只要v-html才能解析html标签 更新元素的 innerHTML -->
        <h1 v-text="msg2"></h1>
        <h1 v-html="msg2"></h1>

测试结果：

在这里插入图片描述

v-bind:

v-bind用于绑定 html 属性，一般使用：（冒号）代替使用。可以用来修改样式style，类class以及其他的属性。

测试：

        <!-- v-bind测试 -->
        <!-- 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM -->
        <input type="text" :value="msg3+' test '+msg4"><br>
        <!-- 同时利用v-bind还可以修改样式和class -->
        <p>aaaa</p>
        <p :style="{'color':'red'}">aaaa</p>
        <p :class="{'green':true }">aaaa</p>
        v-bind将所有的data里的变量都转化成了字符串，toString
        <p :title="obj"></p>

		//msg3:"This is v-bind",
        //      msg4:1,

测试结果：
在这里插入图片描述
小结：v-bind可以响应式地修改属性的内容，在输入不同的变量时，v-bind会先使变量字符串化，即调用toString（）

v-on 绑定事件

简写：使用@代替v-on
测试：

        <input type="text" :value="msg3+' test '+msg4"><br>
 		<!-- v-on用于事件绑定 -->
        <button @click="add">v-on test</button>

测试结果：
初始：
在这里插入图片描述
点击一次：

v-model 用于表单的数据绑定

测试：

        <!-- v-model测试 -->
        <input type="text" v-model="message" placeholder="请输入">
        <p>{{message}}</p>

测试结果：
在这里插入图片描述

v-for 用于批量输入

        <!-- v-for测试 用=号不是：号-->
        <ul>
            <li v-for="(item,index) in items" :key="index">{{item}}--{{index}} </li>
        </ul>
        <button @click="insert">在items中插入新的元素</button>

测试结果：
在这里插入图片描述

v-if和v-show：

v-show每次修改都会渲染，v-if只有当发生不一样的时候才会渲染惰性。

测试：

       <p v-if="vif">v-if</p>
       <p v-show="vif">v-show</p>
        <button @click="vif=!vif">turn</button>

结果：
在这里插入图片描述

完整的全部测试代码

<!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>vue常用指令测试</title>
        <script src="./lib/vue-2.4.0.js"></script>
      <style type="text/css">
          .clr{
              clear: both;
              
              border: 1px black solid;
          }
          .green{
              color: green;
          }
      </style>
      </head>
<body>
    <div id="app">

        <!-- v-text和v-html测试 -->
         
        <h1 v-text="msg1"></h1>
        <h1 v-html="msg1"></h1>
        <div class="clr"></div>
        <!-- 但是只要v-html才能解析html标签 更新元素的 innerHTML -->
        <h1 v-text="msg2"></h1>
        <h1 v-html="msg2"></h1>

        <div class="clr"></div>


        <!-- v-bind测试 -->
        <!-- 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM -->
        <input type="text" :value="msg3+' test '+msg4"><br>
        <!-- 同时利用v-bind还可以修改样式和class -->
        <p>aaaa</p>
        <p :style="{'color':'red'}">aaaa</p>
        <p :class="{'green':true }">aaaa</p>
         <p :title="obj"></p>

        

        <!-- v-on用于事件绑定 -->
        <button @click="add">v-on test</button>
        <div class="clr"></div>

        <!-- v-model测试 -->
        <input type="text" v-model="message" placeholder="请输入">
        <p>{{message}}</p>
        <div class="clr"></div>


        <!-- v-for测试 用=号不是：号-->
        <ul>
            <li v-for="(item,index) in items" :key="index">{{item}}--{{index}} </li>
        </ul>
        <button @click="insert">在items中插入新的元素</button>

        <div class="clr"></div>


       <!-- v-if和v-show -->
       <!-- v-show每次修改都会渲染，v-if只有当发生不一样的时候才会渲染惰性。 -->
       <p v-if="vif">v-if</p>
       <p v-show="vif">v-show</p>
        <button @click="vif=!vif">turn</button>
     </div>
    <script type="text/javascript" >
 
        var vm=new Vue({
            el:'#app',
            data:{
                msg1:"v-text和v-html",
                msg2:"<h2>v-text和v-html</h2>",
                msg3:"This is v-bind",
                msg4:1,
                message:"v-model test",
                items:["aaa","bbb","ccc"],
                num:0,
                vif:true,
                obj:[1,2,3,4],
            },
            methods: {
                add:function(){
                    this.msg4++;
                },
                insert:function(){
                    this.num++;
                    this.items.splice(1,0,"new"+this.num);
                }
            },
        })
    </script>
</body>
</html>

yenible

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习小结——常用指令

常用的vue指令v-text、v-html前者只能渲染文本，后者不仅可以渲染文本还可以渲染html标签例子： <h1 v-text="msg1"></h1> <h1 v-html="msg1"></h1> <div class="clr"></div> <!-- 但是只要v-h...
复制链接

扫一扫