Vue基础(一)---- 模板语法
1、基本理解
Vue其实是一个渐进式JavaScript框架,封装好了一些方法,不再需要操作通过操作DOM,在相同的目标下能够更快的编写代码。
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
易用:熟悉HTML、CSS、JavaScript知识后,可快速上手Vue
灵活:在一个库和一套完整框架之间自如伸缩
高效:20kB运行大小,超快虚拟DOM
2、Vue基本使用
el:元素的挂载位置(值可以是CSS选择器或者DOM元素)
data:模型数据(值是一个对象
Vue代码------(经过Vue框架的编译过程)-------原生js代码
3. Vue模板语法
3.1 差值表达式
比如:<div>{{msg}}</div>
注意:插值表达式在浏览器频繁刷新的时候,会出现“闪动”问题(显示花括号和内容,然后迅速替换为对应的数据----这也是Vue的解析方式)
解决办法:
v-cloak指令的用法:
> 1、提供样式
> 2、在插值表达式所在的标签中添加v-cloak指令即可解决
<div v-cloak>{{msg}}</div>
背后的原理:先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果
3.2 指令
v-cloak
v-text
v-html
v-pre
如何理解响应式(比如在VScode编辑器中修改数据,实际浏览器上面的显示也会跟着变化):
> html5中的响应式----(屏幕尺寸的变化导致样式的变化)
> 数据的响应式-------(数据的变化导致页面内容的变化
v-once
<div v-once>{{info}}</div>
只编译一次,显示内容之后不再具有响应式功能,即使在VScode编辑器中修改数据,实际浏览器上面的显示也不会再变化
应用场景:如果显示的信息后续不需要再修改,可以使用v-once,这样可以提高性能。
v-show
> 共同点:
v-if 和 v-show 都是通过判断绑定数据的 true\false 来控制元素的显示和隐藏。
> 不同点:
v-if 只有在判断为 true 的时候才会对数据进行渲染,false 的时候把包含的代码进行删除。
除非再次进行数据渲染,v-if 才会重新判断。可以说是用法比较倾向于对数据一次操作。
v-show 是无论判断是什么都会先对数据进行渲染,只是 false 的时候对节点进行 display:none 的操作。
所以再不重新渲染数据的情况下,改变数据的值可以使数据展示或隐藏。
> 用法推荐:
v-if 更适合于带有权限的操作,渲染时判断权限数据,有则展示该功能,没有则删除。
v-show 更适合于日常使用,可以减少数据的渲染,减少不必要的操作。
综上,v-if 有更高的切换消耗,而 v-show 有更高的初始渲染消耗。
因此,如果需要频繁切换 v-show 较好(已经加载,只是通过display:none/block 控制显示/隐藏而已),如果在运行时条件不大可能改变,更倾向功能权限性的话 v-if 较好。
v-model
1、修改页面会影响到数据
2、修改数据会影响到页面
v-on
直接绑定函数名称 <button v-on:click='say'>Hello</button>
或者简写 <button @click='say'>Hello</button>
修改为:如果事件绑定函数调用,需要传递事件对象,那么必须作为最后一个参数传递,名称必须是$event;不需要可以不传
console.log(event.target.innerHTML)
----> 得到 “ 点击2 ”
v-bind
>属性绑定:
v-bind指令用法 <a v-bind:href='url'>跳转</a>
缩写形式 <a :href='url'>跳转</a>
v-model的低层实现原理分析
>样式绑定
v-for
key的作用:帮助Vue区分不同的元素,从而提高性能
v-if
v-else-if
v-else
v-slot
较少使用
修饰符
事件修饰符
.stop 阻止冒泡<a v-on:click.stop="handle">跳转</a>
.prevent 阻止默认行为<a v-on:click.prevent="handle">跳转</a>
按键修饰符
.enter 回车键<input v-on:keyup.enter='submit'>
------------比如此处的 submit 函数直接congsole.log(this.uname)
.esc 退出键<input v-on:keyup.delete='handle'>
自定义修饰符
全局config.keyCodes 对象
规则:自定义按键修饰符名字是自定义的,但是对应的值必须是按键对应event.keyCode值
Vue.config.keyCodes.f1 = 112
案例:
Tab选项卡
最新文章
- 【二分】POJ 2109
- Hadoop 集群搭建
- 用多itemtype的具有addHeaderView的recyclerview,还是scrollview?
- ffmpeg中的sws_scale算法性能测试
- javascript 基础1第11节
- Linux进程间通信——使用数据报套接字
- javascript模块
- java读取配置文件的几种方法
- Eclipse Bug: Unhandled event loop exception No more handles
- 博客发在oschina
- MFRC522
- bzoj 4501 旅行
- Day10 空时编码理论之无线信道、分集和复用
- Eclipse——手把手教新手安装Eclipse
- 2018 EC-Final 部分题解 (A,J)
- QT---实现舒尔特方格(零基础入门)
- Ubantu里面的Sublime Text3不支持中文的解决办法
- wordpress4.4+版本自动生成一个768w像素缩略图的解决办法
- 初识asp
- 运用CSS改进网站设计的3个技巧
热门文章
- PHP get_defined_vars() 函数
- PHP atan2() 函数
- CF R 630 div2 1332 F Independent Set
- MySQL的undo/redo日志和binlog日志,以及2PC
- Nginx的文章推荐
- OpenCL Kernel设计优化
- python6.3类的继承与多态
- Spring Security学习笔记一
- 用 Python 制作一个艺术签名小工具,给自己设计一个优雅的签名
- application.yml使用@符合问题:&#39;@&#39; that cannot start any token. (Do not use @ for indentation)