• 获取原生的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. 连载一：RobotFramework+SeleniumWebdriver+RIDE的安装

    安装前说明: Robot Framework自动化测试框架+可视化编辑工具RIDE+Selenium2这是规范的webAPI. 一.通过下载安装包安装 1)RF 框架是基于 Python 语言的,所以 ...

  2. web系统认证与鉴权中的一些问题

    认证鉴权系统的初心: 空间管理: 1.他是谁? 他登陆了没有? 2.他要做什么? 2.1 他要使用什么功能? 他是否有这个功能的权限. 2.2 他要使用这个功能做什么操作? 他是否有这个功能的这个操作 ...

  3. python之pip使用技巧

    pip 镜像临时使用:pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyspider永久:直接在user目录中创建一个pip目录:C: ...

  4. IntelliJ IDEA 2019.2.1 破解教程, 最新激活码(激活到2089年8月，亲测有效，持续更新中...)

    当前最新版本 IDEA 2019.2.1 本来笔者这边是有个正版激活码可以使用的,但是,2019.9月3号的时候,一些小伙伴反映这个注册码已经失效了,于是拿着自己的 IDEA, 赶快测试了一下,果不其 ...

  5. React + Antd开发模式下的Excel导入功能

    具体js如下,配合的是antd里面的upload组件,使用的是xlsx插件 npm :  npm install xlsx 插件链接: https://github.com/SheetJS/sheet ...

  6. 【Python】【demo实验11】【练习实例】【三个整数的立方和】

    目的:找到 除了9n±4型自然数外,所有100以内的自然数都能写成三个整数的立方和    这每个数的表达方式: 源代码: #!/usr/bin/python # encoding=utf-8 # -* ...

  7. css小记：hover 鼠标滑过让该元素的子元素或者其他元素改变样式

    <!DOCTYPE><head><meta http-equiv="Content-Type" content="text/html; ch ...

  8. mysql之存储过程基础

    存储过程 procedure 可以理解为一个处理增删改,没有返回值得函数 创建存储过程的基本语法 create procedure 过程名 ([参数列表]) begin --过程体 end 存储过程主 ...

  9. DashBoard-身份验证

    dashboard1.7.1版本之后,新增了用户登录认证的功能. 默认dashboard会跳转到登录页面: 我们可以看到dashboard提供了Kubeconfig和token两种登录方式,我们可以直 ...

  10. MySQL中导入Excel表格中的数据

    在数据库中建立好响应的数据库.表(参考excel表格中列中的名字和内容): 将excel表格另存为txt文件,选择“文本文件(制表符分割)”: 打开相应的txt文件,只留下要导入的数据(windows ...