共计 1812 个字符，预计需要花费 5 分钟才能阅读完成。
vue 学习路径和建议 —- 尤雨溪
vue 官网
今天看了慕课网的一个教学视频 Vue 入门 感觉清晰了很多
首先引入一个简单的 todolist 案例
初始化项目（引入 vue.js 部分省略）
<!– 挂载点 –>
<div id=”app”>
</div>
<script>
var app = new Vue({
el: ‘#app’, // 通过 id 选择器挂载上去
})
</script>
初始化数据，遍历输出
<!– 挂载点 –>
<div id=”app”>
<!– –>
<div>
<input type=”text” >
<button> 添加任务 </button>
<ul >
<li v-for=”(item, index) in list” :key=”index”>{{item}}</li>
</ul>
</div>
</div>
<script>
var app = new Vue({
el: ‘#app’, // 通过 id 选择器挂载上去
data(){ // 介意这样写 data，因为在后面的 vue-cli 里面就是这样写的 自我理解
return{
list:[1,2,3] // 先把写死后面再更改
}
}
})
</script>
以下是效果：
接下来就是动态添加数据了
<!– 挂载点 –>
<div id=”app”>
<!– –>
<div>
<input type=”text” v-model=”listValue”>
<button v-on:click=”addList”> 添加任务 </button>
<ul >
<li v-for=”(item, index) in list” :key=”index”>{{item}}</li>
</ul>
</div>
</div>
<script>
var app = new Vue({
el: ‘#app’, // 通过 id 选择器挂载上去
data(){ // 介意这样写 data，因为在后面的 vue-cli 里面就是这样写的 自我理解
return{
list:[], // 先把写死后面再更改，
listValue:” // 把这个值双向绑定在 input 中
}
},
methods: {
addList:function(){
this.list.push(this.listValue) // 往数组中 push 数据，数据来源是 input 中的值
this.listValue = ” // 添加完之后记得将 input 中间数据清空
}
}
})
</script>
以上涉及数据的双向绑定
以下是将 todolist 应用进行了组件化
对 todolist 组件进行拆分。
<div id=”app”>
<div>
<input v-model=”inputValue”>
<button @click=”handleSubmit”> 提交 </button>
</div>
<ul>
<todo-item
v-for=”(item, index) in list”
:key=”index”
:content=”item”
:index=”index”
@delete=’handleDelete’
>
</todo-item>
</ul>
</div>
<script>
// 全局组件
Vue.component(‘todo-item’, {
props:[‘content’,’index’],// 相当于接收父节点的属性
template: ` <li v-on:click=”handleClick”>{{content}}{{index}}</li>`
,
methods:{
handleClick:function(){
this.$emit(‘delete’,this.index)// 相当于传递给父类
}
}
})
// // 局部组件
// var toDoItem = {
// template: `<li >item</li>`
// }
var app = new Vue({
el: ‘#app’,
// 局部组件的声明
// components: {
// ‘todo-item’: toDoItem
// },
data: {
inputValue: ”,
list: []
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue)
this.inputValue = “”
},
handleDelete: function(index){
this.list.splice(index,1)
}
}
})
总结：
子组件向父组件传递参数：通过绑定属性的形式
父组件向子组件：发布订阅模式
这一块准备在后面的文章中将组件间通信单独拎出来分析。加深自己的理解。
