(tips:感谢您点击我的文章,并且阅读,
本人非科班出生,所学知识是网上找的,若有理解错误,望大佬能够指出, )
Vue概述
Vue:渐进式JavaScript框架
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
Vue 的优点:
- 易用:熟悉HTML、CSS、 JavaScript知识后,可快熟上手
- 灵活:在一个库和一套完整框架之间自如伸缩
- 高效:20kb运行大小,超快虚拟DOM
Vue基本使用
Vue的基本使用步骤
- 提供需要填充数据的标签
- 引入Vue.js
- 把vue的data属性内的 key放到对应的标签位置
-
实例参数分析
- el:元素的挂载位置(值可以是css选择器或者DOM元素)(把数据关联到什么位置)
- data:模型数据:(值是一个对象)
-
插值表达式
- 将数据填充到HTML标签中
- 插值表达式支持基本的计算操作,
- Vue代码运行原理
- 概述编译过程的概念(Vue语法→原生语法)
- Vue代码→执行→通过Vue框架翻译→获取原生语法→浏览器运行框架翻译好的代码,
Vue模板语法
如何理解前端渲染?
- 把数据填充到HTML标签中 通过ajax 获取后端数据 填充到Vue模板,最后展示出来,这个过程就是前端渲染
前端渲染的方式
- 原生JS拼接字符串
- 使用前端模板引擎
- 使用Vue特有的模板语法
模板语法概述
- 插值表达式
- 指令
什么是指令?
- 什么是自定义属性?
- 指令的本质就是自定义属性
- 指令的格式:以v-开始(比如v-on ,v-cloak v-once)
v-cloak指令
- v-cloak指令的用法
1.提供样式(style)
[v-cloak]{ display:none;}
2.在插值表达式所在的标签中,添加v-cloak指令
- 插值表达式存在的问题:如果在浏览器很卡的情况下,会先出现mustache语法的 {{messsage}}
- 何解决该问题:使用v-clock指令
- 先通过样式隐藏内容,然后通过内存中进行值的替换好之后,再显示最终的结果
v-text 填充纯文本
* 相比插值表达式更加简洁
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200308094802590.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjEyMDEz,size_16,color_FFFFFF,t_70)
v-html 填充HTML片段
* 存在安全问题
* 本网站内部数据可以使用,来自第三方的数据不可用
v-pre 填充原始信息
- 显示原始信息,跳过编译过程,
例:
正常 {{msg}} 会渲染成 你好
加了v - pre
v-once
- v-once只编译一次
- 显示内容后不在具有响应式的功能
- 使用v-once的应用场景,如果显示的信息后续不需要在修改,那么就可以使用v-one, 这样可以提高性能
v-model指令
- 当用户修改前端数据时,v-model会将后台数据也一起修改
-
数据响应式
- 如何理解数据响应式
①. html5中的响应式(屏幕尺寸的变化导致样式的变化)
②. 数据的响应式(数据的变化导致页面内容的变化) - 什么是数据绑定
①. 数据的绑定:将数据填充到标签中
- 如何理解数据响应式
-
双向数据绑定
- 双向数据绑定是什么?
- 数据模型和视图之间的双向绑定。
- 当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化;可以这样说用户在视图上的修改会自动同步到数据模型中去,数据模型也是同样的变化。
- 双向数据绑定的优点:无需和单向数据绑定那样进行CRUD(Create,Retrieve,Update,Delete)操作, 双向数据绑定最常应用在就表单上,这样当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户输入好的数据,并放到数据模型中了。
- 简单的说就是
- 一个是数据到前端页面进行展示
- 用户修改页面内容,影响模型数据
- (二者结合就是 双向数据绑定)
- 双向数据绑定是什么?
MVVM
- M(model) 模型 (提供数据)
- v(view) 视图 (提供视图模型)
- VM(View-Model) 两者结合
事件绑定
Vue 如何处理事件
- v-on指令
<input type= 'button' v-on:click='num++'/>
- v-on的语法糖(简写)
<input type= 'button' @click='num++'/>
事件函数的调用方式
- 直接绑定函数名称
<input type = 'button' v-on:click='say' value='你好'/>
- 调用函数
<input type = 'button' v-on:click='say()' value='你好'/>
事件函数参数传递- 普通参数和事件对象
<input text='button' @click='say($event)' value="说你好"/>
<input text='button' @click='say('sayHi',$event)' value="说你好"/>
- 普通参数和事件对象
- 事件绑定- 参数传递
- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数,
- 如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递, 并且事件对象的名称必须是$even
事件修饰符
-
stop 被修饰的标签将会阻止冒泡
<a @cilick.stop="handle">跳转<a/>
-
pevent 被修饰的标签将会阻止默认行为
<a @cilick.prevent="handle">跳转<a/>
-
once 被修饰的标签点击事件将只会被触发一次
<a @click.once="handle">跳转</a>
-
可以串联一块写,表示既阻止冒泡,又阻止默认行为
<a @cilick.stop.prevent="handle">跳转<a/>
使用修饰符时,顺序很重要;
相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self
会阻止所有的点击,而v-on:click.self.prevent
只会阻止对元素自身的点击。
按键修饰符
-
.enter 回车键
<input @keyup.enter='submit'/>
-
.delete 删除键
<input @keyup.delete="crearContent"/>
-
.up 上键、 .left 左键, .right 右键 , .button 下键 等
<input @keyup.up ="test1"/>
<input @keyup.left ="test1"/>
<input @keyup.right ="test1"/>
<input @keyup.button="test1"/>
- 自定义按键 config.keyCodes
Vue.config.keyCodes.f1 = 112
未完结,(今日学习到此结束,本篇文章,是本人的理解并写出的,若有错误,望大佬指出,感谢各位大佬的观看,您辛苦了)