day 79生命周期钩子、Vue项目开发

一、生命周期钩子

　　用处：在组件从创建到销毁过程中的某个时间节点，想要完成的某个事，如，在组件创建完成后，想要干嘛干嘛，在被销毁后想要做某些事。

　　　　　再比如created钩子：组件创建后，渲染前，可以请求后台，拿到最新的数据更新完成后，再渲染到页面，这样页面上就是数据库中最新的数据了　

　　　　　而mounted：页面被渲染后，的钩子　

　　　　　访问methods要通过$options

　　　　　　console.log(this.$options.methods)

　　生命周期钩子案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue组件的生命周期钩子</title>
</head>
<body>
    <div id="app">
        <div>
            <h1>什么是生命周期钩子</h1>
            <h1>一个Vue子组件从创建到销毁整个生命周期过程中一些时间节点回调的方法</h1>
        </div>

        <local-tag></local-tag>
    </div>

</body>
<script src="vue/vue.js"></script>
<script>
    let localTag = {
        template:`
        <div>
            <h2 @click="btnClick"> {{msg}}</h2>
        </div>
        `,
        data (){
            return{
                msg:"局部组件",
                x:'aa',
                y:123,
            }
        },
        methods:{
            btnClick (){
                console.log(this.msg)
            }
        },
        beforeCreate (){
            console.log('组件开始创建，数据和事件都未创建');
            console.log(this.msg);  // undefined说明数据还未创建
            console.log(this.btnClick); //undefined说明事件还未创建
            console.log(this.$data); //undefined
            console.log(this.option.methods)
        },
        created (){
            console.log('组件已经创建完毕，数据与事件都准备就绪');
            console.log(this.msg); // 局部组件  [数据有了]
            console.log(this.btnClick); // 事件也有了  ƒ btnClick (){console.log(this.msg)}
            console.log(this.$data);  // {__ob__: Observer}
            console.log(this.option.methods)
        },
    };
    new Vue({
        el:'#app',
        components:{
            localTag,
        },
    })
</script>
</html>

View Code

二、Vue项目开发【环境、项目创建、组件.vue、路由、仓库、cookie

　　1. 搭建Vue环境

　　　创建Vue项目 => 要有Vue环境 => 要安装Vue =>要有一个命令行的商城npm 【就像pip 专门给python 安装模块一样】

　　　安装npm商城=>要有一个node环境, node.js是C++写的，内部封装了socked,是能启服务的，启动后是能运行js脚本的【类比pip需要python环境】

　　所以前端项目就可以run在node服务器上，所有的项目运行的依赖就由npm来帮助我们来安装各种插件

　　　1）安装node

　　　　　　官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

　　　2) 安装npm 【cnpm国内的安装源，速度快】

　　　　　　node安装后就已经有了npm, 通过npm安装cnpm 【国内源】

　　　　　　npm install -g cnpm --registry=https://registry.npm.taobao.org

　　　3）安装脚手架

　　　　　　cnpm install -g @vue/cli

　　 4）清空缓存处理

　　　　　　若上面哪一步安装有问题，就执行一下下面命令，重新安装上面对应的命令

　　　　　　npm cache clean --force

　　2.创建Vue项目，

　　　要提前进入目标目录（项目应该创建在哪个目录下）

　　　选择自定义方式创建项目，

　　　　　vue create vue-proj 或 vue ui 【可视化创建】

　　　　　参数设置：回车=>确定；空格键=>选定或取消

　　　　　参数：* Manually select features 【自定义的】

　　　　　　　　* Babel 【把ECMS6转换ECMS5, 因为EMS5浏览器支持更好】

　　　　　　　　 PWA【优化Web 的】

　　　　　　　　* Router 【路由，前台页面自己完成路由转跳】

　　　　　　　　* Vuex 【仓库，全局的单例，子孙组件数据传递】

　　　　　　　　　CSS 【预编译的语言】

　　　　　　　　* Linter / Formatter【统一代码格式的】

　　　　　　　　　 Unit Testing / E2E Testing 【测试】

　　　　　选择大写的：

