Vue
Vue学习内容
weixin_41450557
这个作者很懒,什么都没留下…
展开
-
全局配置接口的根域名
在制作多个页面时会有多次ajax请求,如果需要更改根路径就相对麻烦,找到一个较好的需要看官方文档 vue-resource apiVue.http.option.root=url//如果我们通过全局配置请求数据接口;根域名,在每次单独发起http请求的时候,请求的url路径应该以相对路径开头,前面不能带/,否则不会使用根路径的url拼接...原创 2019-11-15 10:48:53 · 460 阅读 · 0 评论 -
发送数据请求
vue-resourcevue-resource依赖与Vue,所以要注意导入顺序,先导入Vue包再导入vue-resource包,利用this.$http.get/post...来发起get、post请求。常见的请求方式:getpostjsonpthis.$http.get("url").then(function(res){ console.log(res)}...原创 2019-11-15 09:47:54 · 175 阅读 · 0 评论 -
生命周期函数
生命周期首先创建一个新的Vue实例 表示,初始化了一个Vue空实例对象,这时候,这个对象身上只有默认的一些生命周期函数和默认的事件,其他的东西都未创建在beforeCreate生命周期函数执行的时候,data和method中的数据还没有初始化。 在create中,data和methods都已经被初始化好了,如果调用methods中的方法或者操作data中的数据,最早只能在created中操...原创 2019-11-14 11:25:00 · 199 阅读 · 0 评论 -
Vue中绑顶key值的作用
Vue通过diff算法可以不直接操作DOM元素,值操作数据就可以重新渲染页面,避免了重排与重绘diff的核心在于两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构 统一层级的一组节点,他们可以通过唯一的Id进行区分当某一层有许多相同的节点的时候,例如列表节点,想在中间插入某一节点,diff算法一般是,把c更新成F如果利用key值给每个节点做唯一标识,di...转载 2019-11-07 17:00:31 · 254 阅读 · 0 评论 -
v-if和v-show的使用和区别
v-if=“flag”,当flag为false时,对应的该元素被移除;(每次都会重新删除或创建元素),有较高的切换性能消耗v-show=“flag”,当flag为false时,对应的原色dispaly:none(每次不会重新删除或创建元素,只是切换了display:none),有较高的初始渲染消耗,其中display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失...原创 2019-11-06 20:33:07 · 141 阅读 · 0 评论 -
v-for
1、循环对象数组,数组中可存储对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script>&l...原创 2019-11-06 20:22:47 · 68 阅读 · 0 评论 -
Vue中的使用样式
使用class样式1、使用数组的方式其中对象的属性可带引号也可以不带引号 直接传递一个数组,利用v-bind作为数据绑定,v-bind:class="[ 'thin','red']" 可以利用数组的方式使用三元表达式;v-bind:class="[ 'thin','red',flag?'active':' ']"; 利用数组的方式来改变元素的样式,...原创 2019-11-06 19:46:36 · 116 阅读 · 0 评论 -
vue中的指令
v-bind:提供用于绑定属性的指令,简写“:”,后面跟上要绑定的属性。v-bind可以写合法的js表达式。v-on事件绑定机制,简写:“@”事件修饰符:stop阻止冒泡; prevent阻止默认事件; capture添加事件监听器时使用事件捕获模式; self只当事件在该元素本身(biubiu不是子元素)触发时触发回调;只有点击当前函数的时候才触发当前函数 once事件只...原创 2019-11-06 11:43:40 · 100 阅读 · 0 评论 -
屏闪问题
在简单项目中,网络较慢时,vue.js还在加载,导致vue来不及渲染,这事原页面就显示原始页面,可以通过v-cloak来解决这个问题。其中js不变,在div中加入v-cloak,将[v-cloak]的样式中的display设置为none;<head> <meta charset="UTF-8"> <meta name="viewport" c...原创 2019-11-05 11:59:35 · 159 阅读 · 0 评论 -
MVVC模式
vue中的MVVC模式分为:Model层,View层和VueModel层View层:视图层,在前端开发中就是DOM层,主要作用就是给用户展示各种信息。Model层:数据层,数据可能是我们固定的死数据,更多的是来自服务器,从网络请求下来的数据。VueModel层:视图模型层,它是视图层和数据层的桥梁,一方面实现了Data Binding,即数据绑定,将Model的改变实时的反应到View...原创 2019-11-05 11:10:03 · 3991 阅读 · 1 评论