Vue运行原理:
Vue框架将vue语法编译成原生js语法
MVVM设计思想:
M:model,提供数据
V:view,展示页面,本质即DOM
VM:View-Model,控制逻辑
Vue模版语法
1.插值
作用:前端渲染,即将数据填充到html标签中
- {{ }} 有闪动问题(插值表达式)
- v-text 填充纯文本,没有闪动问题,建议使用(数据绑定指令)
- v-html 填充html片段,容易导致XSS攻击,有安全隐患。本网站内部数据可用,来自第三方的数据不可用
- v-pre 填充原始内容,跳过编译过程
2.指令
本质:自定义属性
格式:以v-开头
v-cloak指令:
作用:解决插值表达式存在的闪动问题
原理:先隐藏,替换好值后再显示最终的值
[v-cloak]{
display:none
}
<div v-cloak>{{message}}</div>
v-once
作用:只编译一次
应用场景:如要显示的内容后续不需要再修改,使用v-once可提高性能
v-model
双向数据绑定:
数据发生变化时,页面内容会跟着变化
用户通过表单域修改内容时,数据也会跟着变化
底层原理:
<input v-bind:value='msg' v-on:input="msg=$event.target.value">
<input type='text' v-model='msg'/>
v-on
作用:事件绑定
<input type='button' v-on:click='num++' />
<input type='button' @click='num++' />
<button @click="say">say</button> //直接跟函数名,默认会传递事件对象作为事件函数的第一个参数
<button @click="say(‘hel’,$event)">say</button> //调用函数,传入参数时,$event事件对象必须放在最后显示传递,固定是$event
事件修饰符号:
.stop: 阻止冒泡
.prevent: 阻止默认行为(如链接跳转)
v-bind
作用:绑定属性
<div v-bind:id='one'></div>
<div :id='one'></div> //简写
样式绑定-class
<div v-bind:class="{active:isActive,error:isError}" ></div> //对象语法
<div v-bind:class="[activeClass,errorClass]"></div> //数组语法
class绑定细节:
1.对象和数组语法可以结合使用
2.class绑定的值可以放到vue实例中
3.默认的class会保留
分支结构v-if和v-show
v-if控制元素是否渲染到页面,v-show控制页面是否显示
v-for循环
遍历数组或对象,item in items形式
建议v-for 与key搭配使用,用来vue区分元素,提高性能
v-for=‘(v,k,i) in obj’
Vue常用特性
1.表单操作
<input type="text">
<input type="radio">
<input type="checkbox">
<option value=""></option>
<textarea name="" id="" cols="30" rows="10"></textarea>
表单修饰符:
- number :转化为数值
- trim :去掉开始和结尾的空格
- lazy :将input事件转为change事件(v-model指令默认触发的是input事件,input事件会时刻监控输入框数据变化,change失去焦点时才触发)
注意事项:
<input type="submit" value="提交"> //提交按钮默认会刷新页面
可通过事件修饰符阻止默认的提交行为,实际场景中用ajax提交
<input type="submit" value="提交" @click.prevent="handle">
2.自定义指令
3.计算属性
当表达式逻辑比较复杂时。使用计算属性会使模版内容更加简洁。
计算属性和方法的区别:
计算属性是基于它们的依赖(指的就是data中的数据)进行缓存的,对于耗时操作可以提高性能
方法不存在缓存
4.侦听器
应用场景:
当数据发生变化时执行异步或开销比较大的操作
5.过滤器
作用:格式化数据(eg:日期格式化为指定格式)
格式:
Vue.filter('过滤器名称',functiong(value){过滤业务})
6.vue实例生命周期
- 挂载
1.beforeCreate
2.created
3.beforeMount
4.mounted - 更新(元素或组建变更)
1.beforeUpdate
2.updated - 销毁(销毁相关属性)
1.beforeDestroy
2.destroyed
VUE-组件化开发
全局组件注册:
Vue.compent('组件名称',{
data:组件数据,
template:组件模版内容
})
注意事项:
- data必须是一个函数
- 组件模版内容必须是单个根元素
- 组件模版内容可以是模版字符串(用反单引号包含),需要浏览器提供支持,es6语法。
- 组件名称命名规则:使用短横线连接,或使用大驼峰,对于驼峰命名方式,只能在字符串模板中使用组件,普通的标签模板中必须使用短横线方式
局部组件注册:
var ComponentA = {} //同上述全局注册方式中的第二个参数一致
new Vue(){
el:'#app',
components:{
component-a:ComponentA
}
}
局部注册的组件只能在注册它的父组件中使用
前后端交互
Promise用法
1.异步效果分析
- 定时任务
- ajax
- 事件函数
2 多次异步调用结果分析
- 多次异步调用的结果不确定
- 异步调用结果如果依赖则需要嵌套
3 Promise
Promise是异步编程的一种解决方案。语法上看,Promise是一个对象,从它可以获取异步操作的消息。
使用Promise好处:
- 避免多层异步调用嵌套问题
- Promise对象提供了简介的api,操作更加容易
4接口调用fetch
基本特性:
基于Promise实现
数据获取方式更加简单,可看作是ajax的升级版
语法结构:
fetch(url).then(f2)
.then(f3)
......
.catch(fn)
Vue路由
路由的本质就是对应关系
开发中路由分为:前端路由和后段路由
后端路由:根据用户的不同url请求,返回不同的内容。本质就是URL请求地址与服务器资源之间的对应关系。