vue知识点散记
1、iphone5微信浏览器里的methods里貌似不兼容 test(){} 写法,只支持test:function(){}
2、v-cloak 防止双括号的闪烁
<div id="app" v-cloak>{{test}} </div>
在style里
[]v-cloak]{display:none;//display:none!important;}
3、computed和watch都有缓存机制 ,{{}}==>差值表达式
4、计算属性的set和get方法
computed:{
fullName:{
get:function(){return this.a+this.b;},
set:function(value){var test=value.split('/');this.a=test[0];this.b=test[1]; }
}
}
vm.fullName='gello/world'
5、vue中的样式
(1)class
<div v-bind:class="{ active: isActive }"></div>
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
<div v-bind:class="classObject"></div>
computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } }
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
(2)style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
<div v-bind:style="styleObject">菜鸟教程</div>
data: {styleObject: {color: 'green',fontSize: '30px'}}
<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
data: {baseStyles: {color: 'green',fontSize: '30px'},overridingStyles: {'font-weight': 'bold'}}
注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。
6、数组的一些方法
vm.list[2]=3 ==>数据虽然变了,但是页面没有动态显示
//下面是有效的
(1)对象操作
Vue.set(vm.userInfo,"address","beijing")
vm.$set(vm.userInfo,"address","beijing")
(2)数组操作
1)变异方法 pop shift unshift。
2)Vue.set(vm.list,1,5) 数组下标为1的把值改成5
3)vm.$set(vm.userInfo,2,10)
4)数组的引用
7、:is的用法
通常情况下table->tr->td ,如果把tr用子组件代替的话,有的浏览器就可能不是这个顺序
vue知识点散记的更多相关文章
- 【vue知识点】1)vue生命周期
[vue知识点]2)vue登录认证
- vue知识点汇总
一.学习vue必须了解的几个知识点 1.node.js介绍 node是一个让JavaScript运行在服务端的开发平台,使用JavaScript也可以开发后台服务.说明白些它仅仅是一个平台,我们使用 ...
- vue知识点13
知识点归纳整理如下: 组件 component 1.页面中的一部分,可以复用, 本质上是一个拥有预定义选项的一个 Vue 实例 2.使用 1)定义 ...
- vue知识点12
知识点归纳整理如下: 1. 数组用下标改变,或者对象增加属性,这样的改变数据 是不能触发视图更新的,要用 Vue.set(对象,属性,值) 或this.$set(对象,属性,值) 2. this. ...
- Vue知识点
1. Vue生命周期图示: 2.插值: 文本:{{ message }}: 纯html:v-html="xxx"; 属性:v-bind:id="xxx"; 使用 ...
- Vue面试中,经常会被问到的面试题/Vue知识点整理
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...
- Vue知识点(面试常见点)
v-bind和v-model的区别 1.v-bind用来绑定数据和属性以及表达式,缩写为':' 2.v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 什么是 mvvm? MVV ...
- 【前端vue开发】vue知识点超链接学习笔记
1.如何去除vue项目中的 # --- History模式: https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 2.三分钟教你写个Vue组件: ...
- Vue知识点超快速学习
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
随机推荐
- 2.12 学习总结 之 表单校验插件validate
一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...
- mysql 安装完以后没有mysql服务
用管理员身份打开命令控制台(cmd),然后将mysql的安装文件的路径打开(bin文件的路径),然后再路径下打上mysqld.exe -install, 会出现提示 Service successf ...
- css的手机适配
在html篇里提到设置视口宽度和设备宽度,固定的meta配置就是写死的,==死记硬背== 应该清楚的是手机端的适配应该克服的难题就是宽度根据手机屏幕的大小变化,而高度却没有办法跟随比例变化,也就是宽高 ...
- LabVIEW面向对象的ActorFramework(1)
本系列文章主要阐述以下几个问题: (1)什么是面向对象编程? (2)为什么要学习面向编程? (3)LabVIEW面向编程学习为什么有点难? (4)LabVIEW面向对象的编程架构:Actor Fram ...
- 019、MySQL取本季度开始时间和本季度结束时间
SELECT QUARTER ( adddate( dy, ) ) QTR, date_add( dy, INTERVAL MONTH ) Q_start, adddate( dy, ) Q_end ...
- 007-PHP变量和函数相互转换
<?php function write($text) //定义function write()函数 { print($text); //打印字符串 } function writeBold($ ...
- socket简单调用
下载 Client using System; using System.Collections.Generic; using System.Linq; using System.Text; //导入 ...
- HDU - 6130 Kolakoski (打表)
题意:由1,2,2,1,1,2,1,2,2,1,2,2,1,1,2,1,1,2,2,1,……合并可得1,22,11,2,1,22,1,22,11,2,11,22,1,再由每个数的位数可得新序列,推出新 ...
- cf754 754D - Fedor and coupons
2个多小时,弱智了..(连A都做不对,就不要做D了(迷)) #include<bits/stdc++.h> #define lowbit(x) x&(-x) #define LL ...
- Python基础笔记:list和tuple
list 与 tuple 就类似于C语言中的数组,list 与 tuple 的区别就是list 可修改,而tuple不可修改: list用法示例: >>> s=[] >> ...