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方法。
vue入门(二)----模板与计算属性的更多相关文章
- Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器
模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...
- vue从入门到进阶：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- vue 生命周期钩子 过滤器 计算属性
每一个Vue实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测.编译模板.挂载实例到DOM,然后在数据变化时更新DOM,在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了 ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
- vue文档阅读笔记——计算属性和侦听器
页面链接:https://cn.vuejs.org/v2/guide/computed.html 注意点 计算属性用于 替代模板内的表达式. 如果计算属性所依赖的属性未更新,会返回自身的缓存. 侦听器 ...
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue基础第三章 - 计算属性
1.计算属性介绍 在第二章中我们介绍了在Vue的{{}}中可以使用一些简单的表达式进行计算,但是当表达式过长或者逻辑过于复杂就会变得不易理解和维护,比如第二章的示例{{ text.split(',') ...
随机推荐
- 织梦dedecms 扩展channel栏目标签 获取交叉栏目名称和链接
channel栏目标签默认有调用顶级栏目(top).子栏目(son).同级栏目(self),那想获取交叉栏目的名称和链接怎么获取呢? 其实在原来的代码上改一下就可以了.下面是具体代码.打开文件chan ...
- Linux离线同步时间
Linux离线同步时间 思路:以其中一台时间为准 脚本 #!/bin/shcurrent=`date '+%H:%M:%S'` for i in bigdata1 bigdata2 bigdata3 ...
- C#返回Json，js解析Json，并添加到select标签中
后台: List<Student> list=GetAll();//id name string json = new JavaScriptSerializer().Serialize(l ...
- c# ListBox
1. ListBox用法(http://www.cnblogs.com/chinahbzm/articles/3577285.html) 2. ListBox使用(http://www.cnblogs ...
- C 字节对齐.我的算法学习之路
C/C++基础笔试题1.0(字节对齐) http://blog.csdn.net/dengyaolongacmblog/article/details/37559687 我的算法学习之路 http:/ ...
- Selenium-webdriver基本操作1
#! /usr/bin/env python #coding=utf-8 from selenium import webdriver import time print("====浏览器最 ...
- Java之 将程序打包成jar包
准备材料: 1.java文件: Helloworld.java package com.ray; public class HelloWorld{ public static void main(St ...
- 并发问题引出ThreadLocal
ThreadLocal Thread-->人类Runnable-->任务类 多线程并发问题引出ThreadLocal 多线程并发问题的原因: 操作同一个对象,对对象具有读写权限(只读如拍照 ...
- Javascript-- jQuery事件篇(1)
jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...
- 洛谷 P2149 [SDOI2009]Elaxia的路线
题目描述 最近,Elaxia和w的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间.Elaxia和w每天都要奔波于宿舍和实验室之间,他们 希望在节约时间的 ...