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文件
在main中配置的信息就是给整个项目配置
已配置 vue | 根组件App | 路由 | 仓库
以后还可以配置 cookie | ajax(axios) | element-ui
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>