1. 局部组件: 三步：声子、挂子、用子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 用子 --> <App></App> </div> </body> <script src="../vue.js"></script> <script> // 声子 let App = { data(){ return { appmsg:'我是app组件', } }, template:` <div class="app"> <h1>{{appmsg}}</h1> </div> `, } let vm = new Vue({ el:'#app', data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 挂子 App, } }) </script> </html>
2. 全局组件: 声子、用子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 用子 --> <App></App> <num></num> </div> </body> <script src="../vue.js"></script> <script> // 声子 全局组件 Vue.component('num',{ data(){ return { nummsg:'我是全局num组件', num:100, } }, template:` <div class="app"> <h1>{{nummsg}}</h1> <h1>{{num}}</h1> </div> `, }) // 声子 局部组件 let App = { data(){ return { appmsg:'我是app组件', } }, template:` <div class="app"> <h1>{{appmsg}}</h1> </div> `, } let vm = new Vue({ el:'#app', data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 挂子 App, } }) </script> </html>
3. 组件传值
3.1 父组件往子组件传值
两步：1 在父组件使用子组件的标签上加自定义属性
2 在子组件中声明props属性来接受数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 用子 --> <App></App> </div> </body> <script src="../vue.js"></script> <script> // header footer section main...不要和h5中的新标签名冲突 let Vheader = { data(){ return { msg:'我是vheader组件', } }, template:` <div class="vheader"> <button>{{msg}}</button> <h2>{{xx}}</h2> </div> `, props:['xx', ] } //<Vheader xx="30"></Vheader> 静态传值 //<Vheader :xx="num"></Vheader> 动态传值 // 声子 let App = { data(){ return { appmsg:'我是app组件', num:20, } }, components:{ Vheader, }, template:` <div> <Vheader :xx="num"></Vheader> </div> ` } let vm = new Vue({ el:'#app', // data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 挂子 App, } }) </script> </html>
3.2 子组件往父组件传值
两步
1 子组件中使用this.$emit('父组件的自定义事件名称',值)，
2 父组件中定义一个父组件的自定义事件名称对应的那个方法来接受数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 用子 --> <App></App> </div> </body> <script src="../vue.js"></script> <script> // header footer section main...不要和h5中的新标签名冲突 let Vheader = { data(){ return { msg:'我是vheader组件', count:180, } }, template:` <div class="vheader"> <button>{{msg}}</button> <button @click="zouni">走你</button> </div> `, methods: { zouni(){ this.$emit('fatherxx',this.count); } } // created(){ // // } } // 声子 let App = { data(){ return { appmsg:'我是app组件', num:20, soncount:'', } }, components:{ Vheader, }, template:` <div> <p style="color:red;">{{soncount}}</p> <Vheader @fatherxx="xx"></Vheader> </div> `, methods:{ xx(val){ this.soncount = val; } } } let vm = new Vue({ el:'#app', // data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 挂子 App, } }) </script> </html>
3.3 平行组件传值
三步
1 声明一个公交车
2 往公交车上放数据
3 从公交车上拿数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 用子 --> <App></App> </div> </body> <script src="../vue.js"></script> <script> let bus = new Vue(); // Vue.component('v1',{ data(){ return { nummsg:'我是v1组件', num:100, } }, template:` <div class="app"> <h1>{{nummsg}}</h1> <h1>{{num}}</h1> <button @click="zouni">走你！</button> </div> `, methods:{ zouni(){ bus.$emit('v1xx',this.num); } } }); Vue.component('v2',{ data(){ return { nummsg:'我是v2组件', num:120, v1num:'', } }, template:` <div class="app"> <h1>{{nummsg}}</h1> <h1>{{num}}</h1> <p style="color:blue;">{{v1num}}</p> </div> `, created(){ bus.$on('v1xx', (val) => { // console.log(val); // console.log(this); this.v1num = val; }) } }) // 声子 let App = { data(){ return { appmsg:'我是app组件', num:20, soncount:'', } }, template:` <div> <v1></v1> <v2></v2> </div> `, } let vm = new Vue({ el:'#app', // data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 挂子 App, } }) </script> </html>
4. vue- router
通过不同的访问路径，加载不同的组件到单页面中(那一个html文件)，vue做的叫做单页面应用(SPA).
文档：https://router.vuejs.org/zh/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <App></App> </div> </body> <script src="../vue.js"></script> <script src="vue-router.js"></script> <script> // 第一步： Vue.use(VueRouter); // 将VueRouter功能注入到Vue中 // 第二步：写组件 let home = { data(){ return { msg:'我是home页面', } }, template:` <div class="home"> <h1>{{msg}}</h1> </div> `, } let spa = { data(){ return { msg:'我是spa页面', } }, template:` <div class="spa"> <h1>{{msg}}</h1> </div> ` } // 127.0.0.1:8000/home/ // 127.0.0.1:8000/spa/ // 声子 let App = { data(){ return { appmsg:'我是app组件', num:20, soncount:'', } }, // a href='/home/' // 第六步：写连接，写出口 template:` <div> <router-link to="/home/">首页</router-link> <router-link to="/spa/">spa页</router-link> <router-view></router-view> </div> `, } // 第三步：写路由规则 const routes = [ {path:'/home/', component:home, }, {path:'/spa/', component:spa, }, ] // 第四步：实例化vue-router对象 let router = new VueRouter({ routes, }) // 第五步：挂载router对象 let vm = new Vue({ el:'#app', // router, // 挂载到vue对象上 data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 挂子 App, } }) </script> </html>
5. vue-cli 脚手架
先下载node.js
node -v
npm -v
npm install -g vue-cli --registry=https://registry.npm.taobao.org
创建项目
vue init webpack 项目名称
按照提示，运行项目
npm run dev