本帖最后由 逆风TO 于 2019-7-19 09:04 编辑
vue 的全局和局部组件 Demo
这里我把学习的知识点都放在代码对应的注释中了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端组件化</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<!--
M V P
M V VM
-->
<!-- v-model 实现 数据双向绑定，在 data中注册一下，两边数据会保持一致，谁变都变 -->
<input type="text" v-model='inputValue'>
<!-- 使用 v-on:click 来实现 事件绑定 handleBtnClick ，然后从 方法中找个这个方法，监听执行 -->
<input type="button" name="" v-on:click="handleBtnClick" value="提交">
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<!-- v-for 遍历 list 每个元素 -->
<!--
1、这里有个 及其重要的注意点 定义组件名字为 TodoItem 使用时要写成 todo-item，
即把大写变小写，每个之间加一个 - ！！！！！！！
2、或者直接定义为 todo-item
-->
<!--
v-bind 实现数据绑定，
把list中的数据给 item，
item 和 content绑定在一起,
这里要在 Vue.component 中添加 props:['content']
这里的 v-bind: 后的名字 要和 props[] 中一致！！！！
-->
<todo-item v-bind:todo="item" v-for="item in list"></todo-item>
</ul>
</div>
<script type="text/javascript">
// Vue 创建局部组件
/*
局部组件在定义后不能像全局组件一个样直接使用，需要在要使用的Vue对象中进行注册
components:{
TodoItem:TodoItem
}
*/
var TodoItem = {
props:['todo'],
template:"<li>{{todo}}</li>"
}
/*
// Vue 提供的创建 全局组件
Vue.component("todo-item",{
props:['todo'],
template:"<li>{{todo}}</li>"
});
*/
var app = new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
// list:['Hello','World'],
list:['Hello','World!'],
inputValue:'v-model'
},
methods: {
handleBtnClick:function () {
this.list.push(this.inputValue);
}
}
});
</script>
</body>
</html>
|
|
收藏
淘帖
踩
