文章目录
一、Vue起步
1. MVVM模式是什么
传统的mvp模式
- m层指的是数据层(model)
- v层指的是视图层(view)
- p层指的是控制器
该编码方式一般用于普通操作dom方式,改变视图后通过控制器,进行大量dom操作,调用数据或者操作视图,核心是在p层
mvvm模式
- m层指的是数据层(model)
- v层指的是视图层(view)
- vm层指的是vue自带的层(viewmodel)
也就是说使用vue进行前端开发,我们只需要关心view层
和Model层就行
,操作dom就由vue来实现。在vm层中的实现主要使用了es5的object.definproperties和虚拟dom的机制。
2. 创建一个vue实例
new
一个Vue实例(也就是根实例)- 初始化Vue实例的配置项参数:
- el (Vue实例接管dom元素,也就是说使用vue,就无需使用js的dom操作了),
- data(数据),
{ {}}
输出数据,只有被Vue实例接管的dom节点才能输出。- $data 是 data的别名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个vue实例</title>
<!-- vue2.5.17 -->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">{
{content}}</div>
<script type="text/javascript">
var app = new Vue({
el: '#app', 实例接管的dom
data: {
content: 'hello world!',
}
});
2秒后,修改显示内容
setTimeout(()=>{
app.$data.content='hello poorpenguin!'},2000);
</script>
</body>
</html>
3. v-model v-on v-for
- v-model 对表单和变量进行双向绑定(哪一方的值改变,另一方也随之改变)
v-model="变量名"
- v-on (
v-on:
简写@)监听dom事件v-on:事件="方法名"
或者@事件="方法名"
- v-for 列表渲染
v-for="item in items"
或者v-for="(item, index) in items(index为数组项下标)"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="todolist">
<input type="text" v-model="inputValue"/>
<button @click="add">添加</button>
<ul>
<li v-for="item in list">{
{item}}</li>
</ul>
</div>
<script type="text/javascript">
var todolist = new Vue({
el: '#todolist',
data: {
list: [],
inputValue: '',
},
methods: {
add(){
this.list.push(this.inputValue);
this.inputValue = '';
},
}
});
</script>
</body>
</html>
4.组件基础
通过Vue
实例接管的dom元素,我们就可以看成是一个组件。相对于全局注册
和局部注册
的组件来说,Vue
实例就是父组件。
- 每一个组件就是一个
vue
实例。
4.1 局部组件
局部组件是在局部注册的。
使用一个普通的js对象定义组件,再在Vue实例中注册components:{}
。
<div id="todolist">
<input type="text" v-model="inputValue"/>
<button @click="add">添加</button>
<ul>
<to-do-list :content="item" :index="index" v-for="(item, index) in list"></to-do-list>
</ul>
</div>
<script type="text/javascript">
var ToDoList = {
props: ['content','index'],
template: '<li>{
{index}}.{
{content}}</li>',
};
var todolist = new Vue({
el: '#todolist',
components: {
ToDoList: ToDoList, //可以ES6简写 ToDoList,
//或者'to-do-list': ToDoList,
},
data: {
list: [],
inputValue: '',
},
methods: {
add(){
this.list.push(this.inputValue);
this.inputValue = '';
},
}
});
</script>
4.2 全局组件
通过 Vue.component
来创建组件,就是全局注册的组件。
<div id="todolist">
<input type="text" v-model="inputValue"/>
<button @click="add">添加</button>
<ul>
<to-do-list :content="item" :index="index" v-for="(item, index) in list"></to-do-list>
</ul>
</div>
<script type="text/javascript">
Vue.component('to-do-list',{
props: ['content','index'],
template: '<li>{
{index}}.{
{content}}</li>',
});
var todolist = new Vue({
el: '#todolist',
data: {
list: [],
inputValue: '',
},
methods: {
add(){
this