初学Vue
在script 中创建Vue的实例
el: '#app',
el 代表的是 vue 实例负责的区域范围
data 代表的是 数据块
接受function的是在methods中
1、原始写法
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleButtonClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el : '#app',
data : {
list:[],
inputValue:''
},
methods:{
handleButtonClick:function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
2、将这个常用的控件做成组件的形式,其他界面使用直接倒入组件即可,达到复用目的
做成组件的形式 重要的函数是
v-bind 起到的作用是 与子组件进行通讯
Vue.component() 创建全局组件
props 接受来自父组件传递过来的内容
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleButtonClick">提交</button>
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<!-- v-bind 与子组件通讯 -->
<todo-item v-bind:contet="item" v-for="item in list"></todo-item>
</ul>
</div>
<script>
//创建全局 组件的
Vue.component("TodoItem",{
//props 意思 是 从父组件中接收到内容
props:['contet'],
template: "<li>{{contet}}</li>"
})
var app = new Vue({
el : '#app',
data : {
list:[],
inputValue:''
},
methods:{
handleButtonClick:function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
实现效果