MVVM模式
model : 用于存放数据
view : 响应用户交互行为
ViewModel:可以理解为自动化调用的Presenter
Presenter:
1.Module改变,修改DOM
2. View响应用户交互时,通知Presenter, Presenter负责更新Module,以及修改DOM
<!-- View -->
<div id="app">
<input type="button" value="按钮1" v-on:click="show"/>
<input type="button" value="按钮2" @click="show()"/>
<!-- 1. 用 @ 来代替 v-on -->
<!-- 2. 不传递参数时,可以省略括号 -->
<h3>{{word}}</h3>
</div>
<script>
// Module
var m = {
word: 'Hello, World! I am Vue'
};
// ViewModel
var vm = new Vue({
el: '#app', // 挂载点。
data: m, // 数据
// 方法
methods: {
// show(x){
show: function(){
console.log('Hello, I am here!');
this.word = 'Changed by 隔壁王校长';
}
}
});
</script>
vue指令的目的
为了实现Js与HTML的分离
HTML的结构应该定义在HTML文件中,而不是散落在JS代码中仅仅通过model去控制View,而不是定义View
js与HTML分离
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="按钮">
</div>
<script id="tmp" type="text/x-wangxiaozhang">
<div>
<p>%word%</p>
</div>
</script>
<script type="text/javascript">
// 1. 直接操作DOM
// function changeDirectly(){
// var app = document.getElementById('app');
// var div, p;
// div = document.createElement('div');
// p = document.createElement('p');
// p.innerHTML = 'abc';
// div.appendChild(p);
// app.appendChild(div);
// }
// addEventListener('click', changeDirectly);
// 2. 模板方法
// function changeDirectly(){
// var app = document.getElementById('app');
// var html = '';
// var htmlTmp = '<div><p>%word%</p></div>';
// html = htmlTmp.replace(/%word%/g, 'abc');
// console.log(html);
// app.innerHTML = html;
// }
// addEventListener('click', changeDirectly);
// 3. JS与HTML分离
// 第一步:把模板放到HTML中
// 第二步:渲染
// 第三步:模板hide起来
function changeDirectly(){
var app = document.getElementById('app');
var html = '';
var htmlTmp = document.getElementById('tmp').innerHTML;
html = htmlTmp.replace(/%word%/g, 'abc');
console.log(html);
app.innerHTML = html;
}
addEventListener('click', changeDirectly);
</script>
</body>
</html>