• 获取原生的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. Autoit安装及启动

    1.Autoit下载: 官网下载地址:https://www.autoitscript.com/site/autoit/downloads/ 提供百度网盘下载:https://pan.baidu.co ...

  2. SGI STL内存管理

    前言 万丈高楼平地起,内存管理在C++领域里扮演着举足轻重的作用.对于SGI STL这么重量级的作品,当然少不了内存管理的实现.同时,想要从深层次理解SGI STL的原理,必须先将内存管理这部分的内容 ...

  3. poco编译与运行

    1.引言 Poco C++库是: 一系列C++类库,类似Java类库,.Net框架,Apple的Cocoa; 侧重于互联网时代的网络应用程序 使用高效的,现代的标准ANSI/ISO C++,并基于ST ...

  4. mysql oracle postgresql 体系架构对比

    2个角度sqlservermysqloracle 12cpostgresql如果从create database角度来看 那么一个实例是可以对应多个数据库的~如果从实例和磁盘上的数据库文件(数据文件. ...

  5. Python 3.8.0 正式版发布，新特性初体验 全面介绍

    Python 3.8.0 正式版发布,新特性初体验 北京时间 10 月 15 日,Python 官方发布了 3.8.0 正式版,该版本较 3.7 版本再次带来了多个非常实用的新特性. 赋值表达式 PE ...

  6. 基于从库+binlog方式恢复数据

    基于从库+binlog方式恢复数据 将bkxt从库的全备份在rescs5上恢复一份,恢复到6306端口,用cmdb操作 恢复全备后执行如下操作 set global read_only=OFF; st ...

  7. Linxu-mysql5.7源码安装

    Mysql5.7 Linux安装教程 1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置 ...

  8. Leetcode 杂题

    盛最多水的容器   给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0) ...

  9. lsof---列出当前系统打开的文件信息

    lsof---list open file,一个列出当前系统打开文件的工具 1.lsof查找原理 在Linux系统中,系统为了方便管理进程,会在/proc下为每一个运行中的进程创建一个目录,目录名就是 ...

  10. Tomcat中的服务器组件和 服务组件

    开始学习Tocmat时,都是学习如何通过实例化一个连接器 和 容器 来获得一个Servlet容器,并将连接器  和 servlet容器相互关联,但是之前学习的都只有一个连接器可以使用,该连接器服务80 ...