1-1
1.基础语法 MVVM 模式 组件化 生命周期 动画特效
2.实战项目-环境搭建-Git - 数据模拟 - 本地开发
3.联调-真机测试-上线
Axios ：假数据获取
Vue Router：多界面之间的路由
Vuex：各个组件间数据共享
异步组件：让代码上线性能更优
Stylus：前端样式
递归组件：组件调用自己的效果
插件
公用组件
学习前提
.js（重要基础） ES6 webpack( 项目打包 ) npm（node的一个包管理工具）
2.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="app">
//v-model 代表将v-model的inputValue和vue里面的data的inputValue值进行了双向绑定
<input type="text" v-model="inputValue"/>
//v-on 代表点击
<button v-on:click="handleBtnClick">提交</button>
<ul>
//v-for=代表循环
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',//创建的vue实例负责处理的区域
data: {
list:[]//数组，
inputValue：''
},
methods:{//btn按钮的点击事件都需要在这个地方定义
handleBtnClick:function () {
this.list.push(this.inputValue)//向数组中添加元素
this.inputValue = ''//
}
}
})
</script>
</body>
</html>
3.MVVM设计模式（2-4）
M（数据）V（试图）*P（控制器）
MVVM *M(数据) V(dom) VM(vue)
4.前端组件化的概念
页面的一个部分，将整个页面分成几部分，分为几个组件
5.1 将li组件化（全局组件--可以直接在上面的模板中使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!todo-item对应下面的TodoItem,使用驼峰写法,或者变成小写,
但是需要在下一个大写字母前添加横杠>
<!v-for--循环list里面的item-->
<!v-bind--绑定item的值给todo-item组件>
<!todo-item代表一个组件>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
<script>
//vue创建全局组件
// TodoItem:组件名相对于外层容器,TodoItem是一个子组件
// props:子组件接收内容
// template:
// Vue控件赋值需要使用{{}}的语法
Vue.component("TodoItem",{
props:['content'],//组件用props接收content内容
template:"<li >{{ this.content }}</li>"
})
var app = new Vue({
el:'#app',//创建的vue实例负责处理的区域
data: {
inputValue:'',
list:[]
},
methods:{
handleBtnClick:function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
5.2 将li组件化（局部组件--在vue中component中注册组件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!todo-item对应下面的TodoItem,使用驼峰写法,或者变成小写,
但是需要在下一个大写字母前添加横杠>
<!v-for--循环list里面的item-->
<!v-bind--绑定item的值给todo-item组件>
<!todo-item代表一个组件>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
<script>
//vue创建局部组件
// TodoItem:组件名
// props:接收组件内控件内容
// template:组件内的控件
// Vue控件赋值需要使用{{}}的语法
var TodoItem ={
props:['content'],//组件用props接收content内容
template:"<li >{{ this.content }}</li>"
}
var app = new Vue({
el:'#app',//创建的vue实例负责处理的区域
components:{//将局部组件注册一下
TodoItem:TodoItem
},
data: {
inputValue:'',
list:[]
},
methods:{
handleBtnClick:function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
6.组件之间的传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!--v-on 监听事件简写@-->
<!--v-bind 可以省略不写-->
<!--父组件向子组件传值 1.v-bind的形式数据传递,子组件props接收-->
<!--子组件向父组件传值 2.$emit向父组件触发事件 2.父组件监听并定义触发事件-->
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list" @delete="handleItemDelete">
</todo-item>
</ul>
</div>
<script>
var TodoItem ={
props:['content','index'],//组件用props接收content内容,index代表下标
//@click是 v-on:click 的简写方式
template:"<li @click='handleItemClick'>{{ content }}</li>",
methods:{
handleItemClick: function () {
this.$emit("delete",this.index);//向外触犯事件this.index,参数为
}
}
}
var app = new Vue({
el:'#app',//创建的vue实例负责处理的区域
components:{//将局部组件注册一下
TodoItem:TodoItem
},
data: {
inputValue:'',
list:[]
},
methods:{
handleBtnClick:function () {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleItemDelete:function (index) {
this.list.splice(index,1)//删除一项
}
}
})
</script>
</body>
</html>
网友评论