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)
}
}
})
总结：
子组件向父组件传递参数： 通过绑定属性的形式
父组件向子组件： 发布订阅模式
这一块准备在后面的文章中将组件间通信单独拎出来分析。加深自己的理解。
发表回复