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

  其实这部分内容我也是参考的官网: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方法。

时间: 2024-08-09 19:51:38

vue入门(二)----模板与计算属性的相关文章

Vue.js学习日记(3)——计算属性和侦听器

1.计算属性 模板不仅可以是简单的声明式逻辑,也可以是较为复杂的表达式. <div id="element"> <!--简单声明--> {{message}} <!--复杂表达式,表示变量message的翻转字符串--> {{message.split('').reverse().join('')}} </id> 如果表达式过于复杂,将不利于直接理解.当需要在模板中多次引用message的翻转字符串时,操作也会变得繁琐. 所以,对于任何复

Vue:Axios异步通信、计算属性、内容分发、自定义事件

1. Axios 什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API [JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF(跨站请求伪造) GitHub:https://github.com/axios/axio

Knockout学习笔记(二)--使用计算属性

如果你已经有了一个监控属性 firstName和lastName,如果你想显示全名该怎么做呢?这个时候你就可以通过计算属性来实现,这个方法依赖于一个或多个监控属性,如果任何依赖对象发生改变他们就会跟着改变. 例如,下面的 view model: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> &l

Vue入门二、单双向数据流和事件绑定

1.Vue单向数据流绑定属性值v-bind:(属性),简写:(属性) eg:<input v-bind:value="name" :class="name">a.内存改变影响页面改变b.v-bind就是对属性的简单赋值,当内存值改变,还是会触发重新渲染 2.Vue双向数据流绑定v-model="值" eg:<input v-model="name">a.双向数据绑定,页面对于input的value改变,

通俗易懂了解Vue的计算属性

1.前言 之前在学习vue的过程中,一直没有搞明白计算属性是个怎么回事,以及为什么要有计算属性,使用计算属性有什么好处.今天花时间翻了翻官方文档,才搞清楚其中一二,现将学习心得总结记录如下. 2.为什么要使用计算属性 试想有这样一个场景: 当我们在网购的时候,打开购物车,我们在增加或减少购物车内货物的数量时,下面的消费总额也在随着联动变化. 那么有了这个场景,我们用vue来简单实现一下.话不多说,直接上代码: 1 <!DOCTYPE html> 2 <html lang="en

Swift计算属性

一.计算属性的概念 计算属性本身不存储数据,而是从其它存储属性中计算得到数据,与存储属性不同,类.结构体.和枚举都可以定义计算属性 计算属性提供了一个getter来获取值,以及一个可选的setter来间接设置其它属性或变量的值,计算属性的语法如下: 面向对象类型 类型名{ 存储属性... var 计算属性名:属性数据类型{ get { return 计算后属性值 } set 新属性值{ } } 示例: class Employee {             var no:Int = 0    

Vue(二) 计算属性

模板内的表达式常用于简单的运算,当过长或逻辑复杂时,难以维护,计算属性就是解决该问题的 什么是计算属性 表达式如果过长,或逻辑更为复杂,就会变得臃肿甚至难以维护,比如: <div> {{ text.split('.').reverse().join('.') }} </div> 该表达式包含 3 个操作,并不是很清晰,可以用计算属性进行改写: <div id="app"> {{ reverseText }} </div> <scri

二、vue基础--计算属性和监听器

1.一些操作需要计算后才能得到的用计算属性,需要放在computed属性中代码如下: <div id='app'> <div> <label>宽:</label> <input type="text" v-model:value="width"> </div> <div> <label>高:</label> <input type="text&

Vue计算属性和监听属性

一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ message.split('').reverse().join('') }} </div> //模板变的很复杂起来,也不容易看懂理解 使用了计算属性的实例: <div id="app"> <p>原始字符串: {{ message }}</p> &l