数据和方法

  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. 银联支付Java开发

    注:原来来源于: <  银联支付Java开发  > 银联的demo写的不错,基本上可以直接使用. 首先是对acp_sdk.properties的内容修改,注意这个文件的文件名不能进行修改. ...

  2. Confluence 6 降级你的许可证

    如果你决定降级你 Confluence 的许可证而削减你的许可证开支,你需要确定当前已经直排的用户许可证数量(在用户许可证页面中)要少于你希望应用的新的许可证的允许用户数量,在你应用新许可证的时候. ...

  3. Guideline 5.2.1 - Legal - Intellectual Property 解决方案

    最近在上架公司公司项目的时候遇到这个问题什么5.2.1 然后去了解发现最近不少人都遇到了这个问题.先说一下 我上架的APP是一个医疗的APP然后说需要什么医疗资质,估计是账号的公司资质不够吧.后面和苹 ...

  4. ctrl + alt + T无法启动终端

    kill -9 -1重新进入即可

  5. laravel 中CSS 预编译语言 Sass 快速入门教程

    CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...

  6. java内部类和异常类的概念

    1.内部类的外嵌类的成员变量在内部类中任然有效,内部类中的方法也可以调用外嵌类中的 方法,内部类中不可以声明类的变量和方法,外嵌的类体可以用内部类声明对象,作为外嵌类的成员.内部类仅供他的外嵌类使用. ...

  7. light1236 素数打表,质因数分解

    不知道为什么会错 /* 求出 lcm(i,j)==n 的对数, 分解质因数,p1^e1 * p2^e2 * p3^e3 那么 i,j中必定有一个数有e1个p1因子,另一个任意即可 那么最终的结果就是 ...

  8. python字符编码和文件处理

    一.了解字符编码的知识储备 1.文本编辑器存取文件的原理(nodepad++,python,word) 打开编辑器就打开了启动了一个进程,是在内存中的,所以,用编辑器编写的内容也都是存放于内存中的,断 ...

  9. IDEA创建第一个项目详细过程

  10. bootstrap 三个文件的引入

    <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.co ...