Vue
关注
分享
扫一扫
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
西瓜咬人啦
唯有热爱，可低岁月漫长。
展开
-
12.Vue生命周期
Vue8个生命周期顺序生命周期1beforeCreate(创建前)2created(创建后)3beforeMount(载入前)4mounted(载入后)5beforeUpdate(更新前)6updated(更新后)7beforeDestroy(销毁前)8destroyed(销毁后)1. 代码<!DOCTYPE html><html lang="en"><head> <原创 2020-10-21 09:47:33 · 252 阅读 · 2 评论 -
11.Vue双向数据绑定
1. 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl原创 2020-10-20 16:59:17 · 153 阅读 · 0 评论 -
10.Vue属性绑定指令
1. v-bind使用动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。2. 代码<!DOCTYPE html><html原创 2020-10-20 16:55:38 · 367 阅读 · 0 评论 -
9.Vue循环与if指令
1. v-for指令可以遍历字符串，数组，对象，对象数组等2. 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con原创 2020-10-20 16:50:30 · 329 阅读 · 0 评论 -
8.Vue事件修饰符
1. 方法@click…stop 调用event.stopPropagation()：event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。@click.prevent 调用event.preventDefault() 方法阻止元素发生默认的行为1. 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-10-20 16:38:15 · 178 阅读 · 0 评论 -
7.Vue事件绑定指令参数
1. 方法调用时实际传入的参数接受的实际参数有很多种，在下面代码中给了示例2. 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati原创 2020-10-20 16:24:42 · 276 阅读 · 0 评论 -
6.Vue事件绑定指令
1. v-on指令.stop - 调用 event.stopPropagation()。.prevent - 调用 event.preventDefault()。.capture - 添加事件侦听器时使用 capture 模式。.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。.native - 监听组件根元素的原生事件。.once - 只触发一次回调。.left - (2.2.0) 只当点击原创 2020-10-20 16:18:00 · 1304 阅读 · 0 评论 -
5.Vue延迟加载效果指令
1. v-cloak当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题2. 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2020-10-20 11:17:45 · 990 阅读 · 0 评论 -
4.Vue基础指令
1. 基础指令指令解释v-text等价于插值表达式 更新元素是 textContentv-html此标签使用innerHTML来更新，能解析htmlv-pre用于限定当前标签内的vue语法不被执行v-once限制当前标签内的vue语法只执行一次2. 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me原创 2020-10-20 11:02:33 · 112 阅读 · 0 评论 -
3.Vue插值表达式
1.插值表达式插值表达式是Vuejs中实现数据渲染到页面方式，不用进行dom操作可以直接将数据从模型到视图。插值表达式就是{{ }}，括号里面可以执行简单的js代码 。将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果。2.插值表达式插值表达式支持简单的语法操作解释常规变量number，string，boolean等四则运+，-，*，/,%逻辑运算或与非三目运算全局函数{{ Math.random() }}对象{{ {原创 2020-10-20 10:49:51 · 4611 阅读 · 1 评论 -
2.Vue的基本使用
只是基于mvvm使用,不进行模块化开发不需要安装，只需要引入Vue.js文件即可属性解释vm.$el获取Vue实例关联的DOM元素；vm.$data获取Vue实例的data选项（对象）vm.$options获取Vue实例的自定义属性（如vm.$options.methods,获取Vue实例的自定义属性methods）vm.$refs获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM.原创 2020-10-20 09:54:27 · 117 阅读 · 0 评论 -
Vue中的MVVM模式详解
MVVM模式简介 MVVM旨在利用WPF中的数据绑定函数，通过从视图层中几乎删除所有GUI代码（代码隐藏），更好地促进视图层开发与模式其余部分的分离。不需要用户体验（UX）开发人员编写GUI代码，他们可以使用框架标记语言（如XAML），并创建到应用程序开发人员编写和维护的视图模型的数据绑定。角色的分离使得交互设计师可以专注于用户体验需求，而不是对业务逻辑进行编程。这样，应用程序的层次可以在多个工作流中进行开发以提高生产力。即使一个开发人员在整个代码库上工作，视图与模型的适当分离也会更加高效，因为基于最原创 2020-08-09 18:04:13 · 5579 阅读 · 1 评论