数据和方法

  1:只有当实例被创建时 data 中存在的属性才是响应式的,也可以预定义一些空的属性,唯一的意外就是Object.freeze(obj),这会阻止修改现有的属性;也就是说一个数据在放到根实例的data对象之前被Object.freeze操作过,那么就不在动态响应

//存在的属性是响应式的,预定义空的属性
//Object.freeze(obj) 不再响应
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
obj:{
foo: 'bar'
}
error: null
}

注意:Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive properties)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

data:{
obj:{
a:1
}
}
//添加了一个响应属性了
Vue.set(vm.obj,b,2)

模板语法

  1:原始HTML

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p> //rawHtml :是一段html代码,双{{}}会把他当做一段文本进行输出,v-html则会将他当做html代码

  2:{{}}的语法不能作用在html标签的特性上面,通过v-bind指令,可以绑定标签的特性(特性就是指元素的一些属性)

  3:不管是标签文本的绑定,还是特性的绑定,都是支持表达式的,但是只能包含单个表达式

指令:指令特性的值预期是单个 JavaScript 表达式(结果还是个值)(v-for 是例外情况)

<p v-if="seen">现在你看到我了</p>//seen就是表达式

  1:一些指令可以带参数和修饰符

//带参数
//v-bind指令的参数就是标签的特性
<a v-bind:href="url">...</a>
//v-on指令的参数就是事件名
<a v-on:click="doSomething">...</a> //带修饰符
<form v-on:submit.prevent="onSubmit">...</form>

计算属性与侦听器

  计算属性出现的目的:不管是文本,还是标签的特性,都属于模板的绑定,而且可以是单个js表达式,但是当表达式的逻辑太复杂就不易维护

  1:计算属性vs方法

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessageA() }}"</p>
</div>
//效果是一样的,一个是计算属性,一个是方法,除了调用方式不一样之外,最大的区别就是计算属性是基于他们的依赖进行缓存的,简而言之就是message的值不改变,
那么reversedMessage的就不会改变,但是方法不同,每次重新渲染,方法都是执行一次
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
},
computed: {
// 计算属性的 getter
reversedMessageA: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})

  2:计算属性看似只能被动的根据他所依赖的属性值改变,那是因为计算属性默认只有getter,你可以给他提供setter

computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
vm.fullName = 'pan rui'; 一般情况下没有效果,但是设置setter以后,就会改变计算属性的值

  3:侦听器watch只有才数据发生改变,执行异步或开销较大的操作的时候使用

class与style的绑定

  1:对象语法:作用似乎和addCLass和removeClass作用很像哦,不需要再去调用方法,直接切换布尔值就可以切换标签的class,

  结合返回对象的计算属性方法更加哦,就是将classObject设置为一个计算属性,返回值是一个对象

<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
isActive: true,
hasError: false
}
//{ active: isActive, 'text-danger': hasError } 完全可以由一个对象去代替
<div v-bind:class="classObject"></div> 那么data那里相应的也用classObject

  2:数组语法:感觉没什么卵用

<div v-bind:class="[activeClass, errorClass]"></div>
//这里似乎只是为了设置class,那我干脆直接写calss,不知道有什么用
data: {
activeClass: 'active',
errorClass: 'text-danger'
}

  3:style的使用

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
<div v-bind:style="styleObject"></div>
//参照上面的对象语法,并且也可以结合返回对象的计算属性使用更加

vue笔记-模板,计算属性,class与style,data属性的更多相关文章

  1. Vue.js 源码分析(四) 基础篇 响应式原理 data属性

    官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...

  2. Intent的属性及Intent-filter配置——Data、Type属性与intent-filter配置

    Data属性通常用于向Action属性提供操作的数据,Data属性接受一个Uri对象,一个Uri对象通常通过如下形式的字符串来表示: content://com.android.contacts/co ...

  3. jquery data属性 attr vs data

    html5的自定义data属性相信大家都不会陌生,有了它你可以绑定所需的数据到指定元素上.然后通过jquery设置.获取数据,简直开心的不行啊.想到设置.获取元素属性值,大家一定首先想到了jquery ...

  4. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  5. 03 . Vue基础之计算属性,组件基础定义和使用

    vue组件 fetch请求组件 fetch XMLHttpRequest是一个设计粗糙的API, 配置和调用方式非常混乱,而且基于事件的异步模型写起来不友好,兼容性不好. <!DOCTYPE h ...

  6. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  7. Vue教程:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  8. Vue.js:计算属性

    ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...

  9. Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...

随机推荐

  1. /etc/rc.d/init.d/iptables: No such file or directory 错误原因

    注:本文转载自cnblogs:一天学点的文章</etc/rc.d/init.d/iptables: No such file or directory 错误原因> RedHat Enter ...

  2. Eclipse搭建.C#和..NET Core环境

    1.在上一篇博客中我介绍了如何使用Eclipse搭建C++.C开发环境,顺带把搭建 .NET Core 和C#也做个介绍.配置任何环境关键是找到要开发语言的编辑器和SDK.eclipse是java开发 ...

  3. js----常用功能

    切割 1. a="ddd" a.substr(0,1) 通过js找子代 document.getElementByClass("ddd").getElement ...

  4. bzoj 2190

    题意:求 题解:这题...数据范围是真小... 研究一下这一表达式,发现gcd(i,j)=1表示i,j互质,那么互质肯定能想到欧拉函数,可是欧拉函数要求j<i,那么我们变化一下:显然原矩阵是对称 ...

  5. inline namespace

    无意中看到C++11中的新特性inline namespace, 先附上官方的解释 Inline namespace The inline namespace mechanism is intende ...

  6. Exchange Server Notes

    以下信息来自Option响应: HTTP/1.1 200 OK Cache-Control: private Allow: OPTIONS,POST Server: Microsoft-IIS/7.0 ...

  7. Visual Studio 2017 error: Unable to start program, An operation is not legal in the current state

    For me, the solution (workaround) is to turn off JavaScript debugging on Chrome, which I believe is ...

  8. jetbrains全系列可用例:IDEA、WebStorm、phpstorm、clion等激活到2099

    破解补丁激活 之前看了好多的其它的方法感觉都不是很靠谱还是这个本人亲试可以长期有效不仅能激活pycharm.jetbrains全系列可用例:IDEA.WebStorm.phpstorm.clion等激 ...

  9. 激活函数的比较,sigmoid,tanh,relu

    1. 什么是激活函数 如下图,在神经元中,输入inputs通过加权.求和后,还被作用了一个函数.这个函数就是激活函数Activation Function 2. 为什么要用激活函数 如果不用激活函数, ...

  10. 转: 解压Assets.car (iOS加密资源)

    今天想获取APP的资源,但是查看xxx.app文件夹里面,缺少了大部分资源.在文件夹里面发现Assets.car这个文件,发现文件很大有40多M,猜想图片资源会不会被压缩到这里面了,所以就网络上查了下 ...