VUE 之 JS指令

Posted 2021-01-18 混元天尊

1、v-text的用法：

　　

2、v-html

　　

3、v-for

　　

4、v-if , v-else if ,v-else 

　　

　　v-if 每次生成都只有一个标签，即符合条件的标签。

5、v-show

　　

　　v-show 和 v- if 的区别：

　　　　切换性能：

　　　　　　v-show更快一些，因为它不需要频繁的去通过判断条件去生成某一个标签，而是通过display:none来切换。

　　　　　　v-if 是通过append来切换。

　　　　加载性能：

　　　　　　v-show更慢一些。因为不符合条件的只是隐藏了，但是还需要加载，如果有10条数据，有一条符合条件，那么10条都加载，9条隐藏

　　　　　　v-if 加载快。因为v-if 是判断符不符合条件，如果符合条件，只加载符合条件的。

6、v-bind，绑定的是属性。v-bind可以简写成一个:

　　

7、v-on，绑定的是事件，可以简写@

　　

8、v-model，进行双向数据绑定

　　

　　

9、计算和侦听

<div id="app">
    {{name}}
    <hr>
    {{hobby}}
    <hr>
    {{obj}}

    <button @click="my_click">点我改变数据</button>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "juyingying",
            hobby: ["抽烟", "喝酒", "烫头"],
            obj: {
                age: 32,
                face: null,
            }
        },
        methods: {
            my_click: function () {
                // 改变数据
                // this.name = "juying"
                // 改变数组的长度
                // 改变数组长度能够被监听到 新值和旧值相同
                // this.hobby.push("把手拿上来");
                // 改变数组中的值 不能被监听到 深度监听也不可以
                // this.hobby[0] = "抽二手烟";
                // console.log(this.hobby);
                // 用$set修改数组中的数组能够被监听
                  app.$set(this.hobby, 0, "抽二手烟");

            }
        },
        watch: {
            name: {
                handler: function (val, oldVal) {
                    console.log(val);
                    console.log(oldVal)
                }
            },
            hobby: {
                handler: function (val, oldVal) {
                    console.log(val);
                    console.log(oldVal);
                },
                // deep: true
            }

　　watch在监听字符串的时候，能够监听到且能被渲染到页面上。

　　watch在监听数组的时候，有两种情况：

　　　　1---如果数组改变的是长度，比如添加了一个值或者删除了一个值，此时是能够被监听到的，但是不能监听到新旧值的变化，只能监听到变化后的值。所以打印新旧值的时候，结果一样。

　　　　2---如果数组修改的是内部的值，是无法被监听的，虽然再打印的时候能够看到结果变了，但是页面上无法被渲染出来。深度监听也不行。

　　　　原因：

　　　　　　是因为数组在被监听的时候只能被监听一层。数组中有字符串，相当于两层，所以无法被监听的。

　　　　解决办法：

　　　　　　用根实例.$set（要改变的数据，index(索引)，vlaue(要改成的结果））

    <table border="1">
        <thead>
            <tr>
                <th>学科</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>python</td>
                <td>
                    <input type="text" v-model.number="python">      # 因为input 框输入进来的是字符串，所以在v-model.number就可以将输入进来的值转换成数字
                </td>
            </tr>
            <tr>
                 <td>go</td>
                <td>
                    <input type="text" v-model.number.lazy="go">      # v-model 是用于双向数据绑定的，input框中有变化，后端跟着变化。如果加了lazy之后，只有当失去焦点的时候才会改变
                </td>
            </tr>
        <tr>
            <td>总成绩</td>
            <td>{{sumScore}}</td>
        </tr>
        </tbody>
    </table>
    <hr>
    {{python}}
</div>
<script>
    new Vue({
        el:"#he",
        data:{
            python:100,
            go:80
        },
        computed:{                   # computed 是用来计算的
            sumScore:function () {
                return this.python+this.go
            }
        },
        watch:{                    # watch 是用来监听data中的数据发生变化的
            python:function () {
                alert(this.python)
            }
        }
    })    

10、修饰符

　　　number 将输入的值变成数字

　　　lazy: 失去焦点的时候才返回结果

　　　trim:去掉两边的空格

11、获取DOM元素