• 获取原生的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快速学习_第四节的更多相关文章

  1. Vue快速学习_第五节

    axios安装及使用 网站文档地址:https://www.kancloud.cn/yunye/axios/234845 1.npm安装 cnpm install axios 2.// 在main.j ...

  2. Vue快速学习_第一节

    之前写CRM都是Django前后端一起写的,在大部分项目中实际上前后端是分离的,因此我们需要学习一个前端框架来进行前端页面的编写,这里选择了Vue进行学习,好了开始学习吧. 1.ES6部分知识点学习 ...

  3. Vue快速学习_第二节

    表单输入绑定(v-model) v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定(注意只在表单这几个可 ...

  4. Vue快速学习_第三节

    过滤器 局部过滤器(组件内部使用的过滤器,跟django的很像, filters: {过滤器的名字: {function(val, a,b){}}} 全局过滤器(全局过滤器,只要过滤器一创建,在任何组 ...

  5. 学习HTML 第四节.插入图像

    学习HTML 第四节.插入图像 全是文字的网页太枯燥了吧,我们来搞个图片上去! <!DOCTYPE html><html><head><meta charse ...

  6. 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击

    风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...

  7. android内部培训视频_第四节(1)_异步网络操作

    第四节(1):异步网络操作  一.结合asyncTask下载网络图片 1.定义下载类,继承自asyncTask,参数分别为:String(url地址),Integer(刻度,本例没有用到),BitMa ...

  8. [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347 本文作者:sushengmiyan ------------------ ...

  9. VUE的学习_从入门到放弃（一）

    一.vue的功能及作用 工作方式如下 1.不用操作DOM 2.单页面应用web项目 简称:SPA 3.当下各种新框架都采用的类似Vue或者类似React的语法去作为主语法,微信小程序/MpVue... ...

随机推荐

  1. DOTS概述

    Unity数据导向技术栈有三个主要部分:Unity实体 - 组件 - 系统(ECS),Unity C#作业系统和Unity Burst编译器. 实体 - 组件 - 系统概述 ECS提供了一种游戏设计方 ...

  2. MySQL_约束条件

    目录 八个约束条件 1.非空约束NOT NULL 2.主键约束PRIMARY KEY 3.多字段联合主键(复合主键) 4.唯一约束UNIQUE 5.默认约束DEFAULT 6.外键约束FOREIGN ...

  3. MySQL_数据表命令

    目录 数据表操作 1.创建数据表: 2. 修改表结构: 数据表查看 1.查看数据库中所有表的信息 2.查看表结构 3.查看创建表时所输入的命令 4.删除数据表 数据表操作 关于Mysql的数据类型,点 ...

  4. [转帖]开始使用Chronograf

    地址:https://docs.influxdata.com/chronograf/v1.6/introduction/getting-started/ https://www.cnblogs.com ...

  5. Java更新Oracle的clob类型字段

    Java更新Oracle的clob类型字段 1.查询该clob字段 2.处理该clob字段查询结果 3.更新该clob字段查询结果 1.查询该clob字段 <select id="se ...

  6. DAO语句如何定义属性类型

    字体设置:代码 14px 文字 幼圆 15px public interface IAddressDAO { //添加地址 public boolean doCreate(Address addres ...

  7. if(!ConnectDBProc(strCmd,m_dbUserName,m_dbPassword))

    https://wenku.baidu.com/view/826b3d426bec0975f565e204.html

  8. 后缀自动机----一种将字符串变成DAG的方法

    后缀自动机 (suffix automaton, SAM) 是一个能解决许多字符串相关问题的有力的数据结构.(否则我们也不会用它) 举几个例子,以下的字符串问题都可以在线性时间内通过 SAM 解决 1 ...

  9. vue axios拦截跳转

    第一步:添加需要拦截的页面 { path: '/control', name: 'Control', meta: { requireAuth: true }, 第二步:页面拦截 router.befo ...

  10. Wannafly挑战赛24

    A. 石子游戏 Alice和Bob在玩游戏,他们面前有n堆石子,对于这些石子他们可以轮流进行一些操作,不能进行下去的人则输掉这局游戏.可以进行两种操作:1. 把石子数为奇数的一堆石子分为两堆正整数个石 ...