　　　　　　　　　*Use history......(Y/n) Y =>回车【形成历史转跳】

　　　　　　　　　* ESLint with error prevention only 【有错误或者没错误的提示】

　　　　　　　　　* Lint on save 【能保存】

　　　　　　　　　 Lint and fix on commit (requires Git) 【代码整合工具，必须要有git环境，暂时用不到】

　　　　　　　　　 * In dedicated config files 【是否将上面选择的设置创建单独的配置文件？】

　　　　　　　　　 In package.jason 【上面选择的设置放在这个文件中】

　　　　　　　　　　Save this as a preset for future projects?(y/N) N 【是否保存上面的设置到后面项目中，如果选了Y，后面就改不过来了】

　　　3. 启动服务

　　　　进入项目：cd vue-proj

　　　　启动服务：npm run serve　　| cnpm run serve

　　 4.打开 http://localhost:8080/

　　 5.项目移值，node_modules不需要【都是配置】；

　　　一样的操作系统：其它的均copy；不同操作系统只要public【图标和主页】和src => 需要安装一下环境：

　　　　　　1)cd到项目路径; 2) cnpm install

　　　项目创建完成，可以用pycharm打开

　　6. 项目目录介绍

　　　node_modules:项目依赖

　　　public:公用文件

　　　　favicon.icl 页面标签图标

　　　　　index.html 项目的唯一页面（单页面）

　　　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:使用说明

　7.　main.js 主脚本文件介绍：

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

在main中配置的信息就是给整个项目配置

已配置 vue | 根组件App |  路由 | 仓库

待配置：Cookie  |  ajax （axios） | element-ui


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

new Vue({
  router, 成员
  store,  成员
  render: h => h(App)  # 读取文件成template,给挂载点替换真实DOM渲染页面
}).$mount('#app')  # 挂载点

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from './store'

Vue.config.productionTip = false
//
// new Vue({
//   router,
//   store,
//   render: h => h(App)
// }).$mount('#app');  // 等同于el:

new Vue({
    el:'#app',
    router:router,
    store,
    // render: function (h) {
    //     return h(App)   //该h可以读App这个模板读成template，将结果返回出来给挂载点挂载
    // }                   // 【实例创建成功后，就回调h这个函数，挂载点最终将虚拟DOM替换真实DOM】

    // 解释：function (h) {return 1} | (h) => {return 1} | h => 1
    //简写
    render: h => h(App),
});

View Code

8. .vue组件文件

　　基本模板

<!--html代码：只有一个根标签-->
<template>

</template>

<!--js代码：在export default{}的括号内完成组件的各项成员data、methods-->
<script>
    export default {

    }
</script>


<!--css代码：scoped样式组件化， 样式只在该组件内部起作用-->
<style scoped>

</style>

View Code

　　自定义组件：

　　　　components/FannyComponent 子组件

<!--html代码：只有一个根标签-->
<template>
    <div class="fanny">
        <h1 :class="{active: is_active}" @click="btnClick">fanny组件</h1>
    </div>
</template>

<!--js代码：在export default{}的括号内完成组件的各项成员data、methods-->
<script>
    export default {
        data (){
            return{
                is_active:false
            }
        },
        methods:{
            btnClick (){
                this.is_active =!this.is_active
            }
        }
    }
</script>


<!--css代码：scoped样式组件化， 样式只在该组件内部起作用-->
<style scoped>
    .active {
        color: red;
    }
</style>

View Code

　　　　src/ views/About.vue 根组件中注册

<template>
    <div class="about">
        <h1>This is an about page</h1>
        <h2>好好sadf</h2>
        <fanny-comp></fanny-comp>
        <!--使用组件，两种方式-->
        <FannyComp></FannyComp>
    </div>
</template>

<script>
    // import FannyComp from '../components/FannyComponent'
    //两种方式，导入组件，组件名随意
    import FannyComp from '@/components/FannyComponent'


    export default {
        components:{
            FannyComp,  //注册组件
        }
    }
</script>

View Code

posted @ 2019-08-11 20:59 胖啊阅读(176) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

胖啊

每天进步一点点

day 79生命周期钩子、Vue项目开发

公告