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 是待完成

 

混入（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个模型数据） 侦听器（一个键只能监控一个）