Vue--基础模板语法以及计算属性

属性和方法

每个Vue实例会代理其data对象里所有的对象

var app = new Vue({data: {message : ''}
})

也就是说，可以直接通过:

app.message = 'xxx'

来改变data中出现的属性，从而引发视图的变化。
2. 注意只有这些被代理的属性是响应的。
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
3. Vue实例中，带有前缀 $ 的属性会有特殊作用，比如：

var data = { a: 1 }
var vm = new Vue({el: '#example',data: data
})vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> truevm.$watch('a', function(newVal, oldVal){// 此方法在属性a改变后发生
})

生命周期

beforeCreate : 组件实例刚被创建，组件属性计算之前（data等）

craeted : 组件实例创建完成，属性已绑定，但DOM未生成，$el属性还不存在。

beforeMount ：模板编译/挂载之前

mounted : 模板编译/挂载之后

beforeUpdate : 组件更新之前

updated : 组件更新之后

activated ： for keep-alive 组件被激活时调用

deactivated : for keep-alive 组件被移除时调用

beforeDestroy ：组件销毁之前

destroyed : 组件销毁之后

模板语法

v-once : 这个节点上的所有绑定，单次插值，之后数据不会再变化
v-html : 一般情况 {{ }} 解析出的数据为纯文本，想要输出html内容则可如下，但数据绑定将被忽略，标签中的内容也会被会忽略:

<div id="app"><p>{{ message }}</p><p v-html="htmltest"></p>
</div>new Vue({el: '#app',data: {message: '<span>Hello Vue.js!</span>',htmltest: '<span class="test-1">it is html content!</sapn>'}
})

v-bind : 对于html属性，{{ }}不能用于此。取而代之的是 v-bind

<div v-bind:id="dynamicId"></div>new Vue({el: '#app',data: { dynamicId: 'what' }
})

表达式 : 除了变量，还可使用表达式；每个绑定只能包含单个表达式；只能访问白名单中的全局变量，如 Math 和 Date，不要试图访问用户在模板表达式中定义的全局变量。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

filters : 类似shell中的管道；

{{ message | filterA('arg1', arg2) }}new Vue({data: {message : 'xxx'}filters: {capitalize: function (value, arg1, arg2) {//value}}
})

过滤器函数总接受表达式的值作为第一个参数。
字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

缩写 :

<a v-bind:href="url"></a>           //可写为：
<a :href="url"></a>
<a v-on:click="doSomething"></a>    //可写为：
<a @click="doSomething"></a>

计算属性

计算属性 vs 表达式
```
{{ message.split('').reverse().join('') }}
```
但若使用频繁，处处如此调用，往往是不可取的。计算属性虽然不是普通的属性，但其也可以被当作一种属性，且依赖于其他属性。如下：
```
computed: {// 计算属性的 getter方法reversedMessage: function () {return this.message.split('').reverse().join('')}
}
```
计算属性的 getter 方法干净无副作用…
计算属性 vs 函数
```
<p>反转语句 : {{ reverseMessage() }}<\/p>methods: {// 计算属性的 getter方法reversedMessage: function () {return this.message.split('').reverse().join('')}
}
```
两种方式得到的结果是完全一样的，不同的地方在于计算属性是基于其依赖的缓存
至于是否需要缓存，就看实际情况啦
计算属性 vs $WATCH
$watch 用于监听已有的普通属性，若是沿用上面的例子，那么思路就是指定message以及reversedMessage两个属性，之后监听message属性的变化的同时，改变reversedMessage的值。
但初始化时必须将reversedMessage手动设置为message的倒序字符串。
上面例子似乎不妥，所以换用下面的例子：
```
data: {firstName: 'aaa',lastName: 'bbb',fullName: 'aaabbb'
},
computed: {computedFullName: function () {return this.firstName + this.lastName;}
},
watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}
}
```
无论是获取computedFullName还是获取fullName的值都是一样的。但明显计算属性的代码更简洁精炼。

计算属性 set 方法：

<p>完整名字 : {{ fullName }}</p>computed: {fullName: {// getterget: function () {return this.firstName + ' ' + this.lastName},// setterset: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}
}

Vue--基础模板语法以及计算属性相关推荐

VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础安装 CDN 下载安装命令行工具(CLI脚手 ...
image是否有disabled属性_Vue学习笔记模板语法、计算属性
点击上方"蓝字"关注我们吧! vue学习笔记官网:https://cn.vuejs.org/v2/guide/ 1.vue体验 demo示例: image.png 示例代码: & ...
vue基础--模板语法、常用指令：v-if、v-show、v-for、虚拟DOM、v-once、v-cloak、v-text、v-html、v-bind、v-on、自定义指令
一.模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 ...
4.vue基础（三）计算属性-监视（侦听）属性
文章目录 1. 计算属性 1.1 插值语法实现姓名案例 1.2 methods实现 1.3 计算属性实现 2.监视(侦听)属性 2.1 天气案例 2.2 利用监听属性 2.3 深度监听 2.3.1 监 ...
【1 Vue基础 - 模板语法-绑定】
1 VSCode代码片段链接: link 2 Mustache双大括号语法插入内容 <body><div id="app"><!-- 1.基本使用 ...
Vue — 第三天（计算属性和json-server）
计算属性使用场景如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 例如:要对给定的字符串做翻转处理之后再来显示. <div id ...
Vue的模板语法及案例
文章目录前言一.双大括号表达式二.插值 2.1文本 2.2 原始 HTML 2.3 特性 2.4 javascript 表达式三.指令 3.1 参数 3.2 动态参数 3.3 修饰符四.指令 ...
vue源码-对于「计算属性」的理解
vue源码-对于「计算属性」的理解这是我最近学习vue源码的一个个人总结和理解,所以可能并不适合每一位读者本文的整体脉络如下,首先尽可能去掉细节,对计算属性源码的大致实现有一个了解,然后举一例子, ...
模板语法-插入文本//模板语法-插入标签//模板语法-双花括号//模板语法-向标签属性中插入数据
模板语法-插入文本 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗？说说你对这模板引擎的理解
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解模板引擎: 负责组装数据,以另外一种形式或外观展现数据. 优点: 可维护性(后期改起来方便): 可扩展性(想要 ...