MVVM模式
Model:负责数据存储
View:负责页面展示
View Model:负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示
MVC模式:(设计模式,前后端都有模式存在)
m->model->模型->数据(JS变量)
v-view->视图->用户所见界面(HTML,CSS)
c->control->控制器->事件交互->如何根据视图与用户交互后改变数据(通过DOM对象绑定事件,将变量进行修改)
Vue.js:一套构建用户界面的渐进式框架
目标:通过尽可能简单的API实现响应的数据绑定和组合的视图组件
DOM:是数据的一种自然映射
API:应用程序接口
1、下一个编辑器,vscode
VS Code:https://code.visualstudio.com/
Hbuilder X:http://www.dcloud.io/hbuilderx.html
2、Vue.js安装
引用:https://cn.vuejs.org/v2/guide/installation.html
3、创建
最简单的一个模板!
<body>
<div id="app">
{{ message}} <!--声明变量-->
</div>
<script type="text/javascript">
var app = new Vue({ //全局变量vue
el:'#app', //元素
data:{ //用于保存数据
message:'hello vue 好!'
}
});
</script>
</body>
代码框打‘!’
出来一个模板结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue1.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- View -->
<div id="app">
<input type="button" value="按钮哦" v-on:click="show()" />
<input type="button" value="按钮哦!" @click="show()" />
<!-- 用@来代替 v-on-->
<!-- 不传递参数时,可以省略括号 -->
<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(){
console.log('hello,i am a big girl');
this.word = 'Changed by 啊嘞嘞';
}
}
});
</script>
</body>
</html>
右键选open in default browser(默认浏览器),弹出页面可看效果
如何动态添加一个div,包含p标签和文字
先试一下亲手操作一次DOM
静态操作一下,原生代码写
<body>
<div id='app'>
<input type="button" value="按钮1">
</div>
<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 = 'apple';
div.appendChild(p);
app.appendChild(div);
}
addEventListener('click',changeDirectly);
</script>
</body>
模板方法写
</div>
<script type="text/javascript">
function changeDirectly(){
var app = document.getElementById('app');
var html = '';
var htmlTmp = '<div><p>%word%</p></div>';
html = htmlTmp.replace(/%word%/g,'apple');
console.log(html);
app.innerHTML = html;
}
addEventListener('click',changeDirectly);
</script>
3、JS与HTML分离
第一步:把模板放到HTML中
第二步:渲染
第三步:模板hide起来
<body>
<div id='app'>
<input type="button" value="按钮1">
</div>
<script id="tmp" type="text/x-apple">
<div>
<p>%word%</p>
</div>
</script>
<script type="text/javascript">
function changeDirectly(){
var app = document.getElementById('app');
var html = '';
var htmlTmp = document.getElementById('tmp').innerHTML;
html = htmlTmp.replace(/%word%/g,'apple');
console.log(html);
app.innerHTML = html;
}
addEventListener('click',changeDirectly);
</script>
</body>
条件渲染指令
v-if
**v-if**指令条件渲染指令
它根据表达式的true/false来删除或添加元素
语法:
v-if="expression"
expression是一个返回bool值
true:显示
false:元素删除转换为注释
<body>
<div id='app'>
<input type="button" value="不显示" @click="show">
<p v-if="showP">能够被控制显示还是不显示的P标签</p>
</div>
<script type="text/javascript">
var m = {
showP:true
}
var vm = new Vue({
el:'#app',
data:m,
methods:{
show:function(){
this.showP = false;
}
}
});
</script>
</body>
<body>
<div id='app'>
<input type="button" value="不显示" @click="show">
<p v-if="showP">1、能够被控制显示还是不显示的P标签</p>
<p v-if="num1">2、如果{{num1}}是0不显示</p>
<p v-if="num2">3、如果{{num2}}是0不显示</p>
<p v-if="str1">4、如果{{str1}}是空字符串,不显示</p>
<p v-if="str2.indexOf('c') > 0">5、有c,显示</p>
</div>
<script type="text/javascript">
var m = {
showP:true,
num1:0,
num2:5,
str1:'',
str2:'abc'
};
var vm = new Vue({
el:'#app',
data:m,
methods:{
show:function(){
this.showP = false;
}
}
});
</script>
</body>
结果如下:
类似开关按钮的设置
methods:{
show:function(){
this.showP = !this.showP;
}
}
v-show
**v-show**指令条件渲染指令
它根据表达式的true/false来显示或隐藏元素
语法:
v-show="expression"
和v-if指令不同的是,使用v-show指令元素始终会在DOM上,通过修改style属性的显示与隐藏
display:none true: display:block
false: display:none
e.g. <p v-show="showP">6、能够被控制显示还是不显示的p标签</p>
v-else
v-else指令条件渲染指令
指令必须跟一个v-if或v-show元素后
否则不能够被识别
一个小tip:
//li*5
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<body>
<div id='app'>
<ul>
<!-- 一般的循环 数组 -->
<li v-for="val in array">{{val}}</li>
<!-- 有下标的循环 数组 -->
<li v-for="(val,index) in array">val = {{val}}; index = {{index}}</li>
<!-- 一般的循环 JSON-->
<li v-for="val in json">{{val}}</li>
<!-- 带有key的循环 JSON-->
<li v-for="(val, key, index in json">val = {{val}},key = {{key}},index = {{index}}</li>
</ul>
</div>
<script type="text/javascript">
var m = {
array:['Beijing', 'Jinan', 'Shanghai', 'Hangzhou', 'Sulawesi'],
json:{
firstCity:'Beijing',
secondCity:'Jinan',
thirdCity:'Shanghai',
fourthCity:'Hangzhou',
fivthCity:'Sulawesi'
}
};
var vm = new Vue({
el:'#app',
data:m,
methods:{
}
});
</script>
</body>
运行结果:
v-model
v-model
用于将控件与model双向绑定
<body>
<div id="app">
<input type='text' v-model="theValue">
<p>{{theValue}}</p>
</div>
<script type="text/javascript">
var m = {
theValue:'hello world!'
};
var vm = new Vue({
el:'#app',
data:m,
methods:{
}
});
</script>
</body>
用指令实现一个留言板
1、基于Bootstrap
2、用Vue指令实现响应命令
3、实现一个输入用户名和留言的控件
首先安装bootstrap,管理员打开命令提示符
bower install jquery
bower info bootstrap
bower install bootstrap#3.4.1