0%

vue学习笔记1

了解三大框架

1
2
3
vue	
react
angular

现代开发模式- 20%表现层

1
2
vue/react
vue的核心是数据

传统开发模- 80%表现层

1
2
jQuery
需要花大量时间在表现层上面

vm结构

1
2
3
4
new Vue({
el,data,methods
computed,props,watch,template,router,...
})

概念

  • 数据同步
  • 双向绑定
  • 虚拟DOM:通俗说就是一个大json,存着各个节点数据
    • 合并请求
    • 快速查询
    • 局部刷新

vue指令(directive)-补充了html的属性

  • v-bind:给属性绑定数据

  • v-model:数据双向绑定

    • 数据(data)和input之间双向
    • view(html) <-> controller(VM) <-> model(data)
    • MVVM模式,model层通过controller层(VM)与view层进行数据双向绑定
  • v-text:将数据以文本形式绑定到标签中,类似innerText

  • v-html:将数据转成html再绑定到标签中,类似innerHTML

  • v-on:绑定事件,如: v-on:click=””

  • v-show:隐藏显示标签

  • v-if:跟v-show效果相同,但是v-if会删除和重新渲染dom节点,而v-show是通过display:none样式隐藏

  • v-for:循环渲染数据,需要配合key使用

    • 数组 v-for=”(item,index) in array”
    • json v-for=”(val,key) in json”
    • 字符串 v-for=”(char,index) in string”
    • 数字 v-for=”i in number”
  • v-pre:预编译,提高性能,例如:
    div标签有等不需要编译的文本,可以给div标签加v-pre指令,直接输入”“文本

  • v-cloak:在页面还未进行编译时,隐藏双向绑定的标签
    需要配合下面样式使用

    • *[v-cloak]{ display:none }

简单的实现双向绑定代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双向绑定基本原理</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name">
姓名:{{name}} <br>
年龄:{{age}}
</div>
<script>
// 获取需要渲染的盒子
let el = document.getElementById('app')
// 保存盒子的内容
let template = el.innerHTML
let _data = {
name: '小明',
age: 18
}
// 使用Proxy拦截,数据被修改时触发事件
let data = new Proxy(_data, {
set(obj, name, value) {
obj[name] = value
// 数据变了,需要重新渲染
render()
}
})

// 首次加载页面渲染
render()

function render() {
// 渲染函数
el.innerHTML = template.replace(/\{\{\w+\}\}/g, str => {
str = str.substring(2, str.length - 2)
return _data[str]
})

// 找所有的v-model
// 获取所有的input标签
el.querySelectorAll('input').forEach(ele => {
// 判断是否有v-model属性
let key = ele.getAttribute('v-model')
if (key) {
// 给有v-model的input标签赋值
ele.value = _data[key]

// 监听input标签
ele.oninput = function () {
data[key] = this.value
}
}

})

}
</script>
</body>
</html>