Vue的学习笔记
以下文章皆为观看慕课网https://www.imooc.com/learn/796中“河畔一角”老师的讲解做的笔记,仅供参考。
一、Vue特点
Vue是MVVM的框架,也就是模型视图->视图模型。Vue对数据的操作是直接操作模型里的数据,间接的修改Dom中绑定的数据,模型反向修改Dom中的值。
Vue的三大特点是:易用,灵活,高效。
易用-->渲染比较方便(不用像jquery那样每个去取);
灵活-->渐进式:声明式渲染、组件、路由、状态管理、构建,也就是缺什么补什么。
高效-->16k的gzip,运行大小够小,超快的虚拟DOM,最省心的优化(vue1-->vue2版本的优化,废除了过滤器(js可以做到的就没必要再在Vue上面去做,核心放在高效))。
二、Vue的常用指令介绍
三、创建一个Vue的实例
var vm = new Vue({
el: "#app",
data: {
//定义数据
},
filters: {
//Vue内部定义filters局部过滤器
//过滤器filter 对接口返回的字段进行转换等(比如格式化,字段的不同效果)
},
mounted: function () {
//初始化时执行的方法,可以在这里改变数据,添加方法。类似于jquery的ready,vue实例化完成后需要调用的方法
//1.0版本生命周期的代码是放在ready函数,2.0版本使用mounted函数代替ready,与data和methods同级.
//mounted函数并不能保证实例已经插入文档,所以要用
this.$nextTick(function () {
//保证this.$el已经插入文档
})
},
methods: {
//所有的方法写在这里
}
});
//全局过滤器
Vue.filter();
四、v-for的vue2.0使用与原生js以及Jquery的对比
循环遍历:
(1)js:
obj.forEach(function(value,index){});
(2)jQuery:
$.each(obj,function(index,value){});
(3)vue2.0:
<i v-for="(value,index) in arr"></i>
五、vue-resource小谈
vue-resoure插件主要用于数据交互方面
this.$http.get("请求地址",{请求参数(可选)}).then(function(res)){
//取数据。res返回的数据并不是真正的数据 ,而是由vue封装的,全部,包括 data,header等应该用,res.data获取数据对象
});
六、过滤器的使用
过滤器,全局过滤器的写法;调用过滤器时,加“|”,后面跟过滤器的名字,如果过滤器有参数,用函数写法加括号和参数名。
在html中语法:
<span>{{item.productPrice | formatMoney('元')}}</span>
在js中语法:
//全局过滤器,第一个参数"money"是过滤器的名称,value是回调函数,type是参数
//注意全局的过滤器没有s
Vue.filter("money",function(value,type){
return "¥"+value.toFixed(2) + type;
})
//局部过滤器
new Vue({
el:"#app",
filters:{
formatMoney:function(value){
return "¥"+value.toFixed(2);
}
}
});
七、小知识点
1.可以用typeof item.xxx == 'undefined'来检测属性存不存在。
如果不存在,要么用Vue.set给item全局注册一个checked的属性,赋值为true;
vue.set(target,key,value)
要么用vm.$set局部注册。
vm.$set(target,key,value)
如果存在,item.checked = !item.checked将checked的值取反。
2.@click中不止可以调用函数,也可以写表达式,但表达式要么是一元表达式,要么是三元表达式,不可以出现声明或业务逻辑在里面
3.删除:通过indexOf获取索引,从当前位置开始删除一个元素
var index = this.productList.indexOf(this.curProduct);
this.productList.splice(index,1);
4.js中slice与splice的差别:都是截取数组,slice重新创建一个数组,不影响原来的数组,splice在原先的数组的基础上操作,是会影响原生数组
5.通过computed:{}实时计算
6.关于循环中的选中
<li v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index"></li>
关于不同方式的选中
<li v-bind:class="{'check':isCheck==1}" @click="isCheck=1">配送方式一<li>
<li v-bind:class="{'check':isCheck==2}" @click="isCheck=2">配送方式一<li>
Vue的学习笔记的更多相关文章
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- Vue 新手学习笔记:vue-element-admin 之安装,配置及入门开发
所属专栏: Vue 开发学习进步 说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手架 ...
- Vue.js——学习笔记(一)
Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...
- Vue.js 学习笔记之二:数据驱动开发
在 Vue.js 框架中,与 HTML 页面元素的交互方式没有像原生 JavaScript 接口那么直接,它是通过先在 HTML 元素标签中嵌入一系列类似于普通标签属性的 Vue 指令属性来绑定数据, ...
- Vue.js 学习笔记之三:与服务器的数据交互
显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...
- Vue.js 学习笔记之四:Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
- Vue.js 学习笔记之五:编译 vue 组件
正如上一篇笔记中所说,直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践.主要原因有两个,首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器, ...
- Vue.js——学习笔记
Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...
随机推荐
- Django架站的16堂課
Django架站的16堂課-活用Django+Web+Framework快速构建移动网站 目录 第1堂 网站开发环境的建立 1 1.1 网站的基础知识 1 1.1.1 网站的运行流程 1 1.1.2 ...
- Swift4.0复习访问控制与作用域
1.访问等级: open: 可以继承,可以重写. public: “public 访问等级能用于修饰所有文件作用域的函数.对象.协议.枚举.结构体.类以及各种类型中的属性与方法.用 public 所修 ...
- mysql.yaml
[root@lab2 mysql]# cat mysql.yaml apiVersion: extensions/v1beta1 kind: Deployment metadata: name: my ...
- 常用HTML转义字符,html转义符,JavaScript转义符,html转义字符表,HTML语言特殊字符对照表(ISO Latin-1字符集)
HTML字符实体(Character Entities),转义字符串(Escape Sequence) 为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,> ...
- Sed之大小写转换
使用sed进行大小写转换 大写转小写 echo "ABCD"|sed 's#[A-Z]#\l&#g' 小写转大写 echo "abcd"|sed 's# ...
- MSP430FR6972驱动模块模组调试
1. 说是会进入晶振的中断 #pragma vector=UNMI_VECTOR 2. 打了断点没进入,猜测是串口被世龙修改后,串口波特率不对,重新改回原来的,AT+NATSPEED?一直发送这个命令 ...
- Python:实现图片裁剪的两种方式——Pillow和OpenCV
原文:https://blog.csdn.net/hfutdog/article/details/82351549 在这篇文章里我们聊一下Python实现图片裁剪的两种方式,一种利用了Pillow,还 ...
- clickHouse可视化查询工具
clickHouse以卓越的查询性能著称,目前在大数据的存储和分析领域有广泛应用,目前TreeSoft已支持clickHouse的数据在线查询分析,可以与Mysql,oracle等数据库并存操作. 1 ...
- win10卸载office2010的工具
本来想装一个高版本的office,于是想先卸载老版本的.结果在win10的应用和功能中,愣是没找到安装的office2010,使用360也找不到,没法卸载. 网上搜了一下,找到一个好工具,micros ...
- python format函数/print 函数详细讲解(4)
在python开发过程中,print函数和format函数使用场景特别多,下面分别详细讲解两个函数的用法. 一.print函数 print翻译为中文指打印,在python中能直接输出到控制台,我们可以 ...