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(',') ...
随机推荐
- JS命令模式个人理解
JS命令模式个人理解 //BODY部分<body> <button id="execute">打开电视</button> <button ...
- DIV+CSS专题：第一天 XHTML CSS基础知识
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础 ...
- GUI创建各常用控件（一）
首先,作个申明: 1.这是一个野路子非科班的小菜鸟的学习,故诚心欢迎批评指正(同时所述内容可能有误): 2.本人目前使用的Unity3D版本为 5.3.5: 言归正传! 事实上在开发过程中已经很少用G ...
- php 冒泡排序原理
$start = microtime(true); $popArr = array(6,3,23,1,5,100,399,99,66); echo '6,3,23,1,5,100,399,99 ...
- 通俗解释glLoadIdentity()，glPushMatrix()，glPopMatrix()的作用
通俗解释glLoadIdentity(),glPushMatrix(),glPopMatrix()的作用 (2012-04-02 09:17:28) 转载▼ 对于glLoadIdentity(), ...
- leetcode 35 Search Insert Position(二分法)
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
- 【leetcode刷题笔记】Add Two Numbers
You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...
- ACM学习历程—UESTC 1215 Secrete Master Plan（矩阵旋转）（2015CCPC A）
题目链接:http://acm.uestc.edu.cn/#/problem/show/1215 题目大意就是问一个2*2的矩阵能否通过旋转得到另一个. 代码: #include <iostre ...
- 洛谷P2896 [USACO08FEB]一起吃饭Eating Together
题目描述 The cows are so very silly about their dinner partners. They have organized themselves into thr ...
- 使用 Anthem.NET 的常见回调（Callback）处理方式小结
在 Anthem.NET 中,通过 XmlHttp 或 XmlHttpRequest 组件对服务器端所作的一次无刷新调用(通常是异步模式),称为一个回调(Callback). 本文内容是对 Anthe ...