Vue基础二(上)
1. 面试题
- vue数据驱动原理是什么?
- vue双向数据绑定原理是什么?
- vue深入响应式原理是什么?
- 深入响应式指的就是数据驱动
- 底层实现 - es5特性 -> Object.definePropty
<body>
<div id="box"></div>
<button> 修改数据 </button>
<input type="text" name="" id="">
</body>
<script>
var box = document.querySelector('#box')
var btn = document.querySelector('button')
var input = document.querySelector('input')
var model = { //这里定义了一个数据,这个数据是一个对象
info: 'Vue'
}
input.onkeyup = function ( e ) {
// Object.defineProperty( 对象,对象的属性,对对象属性的配置 )
Object.defineProperty( model, 'info', {
/* 存储器 getter & setter */
get: function () {//get可以给对象做一次初始化赋值
return e.target.value
},
set: function ( val ) {
console.log( val )
box.innerHTML = val
}
})
box.innerHTML = model.info
}
btn.onclick = function () {
model.info = "node.js"// 数据修改了
}
</script>
- Vue是通过数据劫持和事件的订阅发布来实现的,数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置【 Object.defineProperty 】,事件的订阅发布指的是Vue通过事件来监听,通知Vue进行视图更新
- 监听: 选项/watch
2. 模板语法
mustache语法中支持js
1. 用法:
<body>
<div id="app">
<!-- 内容用法 -->
<p> {{ info }} </p>
<!-- 属性用法 -->
<input type="text" v-model = "info">
<img src=" info " alt="">
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
mustache 双大括号语法
用法有两种
1. 内容里面用 加 {{}}
2. dom属性上用 不加 {{}}
*/
new Vue({
el: '#app',
data: {
info: '今日周五'
}
})
</script>
- 属性:
- 属性中属性值可以直接写js语法,并且属性值中的数据相当于全局变量
- 给一个标签加一个自定义属性/已有属性
- 属性前加 v,Vue中叫做:指令【 借鉴angular 】
2. js的支持性
<body>
<div id="app">
<p> {{ num }} </p> <!-- 100 -->
<p> {{ str }} </p> <!-- string -->
<p> {{ bol }} </p> <!-- true -->
<p> {{ nul }} </p> <!-- 空 -->
<p> {{ und }} </p> <!-- 空 -->
<p> {{ obj.name }} </p> <!-- Vue -->
<p> {{ arr[ 0 ] }} </p> <!-- 1 -->
<p> {{ fn() }} </p> <!-- 10 -->
<!-- <p> {{ console.log( 1 ) }} </p>
<p> {{ alert( 1 ) }} </p> -->
<p> {{ 1 + 1 }} </p> <!-- 2 -->
<p> {{ 5 > 3 ? '真':'假' }} </p> <!-- 真 -->
<p> {{ 5 > 3 && '真'||'假' }} </p> <!-- 真 -->
<div>
<p v-if = "bol"> 猫 </p>
<p v-else> 狗 </p> <!-- 猫 -->
</div>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 100,
str: 'string',
bol: true,
nul: null,
und: undefined,
obj: {
name: 'Vue'
},
arr: [ 1,2,3 ],
fn: function () {
return 10
}
}
})
</script>
3. 总结
- null 和 undefined 是不会显示的,其他数据类型都是支持的,可以显示
- 挂载在window身上的全局属性,不能用,比如:console alert
- mustache语法中不写流程控制,比如:for if while do…while
- mustache语法中支持三元表达式、运算符、短路原则