Vue
Vue知识
lxl。。
这个作者很懒,什么都没留下…
展开
-
Vue——第八节:事件处理
1. 事件修饰符.stop:阻止单击事件继续传播.prevent:提交事件不再重载页面.capture:即内部元素触发的事件先在此处理,然后才交由内部元素进行处理.self:即事件不是从内部元素触发的.once:表示只能触发一次.passive:2.3.0新增,提升移动端的性能2.按键修饰符(1) 按键码.enter:回车键.tab:tab键.delete (捕获“删除...原创 2020-04-07 20:48:05 · 146 阅读 · 0 评论 -
Vue——第七节:Class与Style绑定
Class绑定对象语法:如class="{active: isActive}",表示active这个class存在与否将取决于数据属性isActive的truthiness数组语法1.示例如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>&l...原创 2020-04-06 21:23:41 · 149 阅读 · 0 评论 -
Vue——第六节:侦听器
帧听属性Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。但是需要注意,不能滥用watch<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.j...原创 2020-04-06 20:54:42 · 162 阅读 · 0 评论 -
Vue——第五节:计算属性
计算属性用于简单运算,是基于它们的响应式依赖进行缓存的,只要相关响应式依赖发生改变时它们才会重新求值1.示例如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <script sr...原创 2020-04-01 16:16:56 · 114 阅读 · 0 评论 -
Vue——第四节:模板语法
1.v-once通过使用v-once命令,能执行一次性地插值,当数据改变时,插值处的内容不会更新。示例如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" ty...原创 2020-04-01 15:48:21 · 80 阅读 · 0 评论 -
Vue——第三节:列表渲染(v-for)
v-for我们可以用v-for指令基于一个数值来渲染一个列表v-for指令需要使用item in items形式的特殊语法,其中items是源数据数值,而item则是被迭代的数组元素的别名。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></...原创 2020-04-01 14:32:42 · 236 阅读 · 0 评论 -
Vue——条件渲染应用(3个按钮切换)
1.介绍通过点击三个不同的按钮,显示不同内容2. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h...原创 2020-03-25 14:39:07 · 2284 阅读 · 0 评论 -
Vue——第二节:条件渲染(v-if&v-show)
1. v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是true,将提出它的内容作为条件块。 当条件变化时该指令触发过渡效果。示例:该示例中用了v-if来渲染条件,当v-if属性内的值为true时,则会显示:用户类型:VIP;如果值为false时,则不会显示<!DOCTYPE html><html> <...原创 2020-03-24 22:20:39 · 657 阅读 · 0 评论 -
Vue——第一节:初始Vue
1.什么是VueVue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。采用MVVM模式。2.MVVM模式MVVM模式采用MVC模式3.MVC模式(前后端均有此模式)M->model->模式->数据(js变量)V->View->...原创 2020-03-24 21:40:42 · 185 阅读 · 0 评论