一、组件介绍
-
每一个组件都是一个vue实例
-
每个组件均具有自身的模板template，根组件的模板就是挂载点
-
每个组件模板只能拥有一个根标签
-
二、局部组件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>局部组件</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 错的 --> <!-- <localTag></localTag> --> <!-- ① --> <!-- <localtag></localtag> --> <!-- ② ③ ④ ⑤ --> <local-tag></local-tag> <local-tag></local-tag> <!-- 总结：组件与html公用的名称(组件名、方法名、变量名)，不要出现大写，提倡使用-语法 --> </div> </body> <script type="text/javascript"> // 创建局部组件:就是一个拥有模板(满足vue写法)的对象 var localTag = { // 模板 // 错误: 只能解析第一个标签，以它作为根标签 // template: '<div>局部组件1</div><div>局部组件2</div>' template: ' <div> <div>局部组件1</div> <div>局部组件2</div> </div>' } // 局部组件需要被使用它的父组件注册才能在父组件中使用 // 模板: html代码块 // 根组件，拥有模板，可以显式的方式来书写template，一般不提倡，模板就是挂载点及内部所有内容 // 注：挂载点内部一般不书写任何内容 new Vue({ el: '#app', // old // template: '<div></div>' // new // 用components进行组件的注册 // ① // components: { // 'localtag': localTag // } // ② // components: { // 'local-tag': localTag // } // ③ // components: { // 'localTag': localTag // } // ④ components: { 'LocalTag': localTag } // ⑤ // ES6 key与value一直，可以单独写key // components: { // localTag // } }) </script> </html>
三、全局组件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>全局组件</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <global-tag></global-tag> <global-tag></global-tag> </div> </body> <script type="text/javascript"> // 创建全局组件： 组件名, {template:''} Vue.component('global-tag', { // data: function () { // return { // num: 0 // } // }, data () { return { num: 0 } }, template: '<button @click="btnClick">点击了{{num}}下</button>', methods: { btnClick () { console.log("你丫点我了！！！"); this.num ++ } } }) new Vue({ el: '#app', data: { } }) </script> </html>
四、父组件传递数据给子组件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>父传子</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 通过属性绑定的方式 --> <!-- <global-tag v-bind:abc='sup_d1' :supD2='sup_d2'></global-tag> --> <global-tag v-bind:abc='sup_d1' :sup_d2='sup_d2'></global-tag> <!-- 模板名用-连接命名，属性名用_连接命名 --> </div> </body> <script type="text/javascript"> // 子组件需要接受数据 Vue.component('global-tag', { // 通过props来接收绑定数据的属性 // props: ['abc', 'supd2'], props: ['abc', 'sup_d2'], // template: '<div><p @click="fn">{{ abc }}</p></div>', template: '<div><p @click="fn(abc)">{{ abc }}</p></div>', methods: { // fn () { // alert(this.abc) // } fn (obj) { console.log(obj, this.sup_d2) } } }) // 数据是父组件的 new Vue({ el: '#app', data: { sup_d1: "普通字符串", sup_d2: [1, 2, 3, 4, 5] } }) </script> </html>
五、子组件传递数据给父组件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>子传父</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 通过发送事件请求的方式进行数据传递(数据作为请求事件的参数) --> <global-tag @send_data='receiveData'></global-tag> <p>{{ msg }}</p> </div> </body> <script type="text/javascript"> Vue.component('global-tag', { data () { return { sub_v1: '普通字符串', sub_v2: [1, 2, 3, 4, 5] } }, template: '<button @click="btnClick">发送</button>', methods: { btnClick () { console.log("子>>> ", this.sub_v1, this.sub_v2); // 通过emit方法将数据已指定的事件发生出去 // 事件名, 参数... this.$emit("send_data", this.sub_v1, this.sub_v2) } } }) // 数据是父组件的 new Vue({ el: '#app', data: { msg: '' }, methods: { receiveData(obj1, obj2) { console.log("父>>> ", obj1, obj2) this.msg = obj2; } } }) </script> </html>
六、父组件实现todoList
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组件todoList</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <div> <input type="text" v-model='in_val'> <button @click='pushAction'>提交</button> </div> <!-- <ul> <li @click='deleteAction(index)' v-for='(item,index) in list' :key="index">{{ item }}</li> </ul> --> <!-- 父 将list传输给 子 --> <todo-list :list_data='list' @delete_action='deleteAction'></todo-list> </div> </body> <script type="text/javascript"> Vue.component('todo-list', { props: ['list_data'], template: '<ul><li v-for="(e, i) in list_data" :key="i" @click="li_action(i)">{{e}}</li></ul>', methods: { li_action (index) { // 子 反馈index给 父 this.$emit('delete_action', index); } } }) new Vue({ el: '#app', data: { in_val: '', list: [] }, methods: { pushAction () { this.list.push(this.in_val); this.in_val = '' }, deleteAction (index) { this.list.splice(index, 1); } } }) </script> </html>
七、搭建Vue开发环境
-
官网下载安装：https://nodejs.org/zh-cn/
2、安装脚手架
-
vue官网 => 学习 => 教程 => 安装 => 命令行工具(CLI)
安装全局vue：npm install -g @vue/cli 在指定目录创建vue项目：vue create my-project 进入项目目录启动项目：npm run serve 通过指定服务器路径访问项目页面：http://localhost:8080/
3、项目创建
babel：是一个 JavaScript 编译器。
eslint：是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
4、vue基础模板
<template> </template> <script> export default { } </script> <style scoped> </style>
npm install -g vue-cli
vue init webpack my-project
npm install -g cnpm --registry=https://registry.npm.taobao.org