Vue笔记整理——第一天
1.为什么学习Vue?
提高开发效率。
提高效率历程:原生js——>jq(解决兼容性)——>前端模板引擎——>Vue.js(减少DOM操作,注重数据业务逻辑)。
2.框架与库的区别?
框架:是一个完整解决方案,一旦选择使用,中途再想改只能重构;
库:用于实现小功能,随时可切换其他库。
3.MVC和MVVM?
MVC:MVC即Model、View、Controller即模型、视图、控制器;
MVVM:属于前端视图层的分层开发思想,把页面分成M(model:保存每个页面单独的数据),V(view:每个页面html结构),VM(是M与V的调度者,提供数据的双向绑定)。
4.怎么使用Vue?
第一步:引入vue.js文件
第二步:构造一个Vue的实例对象
第一步:
<script src="vue-2.4.0.js"></script>
第二步:
<script>
var vm=new Vue({
el:'#app',
data:{ } });
</script>
5.Vue指令
(1)v-cloak——解决插值表达式闪烁问题(由于请求vue.js需要一定时间,可能直接将未渲染数据的内容显示出来)
(2)v-text——直接v-text=" "使用
v-cloak与v-text的区别:v-text没有闪烁问题;但是会覆盖原本的内容
(3)v-html——能解析html标签(也会覆盖原本内容)
(4)v-bind——用于绑定属性(v-bind:属性=“ ”或缩写:属性=“ ”)
可使用v-bind绑定属性来设置样式
1.1绑定class属性:v-bind:class="['类名']"
1.2绑定style设置内联样式:v-bind:style="{'color':'red'}"
(5)v-on——用于事件绑定:v-on:click="函数名"或缩写@click="函数名"
(6)v-model——唯一一个实现双向绑定的指令(只能用于表单元素:input select checkbox textarea)
(7)v-for——用于遍历
1.1遍历数组:v-for="item in 数组名",v-for="(item,i) in 数组名",其中item为每项的值,i为索引
1.2遍历对象:v-for=“(val,key) in 对象名” ,v-for=“(val,key,i) in 对象名”,其中val为值,key为键,i为索引
1.3遍历对象数组
1.4遍历数字:v-for="count in 数值名",数字的迭代是从1开始的
(8)v-if与v-show区别
v-if:每次都会重新删除或者创建元素,较高切换性能消耗
v-show:不会对dom进行删除或创建操作,而是切换display:none,有较高渲染消耗
6.事件修饰符
(1)stop——阻止冒泡
(2)prevent——阻止浏览器默认行为(如超链接跳转)
(3)capture——加事件侦听器时使用事件捕获
(4)self——只有点击自身时才触发
(5)once——只能触发一次
*stop与self的区别:stop直接阻止冒泡的发生,self是保证自身不被点击时不触发,但依然会向外继续冒泡。
Vue笔记整理——第一天的更多相关文章
- 用Python玩数据-笔记整理-第一章
第一个程序:print >>>print("Hallo World!") >>>Hallo World! mystring = "Ha ...
- Cocos2dx 学习笔记整理----第一个项目
接上一节, 进入新建的项目下面的proj.win32下面,找到项目名.sln文件(我的是game001.sln),双击会通过VS2010打开.(当然,你装了VS什么版本就是什么版本) 将你的项目设为启 ...
- Java学习笔记整理第一章 java基本数据类型、修饰符、运算符
Java关键字: Java关键字是电脑语言里事先定义的,有特别意义的标识符,有时又叫保留字,还有特别意义的变量.Java的关键字对Java的编译器有特殊的意义,他们用来表示一种数据类型,或者表示程序的 ...
- 用Python玩数据-笔记整理-第一章-练习与测试
编程题: 简单的输入输出:编程实现输入姓.名的提示语并接受用户输入,并单独显示姓.名和全名,执行效果如下所示: Input your surname:ZHANG Input your firstnam ...
- 【vue.js权威指南】读书笔记(第一章)
最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...
- JS第一周学习笔记整理
目录 JS正式课第一周笔记整理 JS正式课第一周笔记整理 webstorm : 代码编辑器 浏览器: 代码解析器: Git : 是一个工具;用于团队协作开发项目管理代码的工具:在工作中用git.svn ...
- NPM 学习笔记整理
NPM 学习笔记整理 阅读 550,2017年06月04日 发布,来源:blog.ihoey.com 什么是 NPM npm 之于 Node ,就像 pip 之于 Python , gem 之于 Ru ...
- Stealth视频教程学习笔记(第一章)
Stealth视频教程学习笔记(第一章) 本文是对Unity官方视频教程Stealth的学习笔记.在此之前,本人整理了Stealth视频的英文字幕,并放到了优酷上.本文将分别对各个视频进行学习总结,提 ...
- 从0开始学Swift笔记整理(五)
这是跟在上一篇博文后续内容: --Core Foundation框架 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Sw ...
随机推荐
- 浏览器虚拟过程IP插件
浏览器虚拟过程 这是个插件在调用API时候结合使用,比如调用大量IP去点击http://www.opew.cn和http://www.gtev.cn function QMPlugin.gbip() ...
- HDU 1522 Marriage is Stable 稳定婚姻匹配
http://acm.hdu.edu.cn/showproblem.php?pid=1522 #include<bits/stdc++.h> #define INF 0x3f3f3f3f ...
- linux尝试登录失败后锁定用户账户的两种方法
linux尝试登录失败后锁定用户账户的两种方法 更新时间:2017年06月23日 08:44:31 作者:Carey 我要评论 这篇文章主要给大家分享了linux尝试登录失败后锁定用户账 ...
- Swift - 修改导航栏“返回”按钮文字和图标 /手势冲突解决/响应范围
iOS11之前 修改导航栏“返回”按钮文字,图标 https://blog.csdn.net/u012701023/article/details/50264265 iOS11 完美解决导航栏按钮偏移 ...
- js/jquery遇到的坑总结
1.“removeAttribute is not a function” error message 原因以及解决方法:removeAttribute is a JavaScript DOM fun ...
- nginx访问502 gateway,*1 connect() failed (111: Connection refused) while connecting to upstream
安装好nginx,php环境后,配置虚拟主机,结果访问后就报502 gateway,查看日志文件后,显示错误如下: 2019/04/29 16:24:39 [error] 19433#19433: * ...
- Mapnik 3.0.20编译安装
1. 确定epel安装 yum install -y epel-release 2. 按照<CentOS7.2部署node-mapnik>一文中的步骤,手动安装 gcc-6.2.0 和 b ...
- 记一次mac下使用mamp集成环境配置lumen项目自定义域名遇到的花样问题
1.安装好mamp集成环境,自行百度. 2.从公司项目版本库里将项目克隆到本地. 好了,开始配置自定义域名来访问项目,以下是遇到的问题集锦... 1.web服务器使用的nginx,配置完域名访问报40 ...
- Hello The Merciless World!
这里是一名FJ蒟蒻OIer的Blog,ID在上面自己不会看嘛QAQQQ是GldHkkowo(很随性的名字w 联系方式:QQ:735900335 加 Q Q 看 蒟 蒻 WA 题 爱好? 死宅的爱好是什 ...
- 初学html,任务1:一个简单html页面,要求:内容页面装一篇文章 用html来分段
这是主要内容部分,用html实现版块分布. 接下来是样式部分. 让页面所有元素的padding和margin都设置为0 : 否则加入一张大的覆盖的背景图片后,会由于浏览器的缘故,图片周边有白边: 设置 ...