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(',') ...
随机推荐
- EntityFramework 学习 一 Querying with EDM 从EDM查询
前面我们已经创建EDM.DbContext和实体类,接下来我们学习不同的查询实体方法,转变为数据库的SQL查询 Entity Framework支持3种查询方式:1)LINQ to Entities ...
- JavaScript中call、apply个人理解
JavaScript中call.apply个人理解 一句话即通俗的说:call.apply 是为了改变this的状态而存在的 }; } function personInfo(name,age){ t ...
- TCP/IP 详解卷一 - TCP CWR、ECE、URG、ACK、PSH、RST、SYN、FIN控制位
from:https://blog.csdn.net/u012243115/article/details/43487461 2015年02月04日 15:56:32 阅读数:1464 TCP 和 U ...
- 利用bootsrap控件 实现文件上传功能
源代码实例:https://github.com/kartik-v/bootstrap-fileinput 一.jsp页面 <%@ page language="java" ...
- bzoj 4261: 建设游乐场 费用流
题目 现在有一大块土地,可以看成N*M的方格.在这块土地上,有些格子内是崎岖的山地,无法建造任何东西:其他格子都是平原.现在打算在这块土地上建设一个游乐园.游乐园由若干条闭合的过山车轨道组成,每个平原 ...
- bzoj 1132: [POI2008]Tro 计算几何
题目大意: 平面上有N个点. 求出所有以这N个点为顶点的三角形的面积和 N<=3000 题解 我们看到了n的范围,于是我们就知道这一定不是一个线性算法 所以我们尝试枚举三角形的一个点,那么我们现 ...
- html事件绑定总结以及window.onload和document.body.onload事件
//1 document.onkeydown如果多次监听同样的事件,那么前面的监听函数都会被最后一次的监听函数所覆盖. //如下所示: document.onkeydown = function(ev ...
- 洛谷【P1885】Moo
我对分治的理解:https://www.cnblogs.com/AKMer/p/9728574.html 题目传送门:https://www.luogu.org/problemnew/show/P18 ...
- python中http请求中添加cookie支持
python3中构造http的Request需要用到urllib.request. 有时会用到cookie. 比如在访问网站首页得到cookie,通过下面代码添加cookie: #insta ...
- webpy+nginx+uwsgi安装配置
转:(1)安装Nginx1.1 下载nginx-1.0.5.tar.gz并解压1.2 ./configure (也可以增加--prefix= path指定安装路径)此时有可能会提示缺少pcre支持,如 ...