day-79vue

vue组件的生命周期钩子

　　一个vue组件从创建到销毁整个生命周期过程中一些时间节点回调的方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue组件的生命周期钩子</title>
</head>
<body>
    <div id="app">
        <h1>一个vue组件从创建到销毁整个生命周期过程中一些时间节点回调的方法</h1>
        <local-tag></local-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        template: `
        <div>
            <h2 @click="btnClick">{{ msg }}</h2>
        </div>
        `,
        data () {
            return {
                msg: '局部组件',
                x: 'x',
                y: 'y'
            }
        },
        methods: {
            btnClick () {
                console.log(this.msg)
            },
            zzz() {}
        },
        beforeCreate () {
            console.log('组件开始创建，数据和事件都未创建');
            console.log(this.msg);
            console.log(this.btnClick);
            console.log(this.$data);                                    
        },
       
        created () {
            console.log('组件已经创建完毕，数据与事件都准备就绪');    　　　　　　    <!--虚拟DOM准备完毕，真实DOM还没渲染，通常用在原始数据在加载前改成动态数据-->
            console.log(this.msg);
            console.log(this.btnClick);
            console.log(this.$data);                                          <!--访问整个data数据-->
            console.log(this.$options.methods);　　　　　　　　　　　　　　　　　　　<!--访问整个methods数据-->
            console.log(this.$options.pppp);　　　　　　　　　　　　　　　　　　　　　<!--访问整个自定义数据-->
        },
    };                    


        mounted    (){                                                        <!--通过挂载点，真实DOM已把虚拟DOM替换完毕-->
            console.log();
            console.log(this.msg);
        }
    
    
    
    new Vue({
        el: '#app',
        components: {
            localTag,
        }
    })
</script>
</html>

Vue项目开发

1.安装node与npm
2.安装cnpm
3.安装脚手架
4.创建项目
5.ychram打开项目配置npm服务

项目目录介绍

node_modules：项目依赖

public：公用文件
    favicon.ico：页面标签图标
    index.html：项目的唯一页面(单页面)                #href="<%= BASE_URL %>favicon.ico" BASE_URL是绝对定位到public文件夹
    
src：项目开发文件目录
    assets：静态资源
        css|js|img
    components：小组件
        *.vue
    views：视图组件
        *.vue
    App.vue：根组件
    main.js：主脚本文件
    router.js：路由脚本文件 - vue-router
    store.js：仓库脚本文件 - vuex
    
*.xml|json|js：一系列配置文件
README.md：使用说明

main.js文件

import Vue from 'vue'                          // node_modules下的依赖直接写名字
import App from './App.vue'                   // ./代表相对路径的当前目录，文件后缀军可以省略
import router from '@/router.js'               // @ 代表src的绝对路径
import store from './store'


Vue.config.productionTip = false;              // Tip小提示


import '@/assets/css/reset.css'                // 配置自定义reset.css

// new Vue({
//   router,
//   store,
//   render: h => h(App)
// }).$mount('#app')

new Vue({
    el: '#app',
    router: router,
    store,
    
    //推导过程 render: function (fn) {
    //                 return fn(App)
    //             }
    //             function (h) {return 1} | (h) => {return 1} | h => 1
    
    
    render: readTemplateFn => readTemplateFn(App)
});

vue组件

基本模板

<template>
    <div class="owen">                                <!--html代码：有且只有一个根标签-->

    </div>
</template>
    
<script>
    export default {　　　　　　　　　　　　　　　　　　　　<--!内部导出，外部导入-->
                                                     <!--js代码：在export default {} 的括号内完成组件的各项成员：data|methods|... -->    
    }
</script>

<style scoped>                                        <!--css代码：scoped样式组件化 - 样式只在该组件内部起作用，如果跟组件不加，是全局控制 -->

</style>

自定义组件与使用

<!-- components/OwenComponent.vue -->

<template>
    <div class="owen">
        <h1 :class="{active: is_active}" @click="btnClick">owen组件</h1>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                is_active: false
            }
        },
        
        methods: {
            btnClick() {
                this.is_active = !this.is_active;
            }
        }
    }
</script>

<style scoped>
    .active {
        color: red;
    }
</style>



<!-- views/About.vue -->

<template>
    <div class="about">
        <h1>This is an about page</h1>
        <h2>好</h2>
        
        
        <owen-comp></owen-comp>                                <!-- 使用组件 -->
        <OwenComp></OwenComp>
    </div>
</template>
<script>
 
    import OwenComp from '@/components/OwenComponent'          <--!导入组件，组件名随意-->
    export default {
        components: {
            OwenComp,  /                                    <--!注册组件-->
        }
    }
</script>

vue路由

视图组件

<template>
    <div class="home">
        <Header></Header>
        <div class="wrap">
            <h1>Home页面</h1>
        </div>
    </div>
    
</template>
<script>
   
    export default {
        components: 
        }
    }
</script>

<style scoped>
  
</style>

路由注册

import Vue from 'vue'
import Router from 'vue-router'

import Home from './views/Home.vue'                        <!--导入视图组件-->
import User from './views/User'

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [                            
        {
            path: '/',
            name: 'home',                            <!--名字可有可无-->
            component: Home                            <!--关联的视图组件-->
        },
        {
            path: '/user',
            name: 'user',
            component: User
        }
    ]
    // routes: [
    //     {
    //         path: '/',
    //         name: 'home',
    //         component: Home
    //     },
    //     {
    //         path: '/about',
    //         name: 'about',
    //         // route level code-splitting
    //         // this generates a separate chunk (about.[hash].js) for this route
    //         // which is lazy-loaded when the route is visited.
    //         component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    //     }
    // ]
})

根组件

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |                        <!--系统组件,浏览器解析为a标签，完成跳转-->
      <router-link to="/about">About</router-link>                    
    </div>
    <router-view/>                                                    <!--系统组件，要显示哪个视图组件-->
  </div>
</template>

<style>

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>