首页 > 代码库 > vue入门(二)----模板与计算属性

vue入门(二)----模板与计算属性

2024-08-31 23:38:04   220人阅读

　　其实这部分内容我也是参考的官网：http://cn.vuejs.org/v2/guide/syntax.html，但是我还是想把自己不懂的知识记录一下，加深印象，也可以帮助自己以后查阅。所谓勤能补拙。

　　首先我们说一下模板，其实如果看过第一节vue入门----组件，我们会知道更好更科学的办法是通过创建组件的方式，这种方式允许我们任意进行组件的嵌套。而通过模板的方式的话，个人觉得效果并没有组件好。行，开始切入正题，现在我们首先通过一下几点来进行学习（其实是按照官网的顺序记录自己不懂的知识点）。

　　1.　　插值： 所谓插值，其实就是数据的绑定，我们可以通过脚本语言来修改Vue作用域内的任意值。大致分为一下几点内容：

　　　　　A.　　文本：其实这是最简单的方法之一，我们可以简单的通过Mustache来进行相关的设置。语法如下：{{example}}

　　　　　B.　　单次文本绑定： 同上，只是值不会随js的改变而改变，语法如下：{{*example}}

　　　　　C.　　html: 如果我们想通过插值的方式来将html进行元素替换的话，我们可以使用v-html指令来进行关联，注意与vue1.0中的差别，在1.0中直接通过{{{......}}}即可完成绑定。但是在这我更推荐使用自定义组件的方式进行扩展，因为采用v-html指令的方式来复合局部模板，vue并不能识别我们在其中嵌套的模板。

　　　　   D.　　js表达式：我们还可以在绑定中进行js表达式的编写，这样我们可以进行一些简单的判断，但是有一个限制： 每个绑定只能包含一个表达式。（不包括语句和流程控制等）

　　2.　　计算属性： 计算属性是我们学习过程中的另一个知识点，它的函数是指：如果我们想要通过作用域范围内的值进行计算得出另一个值，如果我们直接在插值中进行计算会显得特别凌乱和难以维护。这时候我们就需要使用计算属性，语法为：computer：{}，可使用与vue的实例过程中，或者是组件的创建过程中（上一节我们说过，vue实例过程中的参数出el和data外，其余的都可以使用到组件创建过程中）。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{test}}</h1>
        <h2>{{tset}}</h2>
    </div>
    <script>
        var vm = new Vue({
            el: ‘#app‘,
            data: {
                test: ‘temp‘
            },
            computed: {
                tset: function () {
                    return this.test+‘pmet‘
                }
            }
        })
    </script>
</body>
</html>

　　这里test是经过简单绑定的模板，而tset则是经过test计算出来的属性，我们通过computed：{}语法进行计算。特别注意这里this的用法，this调用的是vm作用域内的全体成员。

　　A.　　这里我们需要特别注意一点，计算属性只有在其依赖的值发生改变的时候才会出发进行再次计算，相当于一个缓存的作用。这样设计的好处是如果我们维护了一个很大的变量时，并且另一个计算属性依赖于这个变量，此时我们不可能每一次都去读取这个变量，更科学的办法是当被依赖属性发生改变时出发事件。这种科学的做法类似cache的设计理念。

　　B.　　实时更新，我们在进行设计的时候如果希望每一次更新都去读取被依赖属性，那么我们可以使用methods属性。

　　C.　　并且在进行computed的时候我们还可以对计算属性设置set/get方法。

vue入门(二)----模板与计算属性


联系
我们