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>

巴特西

Vue快速学习_第四节

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

vue-cli的使用(脚手架)

安装并运行vue项目

webpack一些参数说明

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

最新文章

热门文章