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(',') ...
随机推荐
- 解决css的float父div没有高度
在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计 <div class='box'> <div class='float_left'></d ...
- 什么是shell【TLCL】
常用命令 date cal df——report file system disk space usage free——display amount of free and used memory i ...
- ZSetOperations
有序集合,默认按照score升序排列,存储格式K(1)==V(n),V(1)=S(1)(K=key,V=value,S=score) 1.add(K,V,S):添加 2.count(K,Smin,Sm ...
- C++（七）— 进程、线程及区别
1.进程(process) 狭义定义:进程就是一段程序的执行过程. 广义定义:进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动.它是操作系统动态执行的基本单元,在传统的操作系统中,进程既 ...
- python--17个新手常见Python运行时错误
当初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让你程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...
- hibernate复习第（二）天
今日要点: 关联映射 多对一(Employee - Department) 一对多(Department - Employee) 一对一(Person - IdCard) 多对多(teachet - ...
- 2018-06-07 RF test 1 ：TX Power test
Test item: 1.Output power: 屏蔽网房-同轴线-频谱仪 The radio circuitry, generally referred to as the Device U ...
- codeforces 627B B. Factory Repairs(线段树)
B. Factory Repairs time limit per test 4 seconds memory limit per test 256 megabytes input standard ...
- 大白话AOP
工作一年多后, 第二次看了韩顺平老师讲的AOP (11年的Spring 教学视频) AOP还是比较艰涩的东西. 从刚开始 碰Java项目去找书看开始, 到学了拦截器知道AOP就是处理事务, 日志, 安 ...
- 【遍历二叉树】03二叉树的后序遍历【Binary Tree Postorder Traversal】
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,返回他的后序遍历的 ...