插值表达式:
语法:{{数据/表达式}}
功能:向页面渲染数据或表达式的结果。
插值表达式会自动将vue实例中的data属性中的数据取出,渲染到页面上。
算术运算: + - * / %
调用方法 Math.floor Date.now()
三元表达式
注意:[千万不要写 js语句。]
比如: var a = 10+20; if else 语句等。
<div id="app">
<!-- {{Math.floor(10.1)}} -->
<!-- {{Date.now()}} -->
<!-- {{if(age>18){'欢迎德玛西亚黄金大神光临本网咖'}else{"滚"}}} -->
{{age>18?'欢迎德玛西亚黄金大神光临本网咖':"滚"}}
</div>
<script src="vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
msg:"芜湖起飞",
age:20
}
});
</script>
二 vue开发者工具:devtools 极简插件下载
MVVM设计模式:
Model-view-viewModel 简写。
Model:模型 后端传递过来的数据。
view:视图 所看到的页面(DOM元素)
VM:viewmodel 视图模型 它是连接view和model的桥梁。
vm有两个方向:
1.将模型转化为视图,将后端传递过来的数据渲染为所看到的的页面。
2.将视图转化为模型。 将看到的页面转为后端的数据。
数据单向绑定:
将model绑定到view,用js代码更新数据时,view会自动更新。不需要额外的DOM操作。
常见的单向绑定:{{}} v-bind
数据的双向绑定:
将model绑定到view的同时,也将view 绑定到model。
在input textarea等表单元素上使用v-model指令来进行双向数据绑定。
<div id="app">
<input type="text" v-model="msg">
{{msg}}
</div>
<script src="vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
msg:"芜湖起飞",
age:20
}
});
</script>
数据绑定原理
当一个数据发生变化时,vue是如何直到的?
通过ES5中的Object.definePropety,
Object.definePropety可以监听到属性值的变化。
<script>
// let obj = {name:"zhangsan"};
// obj.age = 20;
// Object.defineProperty(obj,"age",{
// value:20
// })
// console.log(obj);
// ----------------
//定义一个空对象
var book = {};
//定义一个变量,存放 书名
var bookName = '';
Object.defineProperty(book,"name",{
//给book的name属性设置值的时候,会自动调用
set(value){
//value 就是设置的值。
bookName = value;
console.log(`你取了一个书名,叫做${value}`);
//将值渲染在页面上。
document.getElementById("app").innerHTML = value;
},
//获取book的name属性的属性值的时候,会自动调用。
// 该方法的返回值就是 调用该属性时获取的值。
get(){
//在这里无法直接获取set函数设置的值,所以需要通过一个外部的变量来保存。
return `《${bookName}》`;
}
})
// 当视图更新时,vue如何知道?
// 根据输入框的input事件来监听 视图的更新
let inp = document.getElementById("inp");
inp.oninput = function(){
book.name = this.value;
}
</script>