• 获取原生的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. C#大文件流式压缩加解密

    * * , CancellationToken token=default) { try { FileStream zipStream = new FileStream(writeFile, File ...

  2. 【JAVA系列】使用JavaScript实现网站访问次数统计代码

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[JAVA系列]使用JavaScript实现网站 ...

  3. PI膜热作用机理

    一.热分析法: 二.研究成果 1.PI膜热老化机理 实验条件:8根500w的碘钨灯加热,200倍光学显微镜观察,PI膜的技术指标 实验概述:本研究分别以150 ℃ ,  175 ℃ , 200 ℃ , ...

  4. [转帖]docker容器保持运行不退出

    docker容器保持运行不退出 2019年01月20日 23:21:22 chvalrous 阅读数 1511   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  5. 【LOJ】#3030. 「JOISC 2019 Day1」考试

    LOJ#3030. 「JOISC 2019 Day1」考试 看起来求一个奇怪图形(两条和坐标轴平行的线被切掉了一个角)内包括的点个数 too naive! 首先熟练的转化求不被这个图形包含的个数 -- ...

  6. SafeArrayGetUBound(EveryPatientInfo.parray,1,&UBound);

    SafeArray在ADO编程中经常使用,它的主要目的是用于automation中的数组型参数的传递.因为在网络环境中,数组是不能直接传递的,而必须将其包装成Safe Array.实质上Safe Ar ...

  7. one：arguments对象伪数组

    这是我的第一个博客 <script> //计算N个数字的和 //定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传入了几个参数,没办法计算, // 但是如果在函数中知道了参数的 ...

  8. Django web框架 下载安装 简单项目搭建

    什么是web应用? Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件 应用程序有两种模式C/S.B/S.C/S是客 ...

  9. import xxx和from xxx import xx中修改被导入模块里面的变量的坑

    现在有如下几个模块: A.py 功能:定义全局变量,供其他模块使用 name = "张三" lists = [1, 2, 3, 4, 5] B.py 功能:打印A.py中的变量 f ...

  10. eclipse 创建Java web项目 Cannot change version of project facet Dynamic web module to xxx

    问题描述: 用Eclipse创建Java web项目时选择的Artifact Id为maven-artchetype-webapp,由于这个archetype比较老,用的servlet还是2.3的. ...