vue基础api
Posted bahkkba
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基础api相关的知识，希望对你有一定的参考价值。
vue比jq好处
1jq 频繁操作dom 增加了性能消耗 vue 模拟dom 从内存中拿
2jq 数据没有统一管理 vue 统一管理数据
3vue 组件开发可以提取出公共的html或js
mv*好处
mvc
m model 模型 操作数据
v view 视图 展示静态资源
c controller 控制器 逻辑
mvp
m model 模型 操作数据
v view 视图 展示静态资源
p 主持人（上面的mvc 中 mv可以互相调用所以改成 mvp让他不能互相调用）
mvvm
m model 模型 操作数据
v view 视图 展示静态资源
vm 监听m数据改变 同步到v
vue
插值 在HTML插入数据
文本 {{data 的建}}
v-html {{data的建}}可以解析html代码
指令 通过v-开头的命令显示数据
事件 v-on：事件类型 和 @事件类型
动态参数 动态标签的属性值 bind：属性=“data建” 和：属性=‘data建“
v-for 循环
v-for = “item in 建”
v-for = “（item，index） in 建”
v-if = “判断条件”不成立的删除
v-show = “判断条件“不成立的隐藏
v-if = “条件”
v-else-if = “条件”
v-else
v-on：事件类型=‘函数’
@事件类型=‘函数’
事件修饰符
stop阻止冒泡
prevent阻止默认动作
capture打乱冒泡
self阻止冒泡自身
once一次事件
passire 性能
键盘修饰符
enter 回车
delete 删除
space 空格
代码片段的好处
方便快捷搭建vue的mvvm模式的格式
输入绑定/双向绑定
比之jq的添加id属性在获取其内容方便了不少
他是让m的数据同步到v
v的数据同步到m
class和style绑定
字符串 ：class=“classOne” classOne = "class名"
数组的 ：class=“classArr” classArr =[‘class名1‘，‘class名2’]
对象的 ：class=“classObj” classObj = {class名：布尓类型，class名：布尓类型}
todo 是待完成
todolist 是待完成清单
混入（mixin）：减少代码冗余，提高代码复用性
语法
// 全局不用激活直接用
Vue.mixin({
data // 函数里面返回数据对象
methods
//..
})
// 局部需要在new Vue中通过mixins激活
let 变量名 = {
data // 函数里面返回数据对象
methods
//...
}
new Vue({
// ...
mixins: [变量名1,...,变量名n] // 脚下留心：变量名不加引号
})
什么是组件：就是一个文件，后期里面放HTML、CSS、JS 刚好是一个页面
组件好处：可以减少代码冗余，便于后期维护
// 全局（定义好了就可以调用）
Vue.component(标识，{
// 通过template键 来 声明HTML代码
template: 1直接写HTML(不推荐), 2写CSS选择器 视图里面通过template来定义选择器
data 是方法里面返回数据对象
methods
watch
//...
})
// 局部
new Vue({
// ...
// 声明组件 可以写多个 +s
components: {
标识: {
// 通过template键 来 声明HTML代码
template: 1直接写HTML(不推荐), 2写CSS选择器 视图里面通过template来定义选择器
data 是方法里面返回数据对象
methods
watch
//...
},
//....
}
})
最初ajax 瑕疵：1-异步回调地狱，2-语法麻烦，3-语法有兼容性问题
后来jq 明确：基于ajax封装
好处：语法更简单、解决兼容性问题
瑕疵：异步回调地狱
官方是如何解决异步回调地狱的：promise
最后：fetch 官方封装的 不需要导入库直接使用（fetch = XMLHttpRequest + promise）
明确：vue 以前 vue-resource（官方的 后来官方推荐别用 推荐你用axios 第三方的）
相同点：
1.都是项目用来发送异步请求的
2.都是基于XMLHttpRequest + promise
不同点：
1- axios是第三方封装的，fetch是官方封装的
2- axios更强（并发&拦截器 -> 写项目说）
3- fetch每次都需要then res.json()
axios({
url
method
headers
params get
data post
}).then().catch()
fetch(请求地址，{
method
headers
body
}).then(res=>res.json()).then().catch()
1计算属性（直接通过函数名调用） 侦听器（不能调用 借助模型调用）
2计算属性（有缓存） 侦听器（没有）
3计算属性（一个【键/函数名】监控【n个数据变化 用了几个就监控几个】）
侦听器 （一个【键/函数名】监控【一个数据变化】）
普通方法：1-事件触发用，2-减少视图冗余用
计算属性：普通方法单个调用影响性能，用计算属性
侦听器：监控模型数据变化，并且写其他逻辑 （一般网站搜索）
区别
相同点：都是为了优化项目
不同点：
1-计算属性（函数名不叫小括号） 侦听器（不能调用 需要借助模型）
2-计算属性（有缓存） 侦听器（没有）
3-计算属性（一个键可以监控n个模型数据） 侦听器（一个键只能监控一个）
以上是关于vue基础api的主要内容，如果未能解决你的问题，请参考以下文章