![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ES6
CoderOu
一个相信努力就会有结果的程序员,以兴趣驱动技术!
------ CoderOu
展开
-
Vue官网学习(条件渲染 v-if指令)
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。也就是返回v-if的值返回true的时候,这个dom元素会被渲染出来,并且显示,如果返回false,那么这个dom元素将不存在。他与v-if的区别就是dom元素是否存在<div v-if="true">我是内容</div>也可以用 v-else 添加一个“else 块”:<h1 v-if="awesome">Vue is awesome!</h1>.原创 2020-06-28 13:09:15 · 432 阅读 · 0 评论 -
Vue官网学习(Class 与 Style 绑定:一、绑定 HTML Class,)
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。1、对象语法给v-bind:class传入一个对象,如下:<div v-bind:class="{ active: isActive }">.原创 2020-06-25 20:54:33 · 196 阅读 · 0 评论 -
Vue官网学习(计算属性和侦听器:二、侦听器:监听data之下的直属属性以及data下面对象的属性)
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。监听某个属性的变化:(监听data之下的直属属性以及data下面对象的属性)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算属性</t.原创 2020-06-25 17:47:52 · 150 阅读 · 0 评论 -
Vue官网学习(计算属性和侦听器:一、计算属性 vs 方法)
先来看一个例子:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算属性</title> </head> <body> <div id="app"> <div>(计算属性)总分数为 :{{totalScoresC}}</div> <div>(方法)总分数为 :{{原创 2020-06-24 21:46:12 · 153 阅读 · 0 评论 -
Vue官网学习(计算属性和侦听器:一、计算属性)
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>原创 2020-06-24 21:21:59 · 125 阅读 · 0 评论 -
Vue官网学习(模板语法:八、语法糖:v-bind和v-on的缩写)
v-bind 缩写<!-- 完整语法 --><a v-bind:href="url">...</a><!-- 缩写 --><a :href="url">...</a><!-- 动态参数的缩写 (2.6.0+) --><a :[key]="url"> ... </a>v-on 缩写<!-- 完整语法 --><a v-on:click="doSomething"&原创 2020-06-24 13:26:12 · 303 阅读 · 0 评论 -
Vue官网学习(模板语法:七、修饰符:prevent取消事件的默认行为。)
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>修饰符</title></head><body&.原创 2020-06-24 13:20:37 · 424 阅读 · 0 评论 -
Vue官网学习(模板语法:六、动态属性名:Invalid value for dynamic directive argument (expected string or null)异常)
以往我们通过v-bind指令绑定我们已知的属性名,通过v-on指令绑定事件,而这些属性或者事件名都是预先写好的,可能有些时候,我们可能会去动态的改变属性名,并且根据不同情况去操作不同的属性或者事件,按照以往实现起来很难。Vue2.6.0 新增了动态属性这一功能,给了我们很大的便捷:使用方法:v-bind:[attrname]="attrValue";v-on:[eventname]="doSomething";其中:attrname为一个变量,Vue实例中的data属性下面的一个属性名,attr原创 2020-06-24 12:57:20 · 1268 阅读 · 2 评论 -
Vue官网学习(模板语法:五、模板指令)
指令是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:<p v-if="seen">现在你看到我了</p>这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。v-if和v-show的区别是:v-if的值如果为false,原创 2020-06-24 12:36:58 · 114 阅读 · 0 评论 -
Vue官网学习(模板语法:四、模板中使用js表达式)
前面说了{{}}语法,v-bind指令,他们对应的变量都是Vue实例中的值,有时候我们可能需要做一些简单的运算,比如+1或者-1,三目运算符,甚至一些简单的js的api:message.split(’’)等,那么我们是可以对其进行运算的。{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>原创 2020-06-23 13:50:00 · 533 阅读 · 0 评论 -
Vue官网学习(模板语法:三、v-bind指令)
第一节Vue官网学习(模板语法:一、{{}}双大括号语法)我们说到了双大括号语法,他会随着Vue示例中data属性下面的属性名称的值改变而改变,有时候我们也需要一些属性随着业务或者操作而改变。比如disabled属性,readonly属性,src属性,href属性,双大括号语法只能作用在html标签内部,像这种属性的是无法生效的,那么v-bind指令就专门针对这种属性的绑定而生。v-bind:disabled=“btnIsDisabled”v-bind:readonly="inputIsReadon原创 2020-06-23 13:43:27 · 539 阅读 · 0 评论 -
Vue官网学习(模板语法:二、v-html指令)
上节:Vue官网学习(模板语法:一、{{}}双大括号语法说到了双大括号语法,是适用于文本的,他会把内容当成文本,就算是html标签也不例外,但是如果我们的文本是html,又需要有样式,该如何渲染呢?1、v-html指令来了使用v-html修饰的元素,他会对其内容进行解析,并且已html的样式进行输出。写法:v-html=“rawHtml”,其中rawHtml是Vue实例中data属性的变量名:<!DOCTYPE html><html lang="en"><head&原创 2020-06-23 13:27:00 · 476 阅读 · 0 评论 -
Vue官网学习(模板语法:一、{{}}双大括号语法)
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。这是官网对模板的介绍,今天就来学习一下Vue的模板语法:1、文本“Mustache”语法 (双大括号)<span>Messa.原创 2020-06-23 13:16:22 · 12747 阅读 · 2 评论