Vue快速学习_第四节

获取原生的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>

posted on 2019-07-16 21:27 ~泪小白~ 阅读(306) 评论(0) 编辑收藏举报

获取原生的DOM方式($.refs)

vue-cli的使用(脚手架)

安装并运行vue项目

webpack一些参数说明

src目录文件基本说明和使用