官方网站:https://cn.vuejs.org
在官网下载最新开发版本的vue.js文件,在开发过程中,我们使用标签进行引入。
<body>
<div id="app">{{content}}div>
body>
{
let app = new Vue({
el: '#app',//这是获得管理div的权限
data: {
content: 'hello world'
}
})
//2秒后跟世界说拜拜
setTimeout(function(){
app.$data.content = 'bye world'
},2000)
}
<div id='app'>
<input type="text" v-model="inputValue"/>
<button v-on:click="handelBtnClik">提交button>
<ul>
<li v-for="item in list">{{item}}li>
ul>
div>
{
//Model层
let app = new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
//事件方法需要写在methods对象中
methods:{
handelBtnClik:function(){
this.list.push(this.inputValue);
this.inputValue="";
}
}
})
}
在学习MVVM模式之前,我们先了解一下什么是MVP模式。
View–视图层 Presenter–控制层 Model–数据层(模型)
MVP模式关系图
所谓的MVP模式就是:M层与P层使用ajax进行传输数据,P层通过操作DOM来控制V层的显示内容。
那么在MVVP模式中,没有Presenter层。所以在MVVP模式中,我们是不需要关注VM层是如何实现的,只需要重点关注Model与View层即可,而ViewModel是由VUE已经实现好了的,写的时候VUE会自动帮我们完成DOM的操作。vue实现原理:http://www.imooc.com/article/80343
MVVP模式关系图
所谓组件化,就是把一个项目中的功能,拆分成N个小功能(组件)。可以说多个组件组成一个项目,一个项目由多个组件构成。这样的好处在于更好维护,因为只要维护组件就可以了。比如说一个网站的导航、轮播图等都可以拆分成组件。
<div id='app'>
<input type="text" v-model="inputValue"/>
<button v-on:click="handelBtnClik">提交button>
<ul>
<todo-item v-for="item in list" v-bind:content="item">todo-item>
ul>
div>
//定义全局组件
//Vue.component("todo-item",{
// props: ['content'],//2.接收子组件传来的值
// template:"{{content}} "
//})
//01.定义局部组件
let TodoItem={
props: ['content'],//2.接收子组件传来的值
template:"{{content}} "
}
let app = new Vue({
el:'#app',
//02.注册局部组件
components:{
TodoItem:TodoItem
},
data:{
list:[],
inputValue:''
},
//事件方法需要写在methods对象中
methods:{
handelBtnClik:function(){
this.list.push(this.inputValue);
this.inputValue="";
}
}
})
需求:通过点击添加的item 实现删除
<div id="app">
<input type="text" v-model="inputText">
<button @click="handleBtnClick">提交button>
<ul>
<todo-item :content="item" :index="index" v-for="(item,index) in list" @delete="handleItemDelete">
todo-item>
ul>
div>
//声明局部组件
var TodoItem={
props:["content","index"],//获取标签组件todo-item绑定的数据
template:"{{content}} ",//给项目设置一个监听事件
methods:{
handleItemClick:function(){
this.$emit("delete",this.index);//是$emit()向外触发事件
}
}
}
var app=new Vue({
el:"#app",//这是获取标签的id
components:{//采用对象形式对局部组件进行注册
TodoItem:TodoItem
},
data:{//设置需要的数据
list:[],//数组数据
inputText:""//这里可以获取文本框的内容
},
methods:{//写事件的时候写在这里面
handleBtnClick:function(){
this.list.push(this.inputText);
this.inputText="";
},
handleItemDelete:function(index){
this.list.splice(index,1);//删除一项
}
}
})
通过以上的学习,建议去vue官网,仔细阅读介绍下的所有内容。