Vue
yasuofenglei
这个作者很懒,什么都没留下…
展开
-
Vue入门-组件基础
组件基础基本示例组件的复用data 必须是一个函数组件的组织通过 Prop 向子组件传递数据单个根元素监听子组件事件使用事件抛出一个值在组件上使用 v-model通过插槽分发内容动态组件解析 DOM 模板时的注意事项基本示例这里有一个 Vue 组件的示例:// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } },原创 2020-10-20 10:43:49 · 237 阅读 · 0 评论 -
Vue入门-表单输入绑定
表单输入绑定基础用法文本多行文本复选框单选按钮选择框单选时多选用 v-for 渲染的动态选项值绑定复选框单选按钮选择框的选项修饰符.lazy.number.trim在组件上使用 v-model基础用法你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked原创 2020-10-19 17:39:40 · 132 阅读 · 0 评论 -
Vue入门-事件处理
事件处理监听事件事件处理方法内联处理器中的方法事件修饰符按键修饰符按键码系统修饰键.exact 修饰符鼠标按钮修饰符为什么在 HTML 中监听事件?监听事件可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been cli原创 2020-10-19 17:03:07 · 253 阅读 · 0 评论 -
Vue入门-列表渲染
列表渲染用 v-for 把一个数组对应为一组元素在 v-for 里使用对象维护状态数组更新检测替换数组注意事项显示过滤/排序后的结果在 v-for 里使用值范围在 上使用 v-for在组件上使用 v-for用 v-for 把一个数组对应为一组元素我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。<ul id="example-1"> &原创 2020-10-19 16:43:10 · 730 阅读 · 0 评论 -
Vue入门-条件渲染
条件渲染v-if在 元素上使用 v-if 条件渲染分组v-elsev-else-if用 key 管理可复用的元素添加keyv-showv-if vs v-showv-if 与 v-for 一起使用v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy1值的时候被渲染。<h1 v-if="awesome">Vue is awesome!</h1>也可以用 v-else 添加一个“else 块”:<h1 v-if="awesome"原创 2020-10-19 16:03:51 · 97 阅读 · 0 评论 -
Vue入门-Class 与 Style 绑定
Class 与 Style 绑定绑定 HTML Class对象语法数组语法三元表达式用在组件上绑定内联样式数组语法自动添加前缀多重值操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。绑定 HTML Class原创 2020-10-19 15:33:57 · 124 阅读 · 0 评论 -
Vue入门-计算属性和侦听器
计算属性和侦听器计算属性基础例子计算属性缓存 vs 方法计算属性 vs 侦听属性计算属性的 setter侦听器计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻原创 2020-10-19 15:08:28 · 155 阅读 · 0 评论 -
Vue入门-模板语法
模板语法插值文本v-once原始 HTMLAttribute使用 JavaScript 表达式指令参数动态参数对动态参数的值的约束对动态参数表达式的约束修饰符缩写v-bind缩写v-on 缩写Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重原创 2020-10-19 14:42:01 · 83 阅读 · 0 评论 -
Vue入门-Vue实例
Vue实例创建一个Vue实例数据与方法Object.freeze()实例property与方法生命周期创建一个Vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:var vm = new Vue({ // 选项})虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。当创建一个 Vue 实例时,你可以传入一个选项对象。作为参考,你也可以在 API文原创 2020-10-19 13:57:38 · 58 阅读 · 0 评论 -
Vue入门-入门案例
入门案例声明式渲染条件 v-if循环 v-for处理用户输入 v-onVue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:声明式渲染文本插值<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})除了文本插值,我们还可以像这样来绑定元素 attribute:<原创 2020-10-19 13:05:27 · 133 阅读 · 0 评论 -
Vue入门-HelloWorld
目录Vue简介Vue安装Vue.js下载CDNNPM命令行工具 (CLI)helloworld案例Vue简介Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。本教程基于2.x版本学习Vue需要了解关于 HTML、CSS 和 JavaScript 的知识。Vue安装不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时。使用 Vue.js 最简单的方法是直接下载并用 script 标签引入。Vue.js下载开发环境版下载原创 2020-10-19 12:07:36 · 256 阅读 · 0 评论