vue
Czccava
这个作者很懒,什么都没留下…
展开
-
VUE入门(8)
事件处理监听事件可以用v-on指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ co...转载 2019-07-09 11:17:21 · 89 阅读 · 0 评论 -
Vue自定义指令
自定义全局指令例子1:让指定文本框自动获取焦点<!DOCTYPE html><html><head> <meta charset = "UTF-8"> <link rel="stylesheet" type="text/css" href="index.css"> <script src="https://c...原创 2019-07-17 10:14:28 · 116 阅读 · 0 评论 -
Vue动画的使用
动画的作用:提高用户的体验,帮助用户更好的理解页面中的功能。使用过渡类名实现动画动画进入: v-enter:动画进入之前的初始状态 v-enter-to:动画进入之后的结束状态 v-enter-active:动画进入的时间段 PS:第一、第二个是时间点;第三个是时间段。动画离开: v-leave:动画离开之前的初始状态 v-lea...原创 2019-07-19 14:29:35 · 373 阅读 · 0 评论 -
VUE入门(10)组件基础
组件基础基本示例这里有一个 Vue 组件的示例:// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++"...转载 2019-07-12 15:03:23 · 151 阅读 · 0 评论 -
Vue过滤器的应用
时间的格式化1.第一种方法<!DOCTYPE html><html><head> <meta charset = "UTF-8"> <link rel="stylesheet" type="text/css" href="index.css"> <script src="https://cdn.jsdeliv...原创 2019-07-16 15:31:09 · 163 阅读 · 0 评论 -
Vue列表功能
用Vue实现了列表功能,无数据时添加提示,添加item,删除item,按关键字筛选item<!DOCTYPE html><html><head> <meta charset = "UTF-8"> <link rel="stylesheet" type="text/css" href="index.css"> <s...原创 2019-07-16 11:29:12 · 749 阅读 · 0 评论 -
VUE入门(7)
列表渲染用v-for把一个数组对应为一组元素我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法,其中items是源数据数组,而item则是被迭代的数组元素的别名。<ul id="example-1"> <li v-for="item in items"> {{ i...转载 2019-07-05 11:43:10 · 93 阅读 · 0 评论 -
VUE入门(6)
条件渲染v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<h1 v-if="awesome">Vue is awesome!</h1>也可以用v-else添加一个“else 块”:<h1 v-if="awesome">Vue is awesome!</h1>&...转载 2019-07-05 11:24:47 · 89 阅读 · 0 评论 -
VUE入门(5)
Class 与 Style 绑定操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将v-bind用于class和style时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。绑定 HTML Class...转载 2019-07-05 11:19:21 · 210 阅读 · 0 评论 -
VUE入门(4)
计算属性和侦听器计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想...转载 2019-07-05 10:25:41 · 84 阅读 · 0 评论 -
VUE入门(3)
模板语法Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。插值...转载 2019-07-05 10:15:06 · 100 阅读 · 0 评论 -
VUE入门2
每个 Vue 应用都是通过用Vue函数创建一个新的Vue 实例开始的:var vm = new Vue({ // 选项})数据与方法当一个 Vue 实例被创建时,它将data对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。// 我们的数据对象var data = { a: 1 }// 该...转载 2019-07-05 09:38:40 · 101 阅读 · 0 评论 -
VUE入门1
可以创建一个.html文件,然后通过如下方式引入 Vue:<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者:<!-- 生产环境版本,优化了尺寸和速度 --><script s...转载 2019-07-04 16:50:45 · 127 阅读 · 0 评论 -
VUE入门(9)
表单输入绑定基础用法你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。注意:v-model会忽略所有表单元素...转载 2019-07-09 11:42:47 · 77 阅读 · 0 评论 -
Vue实例的生命周期
Vue实例的生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期。生命周期钩子:就是生命周期事件的别名而已。生命周期钩子 = 生命周期函数 = 生命周期事件。根据上面这张图,我们把生命周期函数主要分为三类。1、创建期间的生命周期函数beforeCreate:实例刚在内存中被创建出来,还没有初始化好data和methods属性...原创 2019-07-17 11:20:06 · 127 阅读 · 0 评论