数据能从内存中绑定到页面中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="username"> <!--v-model双向数据绑定-->
<p>Hello {{username}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
//创建VUE实例
const vm = new Vue({ //配置对象
el: '#app', //element ：选择器
data: { //mvvm中的model
username:'atguigu'
}
})
</script>
</body>
</html>
理解MVVM
model：模型，数据对象（data）
view：视图，模板页面
viewmodel：视图模型（vue的实例 ）
view ---------> DOM监听 Model
view<----------数据绑定 Model
模板语法
模板的理解：动态的html页面，包含了一些JS语法代码---双大括号表达式、指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>双括号表达式</h1>
<p>{{msg}}</p><!--textContent-->
<p>{{msg.toUpperCase()}}</p>
<p v-text="msg"></p><!--textContent-->
<p v-html="msg"></p> <!--innerHtml-->
<h1>指令1：强制数据绑定</h1>
<img src="" alt="">
<img v-bind:src="imgUrl" alt=""> <!-- v-bind简写为 ：-->
<h1>指令2：绑定事件监听</h1>
<button v-on:click="test">test1</button> <!-- v-on简写为 @-->
<button @click="test2(msg)">test2</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'<a href="www.baidu.com">I will back</a>',
imgUrl:'https://upload.jianshu.io/users/upload_avatars/2508642/3695dffde604.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'
},
methods:{
test(){
alert(1);
},
test2(content){
alert(content);
}
}
})
</script>
</html>
计算属性和监视
computed 计算属性
watch 监视属性
计算属性存在缓存，多次读取只执行一次getter操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo">
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model="lastName"><br>
姓名（单向1）：<input type="text" v-model="fullName1"><br>
姓名（单向2）：<input type="text" v-model="fullName2"><br>
姓名（双向）：<input type="text" v-model="fullName3"><br>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const vm = new Vue({
el:'#demo',
data:{
firstName:'A',
lastName:'B',
fullName2:'A B'
},
computed:{
//什么时候执行：初始化显示执行/相关的data属性数据发生了变化
//计算并返回当前属性的值
fullName1(){ //计算属性中的一个方法，方法的返回值作为属性值
return this.firstName + " " + this.lastName;
},
fullName3:{
//回调函数三个条件：你定义的，你没有调用，但最终执行了
//回调函数什么时候调用？用来干嘛的？
//回调函数 当需要读取当前属性值时回调 根据相关的数据计算并返回当前属性的值
get(){
return this.firstName + " " + this.lastName;
},
//回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
set(value){
//value就是fullName3的最新属性值
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch:{ //配置监视
firstName:function (value) { //firstName发生了变化
console.log(this); //就是vm对象
this.fullName2 = value + ' ' + this.lastName;
}
}
})
vm.$watch('lastName',function (value) {
//更新fullName2
this.fullName2 = this.firstName + ' ' +value;
})
</script>
</body>
</html>
