-
获取原生的DOM方式($.refs)
给标签或者组件 添加ref <div ref = 'liu'>test</div> <Home ref = 'home'></Home> this.$refs.liu 获取原始的DOM对象 this.$refs.home 获取的是组件实例化对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"></div> </body> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> Vue.component('Test', { data(){ return{} }, template:` <div>测试组件</div> ` }); let App = { data(){ return{} }, template:` <div> <input type="text" ref="input"> <Test ref="testa"/> </div> `, mounted(){ // 聚焦input标签,用户可直接输入,this.$refs.input获取input标签 this.$refs.input.focus(); // 获取Test实例 console.log(this.$refs.testa); // 获取Test实例的父组件-->App实例对象 console.log(this.$refs.testa.$parent); // 获取根组件,也就是Vue实例对象,也可以直接this.$root获取 console.log(this.$refs.testa.$root); // 获取当前的子组件,Test实例对象,是一个数组 console.log(this.$children); } }; new Vue({ el: '#box', data(){ return{} }, template:`<App />`, components:{ App } }) </script> </html>
-
vue-cli的使用(脚手架)
-
安装并运行vue项目
1.安装之前,首先确定已经安装了node.js,可以运行npm命令; 2.由于npm安装较慢,所以可以通过 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装个cnpm(淘宝镜像源),通过cnpm下载依赖比较快; 3.全局安装vue-cli,命令:cnpm install -g @vue/cli,注意如果需要使用2.x的旧版本,就需要使用cnpm install -g @vue/cli-init; 4.使用webpack模板构建项目(一般都用这个),vue init webpack lf_project(project名称); 5. cd lf_project 6. cnpm install (or if using yarn: yarn),安装package.json中所有的依赖包 7. npm run dev 运行启动项目(运行package.json的scripts下的dev)
-
webpack一些参数说明
entry 整个项目的程序入口（main.js或index.js） output 输出的出口 loader 加载器 对es6代码的解析 babel-loader, css-loader 解析css文件，style-loader 将css代码添加一个style标签插入header标签中，url-loader plugins html-webpack-plugin 丑陋(UglifyJsPlugin)
-
依赖模块之间的导入
-
//A模块依赖B模块 b.js export const num = 3; export function f1(){}; export default {data(){}...}; a.js import * as b_all from './b.js' //导入全部,使用的话就用b_all.num,b_all.default等
-
-
src目录文件基本说明和使用
main.js 程序的主入口
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' // 导入路由对象router import router from './router' // 导入element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 记得一定要use Vue.use(ElementUI); import '../static/css/base.css'; Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', // 挂载router router, components: { App }, template: '<App/>' })
App.vue 应用页面
<template> <div id="app"> <el-container> <el-header style="height: 80px"> <div> <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg" alt=""> <li class="header-li" v-for="(item, index) in header_title_list" :key="item.id" > <router-link :to="{name:item.name}" ><span :class="{active:item.id==currentId}" @click="clickHandler(item.id)">{{ item.title }}</span></router-link> </li> </div> </el-header> <el-main> <router-view></router-view> </el-main> </el-container> </div> </template> <script> // 导航栏 let header_titles = [ {id:1, title:'首页',name:'Home'}, {id:2, title:'免费课程',name:'Course'}, {id:3, title:'轻课',name:'LCourse'}, {id:4, title:'学位课',name:'Subject'}, ]; export default { name: 'App', data(){ return { header_title_list:[], currentId:1, } }, created() { this.header_title_list = header_titles; }, methods:{ clickHandler(id){ this.currentId = id; } }, } </script> <style> .el-main{ margin: 0; padding: 0; } </style>
router文件下的index.js 路由信息,返回路由对象
import Vue from 'vue' import Router from 'vue-router' // @表示到src那一层的绝对路径,导入路由组件 import Home from '@/components/Home/Home' import Course from '@/components/Course/Course' // use路由对象 Vue.use(Router); // 创建Router实例 export default new Router({ // 去掉url的# mode:'history', routes: [ { path: '/', redirect:'/home' }, { path: '/home', name: 'Home', component: Home }, { path: '/course', name: 'Course', component: Course } ] })Home目录下的Home.vue
<template> <el-carousel indicator-position="outside" height="640px"> <el-carousel-item v-for="item in index_lbt" :key="item.id"> <img :src="item.image_url" alt="" > </el-carousel-item> </el-carousel> </template> <script> // 轮播图列表 let index_lbt = [ {id: 1, image_url: 'http://hcdn1.luffycity.com/static/frontend/degreecourse/1/%E5%90%8D%E4%BC%81@1x_1561112415.4336092.png'}, {id: 2, image_url: '//hcdn1.luffycity.com/static/frontend/degreecourse/1/Linux_1561112414.4031029.jpeg'}, ]; export default { name: "Home", data(){ return{ index_lbt:[], currentIndex:0, } }, created(){ this.index_lbt = index_lbt }, } </script> <style scoped> </style>
-