Vue常用系统指令

Vue常用系统指令

v-text渲染普通的字符串

v-text可以将一段文本渲染到指定的元素中,例如：

<div id="app">
    <!-- 所谓的指令也就是标签上的属性 -->
    <!-- 如果需要把标签里面的内容完全覆盖掉，使用v-text -->
    <p v-text="message">标题：</p>
</div>  

<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",

        data: {
            message: "hello vue"
        }
    });
</script>

v-html处理html富文本字符串

差值表达式和v-text会将数据解释为纯文本，而非 HTML 。
为了输出真正的 HTML ，你需要使用 v-html 指令：

<div id="app">
    <!-- 如果要渲染html字符串，使用v-html，渲染方式和v-text一样会覆盖标签的内容 -->
    <p v-html="message">标题：</p>
</div>  

<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",

        data: {
            message: `<span style="color:red">hello vue</span>`
        }
    });
</script>

被插入的内容都会被当做 HTML,但是对于没有HTML标签的数据绑定时作用同v-text和{{}

v-bind属性绑定

如果需要修改标签的属性值，比如图片的src

<div id="app">
    <img v-bind:src="image">

    <input v-bind:value="inputValue">
</div>   

<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",

        data: {
            image: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png",
            inputValue: "123"
        }
    });
</script>

v-for列表渲染

for循环有3中常见的结构，常用第二，三种循环

<div id="app">
    <ul>
        <!-- 1.简单的循环 -->
        <!-- 可以使用v-for指令循环渲染出多条标签，哪个标签需要渲染出多个就给哪个标签使用v-for -->
        <!-- item就是数组的当前项，可以直接在模板中渲染 -->
        <!-- in是模板的关键字，不能修改 -->
        <!-- goods是要循环的数据，来自于data -->
        <!-- <li v-for="item in goods">
            {{item}}
        </li> -->

        <!-- 2.在循环体中获取到下标，（常用的渲染方法，后面使用webpack时候必须要用到这种方式） -->
        <!-- 使用括号声明多个变量，第二个变量就是下标 -->
        <!-- <li v-for="(item, index) in goods">
           {{index}} {{item}}
        </li> -->

        <!-- 3.循环渲染对象 -->
        <li v-for="(item, key, index) in goods">
              {{index}}  {{key}}  {{item.price}}
        </li>
    </ul>
</div>    
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",

        data: {
            // 商品数据
            // 如果数据是来自于后台接口的话，是不能确定到底有多少条数据
            // goods: [
            //     "iphoneXs",
            //     "huawei p30",
            //     "sanxing fold",
            //     "xiaomi 9"
            // ]

            goods: {
                iphone: { price: 10000 },
                huawei: { price: 8000 },
                xiaomi: { price: 3000 },
            }
        }
    });
</script>

v-if和v-show

v-if和v-show指令都是通过判断表达式的值来控制页面是否渲染该元素，表达式为true则显示，为false则隐藏，两个指令在隐藏元素所采用的方式有区别

<div id="app">

    <!-- 使用v-if指令控制该元素是否展示,如果if的值是false，dom结构不会渲染并且不会生成在dom结构中 -->
    <!-- v-if的判断表达式和普通的if判断是一样的，并不一定需要去读取data的值，可以和普通的js运算一样 -->
    <!-- <p v-if="1 > 2">hello vue</p> -->

    <!-- v-show的用法和v-if是一样，不一样的地方是隐藏的方式不一样 -->
    <!-- v-show的隐藏方式采用css的display：none来隐藏，会生成到dom树中 -->
    <p v-show="1 > 2">hello vue</p>
</div>    
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",

        data: {
            // isShow: true
        }
    });
</script>

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-model双向数据绑定

双向数据绑定，

1.会读取data的值，并且会设置为value的值

2.如果修改了输入的value值，这个值会同步data

3.通常双向数据绑定只能用于有value值的标签，一般只有表单元素才有值，可以认为v-model常用于表单元素

<div id="app">
    <input v-model="message"> {{message}}
</div>    
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "请输入手机号码"
        }
    });
</script>

v-on事件绑定

v-on指令可以给元素绑定事件，可以缩写成@符号；

比如v-on:click，click是事件名，事件名和普通的dom事件名是一样的， 后面的值是事件处理函数名，事件处理函数在实例的methods配置中声明

div id="app">
    <!-- v-on:click后面的值是事件处理函数名，事件在实例的methods配置中声明 -->
    <!-- click其实就是普通的dom的事件名 -->
    <button id="btn" v-on:click="handleClick">提交</button>
</div>    
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",

        data: {},

        // 声明模板的方法或者事件方法
        methods: {
            handleClick: function(){
                alert(123)
            }
        }
    });
</script>

v-on可以缩写成@符号

小案例

      #app{
            width:500px;
            border:1px #eee solid;
            padding:10px 20px;
            margin:0 auto;
        }
        
        #app>div{
            display: flex;
            justify-content: space-between;
            padding:10px 0;
            border-bottom:1px #eee solid;
        }

        table{
            width:500px;
            padding:10px 0;
        }

        table td{
            border-bottom: 1px #eee solid;
            padding:10px;
        }

<div id="app">
        <div>当前预算金额：{{money}}</div>

        <div>
            <!-- 因为v-model每次输入都会同步到data，体验不好 -->
            <span>请输入最新的预算金额: <input @keyup.enter="handleEnter"/></span>
        </div>
        <table>
            <thead>
                <td>id</td>
                <td>型号</td>
                <td>价格</td>
                <td>操作</td>
            </thead>
            <tbody>
                <!-- goods有多少条数据，就渲染出多少个tr -->
                <!-- 预算金额的条件 money >= item.price -->
                <tr v-for="(item, index) in goods" v-if="money >= item.price">
                    <td>{{index}}</td>
                    <td>{{item.model}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="handleDelete(index)">删除</button>
                    </td>
                </tr>    
            </tbody>
        </table>

    </div>

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

    <script>
        
        var app = new Vue({
            // 指定模板
            el: "#app",
            data: {
                // 商品列表
                goods: [
                    { model: "iphonexs", price: 10000 },
                    { model: "huawei", price: 8000 },
                    { model: "xiaomi", price: 6000 }
                ],
                // 预算金额
                money: 8000
            },
             
            methods: {
                // 删除指定的goods商品
                handleDelete: function(index){
                    this.goods.splice(index, 1);
                },

                // 预算金额输入
                handleEnter: function(event){
                    // 获取到input的值
                    var value = event.target.value;
                    // 把这个值赋值给 money
                    this.money = value;
                }
            }
            
        });
        
    </script>