• 获取原生的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. Nmap之用法

    简介 Nmap是一款开源免费的网络发现(Network Discovery)和安全审计(Security Auditing)工具.软件名字Nmap是Network Mapper的简称. 功能架构图 N ...

  2. 【Adobe Air程序开发】用Adobe Flex3开发AIR应用程序–入门指南

    1 安装Adobe AIR 运行时,和java的JVM类似.Adobe AIR 运行时允许在桌面运行AIR应用程序,脱离游览器的束缚.下载安装文件http://labs.adobe.com/downl ...

  3. Node流操作(启动器forever)

    详情: https://www.cnblogs.com/lalalagq/p/9749680.html 流:读取流,写入流,双向读写流. 读写流——压缩.加密 数据库不能直接接受流 sf.readFi ...

  4. [bzoj4026]dC Loves Number Theory_主席树_质因数分解_欧拉函数

    dC Loves Number Theory 题目大意:dC 在秒了BZOJ 上所有的数论题后,感觉萌萌哒,想出了这么一道水题,来拯救日益枯竭的水题资源. 给定一个长度为 n的正整数序列A,有q次询问 ...

  5. Spring5的总体架构图

    Spring5的主体架构图 主要是四大部分:Web.Data Access/Integration.Core Container.中间层,具体见下图:

  6. 【LOJ】#3044. 「ZJOI2019」Minimax 搜索

    LOJ#3044. 「ZJOI2019」Minimax 搜索 一个菜鸡的50pts暴力 设\(dp[u][j]\)表示\(u\)用\(j\)次操作能使得\(u\)的大小改变的方案数 设每个点的初始答案 ...

  7. nginx-host

    下载nginx镜像 docker pull docker.io/nginx:latest 由于calico网络不支持http协议,所以即使你在iptables中配置了nat路由,将访问宿主机80端口的 ...

  8. QT编译Mysql驱动问题及解决方案

    默认情况下,qt 并没有自带mysql的数据库插件,需要自己编译先安装mysql server ,运行setup.exe时选择自定义安装,安装目录设为"D:\mysqldev"不要 ...

  9. 解决VS2015 不能设置下面的断点**** 断点未能绑定

    解决VS2015   不能设置下面的断点**** 断点未能绑定 1. 清理解决方案  ,  重新生成解决方案 ,  无效!! 2. 选项-- 调试 -- 启用编辑并继续     无效!! 3.   启 ...

  10. ubuntu 编译zbar 静态库

    wget http://downloads.sourceforge.net/project/zbar/zbar/0.10/zbar-0.10.tar.gz tar -zvxf zbar-0.10.ta ...