Web前端
  1. 首页
  2. Web前端

列表

VueJs 绑定 HTML Class 内联样式在模板里

VueJs 绑定 HTML Class 内联样式在模板里

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
JavaScript 2019年12月30日
VueJs Class 与 Style 绑定 对象语法

VueJs Class 与 Style 绑定 对象语法

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
JavaScript 2019年12月29日
VueJs计算属性和侦听器 计算属性缓存 vs 方法 计算属性的 setter 侦听器

VueJs计算属性和侦听器 计算属性缓存 vs 方法 计算属性的 setter 侦听器

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
JavaScript 2019年12月04日
vuejs修饰符prevent提交事件不再重载页面

vuejs修饰符prevent提交事件不再重载页面

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：<form v-on:submit.prevent="onSubmit">...</form>
JavaScript 2019年12月01日
vuejs v-on 监听focus,onblur,oninput 多个方法案例？

vuejs v-on 监听focus,onblur,oninput 多个方法案例？

vuejs 教程 指令 参数 动态参数代码，vuejs v-on 监听focus,onblur,oninput 多个方法案例； 缩写：<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />​，案例中没有缩写，可以自行尝试；
JavaScript 2019年12月01日
vuejs 教程 指令 参数 动态参数代码

vuejs 教程 指令 参数 动态参数代码

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：
JavaScript 2019年12月01日
VueJS 事件修饰符有哪些？

VueJS 事件修饰符有哪些？

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
JavaScript 2019年11月27日
使用Vuejs v-html 指令 输出真正的 html

使用Vuejs v-html 指令 输出真正的 html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令： <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p>
JavaScript 2019年11月24日
vuejs文本插值 v-once 插值一次案例

vuejs文本插值 v-once 插值一次案例

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： <span>Message: {{ msg }}</span> Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
JavaScript 2019年11月24日
Vuejs实例生命周期钩子api

Vuejs实例生命周期钩子api

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
JavaScript 2019年11月24日
Vuejs数据与方法

Vuejs数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
JavaScript 2019年11月15日
创建一个 Vue 实例非常简单

创建一个 Vue 实例非常简单

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。 当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档 中浏览完整的选项列表。 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：
JavaScript 2019年11月15日
vuejs组件化应用构建

vuejs组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
JavaScript 2019年11月15日