Vue学习笔记（二）Vue插值

纯文本

---

通过使用{{}}可以绑定Vue实例中的data对象中的属性，这种绑定得到的是纯文本

<div id="app">
    <p>{{msg}}</p>
</div>
<script>
    let vm = new Vue({
         el: '#app',
         data: {
             msg: 'vue'
         }
     });
</script>

除了直接使用{{}}来对数据进行绑定纯文本，也可以通过v-text来绑定，得到的结果仍是纯文本

    <div id="app">
        <p v-text="msg"></p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'vue'
            }
        });
    </script>

HTML文本

---

如果我们想把一段文本作为html来处理的话，使用上面的方法会和我们所要的结果有一定的差错

<div id="app">
    <p>{{msg}}</p>
</div>
<script>
    let vm = new Vue({
         el: '#app',
         data: {
             msg: '<span style="color:red">vue</span>'
         }
     });
</script>

如果是上面这种写法，那么页面打开后出现的会是<span style="color:red">vue</span>而不是我们想象中的红色的vue，如果要达到我们要的效果，就需要使用v-html

<div id="app">
    <p v-html="msg"></p>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '<span style="color:red">vue</span>'
        }
    });
</script>

属性

---

Vue实例中data对象中的属性不能直接在html的属性上使用，要通过v-bind来实现。

一般的属性使用

<div id="app">
    <input type="text" v-bind:value="msg">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'vue'
        }
    });
</script>

v-bind的缩写

v-bind可以使用“:”来代替，结果是一样的。下面这段代码与上面的代码是相同的。

<div id="app">
    <input type="text" :value="msg">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'vue'
        }
    });
</script>

JavaScript表达式

v-bind绑定的属性后面其实是一个JavaScript表达式，也即是说可以在这里使用字符串的拼接

<div id="app">
    <input type="text" :value="msg+'123'">
</div>
<script src="lib/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'vue'
        }
    });
</script>

控制样式

v-bind在样式的控制上很有用

通过class控制

直接绑定

.bgColor {
    background-color: red;
}

<div id="app">
    <input type="text" :class="bg">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            bg: "bgColor"
        }
    });
</script>

通过这种绑定方式，我们可以通过改变data中的bg来改变该元素的class，不用通过DOM来进行操作。

通过对象语法的布尔值控制

.bgColor_r {
    background-color: red;
}

.bgColor_b {
    background-color: blue;
}

<div id="app">
    <input type="text" :class="{bgColor_r:flag,bgColor_b:unflag}">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            flag: true,
            unflag: false
        }
    });
</script>

input标签渲染出来后为

<input type="text" class="bgColor_r">

通过这种方式，我们可以让两个样式对应相反的布尔值，这样只要取反该布尔值，就可以对样式进行改变

<div id="app">
    <input type="text" :class="{bgColor_r:flag,bgColor_b:!flag}">
    <input type="button" @click="change" value="更改样式">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            flag: true
        },
        methods: {
            change() {
                this.flag = !this.flag;
            }
        }
    });
</script>

这里通过点击按钮就可以改变样式，而事实上这也只是改变了一个flag值。

数组形式

如果要同时使用多个class，也可以使用传入数组的形式

.bgColor_r {
    background-color: red;
}

.fontColor {
    color: blue;
}

<div id="app">
    <input type="text" :class="['bgColor_r','fontColor']">
</div>

被渲染为

<input type="text" class="bgColor_r fontColor">

在数组中也可以使用对象的语法

<div id="app">
    <input type="text" :class="[{bgColor_r:flag},'fontColor']">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            flag: true
        }
    });
</script>

这样的结果与上面的代码是一样的。

内联样式

直接绑定

内联样式的直接绑定，通过在data中写出样式来控制。

<div id="app">
    <input type="text" :style="style1">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            style1: {
                color: 'blue',
                'font-size': '20px'
            },
        }
    });
</script>

渲染为

<input type="text" style="color: blue; font-size: 20px;">

通过对象语法的布尔值控制

内联样式的对象语法与直接在其上写样式很类似，相当直观，只是样式的具体内容写在data中。

<div id="app">
    <input type="text" :style="{color:col,'font-size':font_size+'px'}">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            col: 'red',
            font_size: 12
        }
    });
</script>

渲染为

<input type="text" style="color: red; font-size: 12px;">

数组形式

<div id="app">
    <input type="text" :style=[style1,style2]>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            style1: {
                color: 'blue',
                'font-size': '20px'
            },
            style2: {
                'text-decoration': 'underline',
                border: '1px solid black'
            }
        }
    });
</script>

渲染为

<input type="text" style="color: blue; font-size: 20px; text-decoration: underline; border: 1px solid black;">

过滤器

---

Vue中的过滤器用于对要插入的值做处理

要注意的是，过滤器的出现就是为了操作文本而不操作data里面的数据，所以里面的this指向无法引用data里面的数据

构建过滤器

全局过滤器

Vue.filter("globalFilter", function(data, arg1) {
       return `${data}  全局过滤器`;
});

这里globalFilter是过滤器方法的名字，后面的方法是对插入值的处理，return出来的就是处理后的值，data是原数据，arg1是传入的参数，要注意的是在调用该过滤器时传入参数第一个为这里的arg1，data已经固定为原数据。全局过滤器可以在各个Vue实例中使用，但是全局过滤器要在Vue实例构建之前先构建。

局部过滤器

let vm = new Vue({
    el: '#app',
    data: {},
    filters: {
        partFilter: (data, str) => {
            return `${data}    私有过滤器  添加的内容有  ${str}`;
        }
    }
});

这里的partFilter是局部过滤器方法的名字，后面是方法体，return出来的是处理后的值，data是原数据，str是传入的参数，要注意的是在调用该过滤器时传入参数第一个为这里的arg1，data已经固定为原数据。局部过滤器只能在当前实例中使用。

过滤器的使用

过滤器通过{{msg|filter}}来使用，msg为原数据，而filter则为调用的过滤器，后面可以加括号调用参数

<div id="app">
    <p>{{msg | globalFilter(1)}}</p>
    <p>{{msg | partFilter(2)}}</p>
</div>
<script>
    Vue.filter("globalFilter", function(data, arg1) {
        return `${data}  全局过滤器 ${arg1}`;
    });
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'vue'
        },
        filters: {
            partFilter: (data, str) => {
                return `${data}    私有过滤器  添加的内容有  ${str}`;
            }
        }
    });
</script>

最后渲染出来是

<div id="app">
    <p>vue  全局过滤器 1</p> 
    <p>vue    私有过滤器  添加的内容有  2</p>
</div>

过滤器也可以串连，串连时会先使用第一个过滤器处理，将处理后的值作为原数据传给第二个过滤器

<p>{{msg | globalFilter(1)| partFilter(2)}}</p>

渲染为

<p>vue  全局过滤器 1    私有过滤器  添加的内容有  2</p>

值得一提的是，如果原数据发生改变，那么过滤器会对新的数据进行一次新的“过滤”，这个功能感觉上和computed有点类似，不同的是在computed可以使用this来借用data中的数据处理当前的数据，而filters不行