一、获取原生的DOM的方式

　　在js中，我们可以通过id、class或者标签获取DOM元素，vue中也为我们提供了获取原生DOM的方法，就是给标签或者组件添加ref属性，通过this.$refs获取，如下：

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    // 创建一个全局组件Test

    Vue.component('Test', {

        data(){

            return {}

        },

        template:`<div>我是测试组件</div>`

    });

    // 创建一个全局组件Test2

    Vue.component('Test2', {

        data(){

            return {}

        },

        template:`<div>我是测试组件2</div>`

    });

    // 声明一个局部组件App

    let App = {

        data(){

            return {}

        },

        template:`

            <div class="app">

                <input ref="input" type="text">

                <Test ref="test"></Test>

                <Test2 ref="testB"></Test2>

            </div>

        `,

        // DOM加载完成后调用mounted

        mounted(){

            // this.$refs.input   获取input输入框

            this.$refs.input.focus();

            // this.$refs.test    获取Test组件实例对象

            // this.$refs.test.$parent    获取Test组件的父组件

            // this.$refs.test.$root    获取根实例对象Vue

            // this.$children   获取当前组件的所有子组件，是一个列表

            // this.$refs        获取所有有ref属性的DOM元素或者组件实例对象

            // for循环遍历

            for(let key in this.$refs){

                console.log(this.$refs[key])

            }

        }

    };

    // Vue实例对象

    new Vue({

        el: '#app',

        data() {

            return {}

        },

        template:`<App></App>`,

        components:{

            App  // 挂载组件App

        }

    })

</script>

　　总结：

　　　　1）<div ref="ha">哈哈哈</div> 给标签添加ref属性，this.$refs.ha 获取原始DOM对象

　　　　2）<Home ref="abc"></Home> 给组件添加ref属性，this.$refs.abc 获取组件实例化对象

二、DIYvue-cli脚手架

　　DIY脚手架是为了辅助我们更深入理解vue-cli中的文件结构，开发过程无需自己写脚手架，使用vue-cli即可。

　　YEOMAN网址：http://yeoman.io/

　　vue-cli中使用了es6的module模块化编程，但是前端浏览器不支持模块化中的语法（导入import和导出export default等），我们需要借助webpack工具让它去支持，而webpack的使用需要依赖nodejs环境，所有后台语言都是支持模块的，nodejs是一种基于JavaScript的服务器语言。

　　在diy脚手架之前，先了解一下webpack（前端中的工具，官网：https://www.webpackjs.com/），它是一个打包工具（前端中三大打包工具有grunt、gulp和webpack）。点击查看webpack详情>>>

1、es6的module（下面示例中main.js依赖module.js模块）

// module.js

var person = {

　　name: '张三',

　　fav:function(){

　　　　alert(1);

　　}

}

export default person;

var name;

name = 23;

export {name} 

export var num2 = 34;

export function add(){

　　alert(2);

}

// main.js

import * as a from './module.js'     // *与css中的符号冲突，因此可以起一个别名a

　　总结：上面示例中，main.js文件用到了module.js中的变量，这时要用webpack将这两个打包成一个bundle.js文件，在html文件中直接引用bundle.js即可，所以，我们将main.js作为入口文件，bundle.js作为出口文件，使用命令webpack ./main.js ./bundle.js进行编译，生成bundle.js，注意你想在哪个目录下生成bundle.js文件就要进入哪个目录下执行命令。且修改了代码就要编译，这种手动编译的方式显得很笨重，后面介绍的脚手架vue-cli会自动帮我们做这些工作。

2、模块化深入

// index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app"></div>

<script src="./bundle.js"></script>

</body>

</html>

// App.js - 这是一个App组件

let App = {

    template:`

        <div>我时App组件</div>

    `

};

export default App

// main.js - webpack入口文件，依赖vue.js和App.js

import Vue from './vue.js'

import App from './App.js'

new Vue({

    el:'#app',

    data(){

        return {}

    },

    template:`<App></App>`,

    components:{

        App

    }

});

　总结：这种方式还是要依赖webpack软件，手动执行webpack ./main.js ./bundle.js命令，编译生成bundle.js方可运行，还是没有带来多少方便。执行命令后效果如下图：

3、使用npm和DIY脚手架过程其实我们可以使用node的npm（node package manager，即包管理器，相当于python中的pip3），也就是在项目中使用npm下载webapck模块，接下来我们先来学习如何使用npm和一步步DIY脚手架。

　　// 以上例中目录为例，进入到当前项目目录module_deep

　　// 执行下面命令后会在当前目录下生成package.json文件

1	`npm init` `--yes` `//` `--yes表示直接在当前目录生成package.json文件，否则会问一些参数`

　　// 下载webpack包，-D（即devDependencies）表示开发环境下依赖webpack包

　　// 执行下面命令后会在package.json中的devDependencies字段中添加一条"webpack":"^3.12.0"

1	`npm i webpack@3.12.0` `-D` `//` `下载过cnpm的可以使用npm i webpack@3.12.0` `-D命令代替`

　　// npm ...会执行package.json中的"script"字段中的命令，也就是说若package.js中script字段如下：

"script": {

  "dev" : "webpack ./main.js ./bundle.js"

}

　　// 那么执行npm run dev相当于执行webpack ./main.js ./bundle.js，结果同上，即生成bundle.js

　　// 若package.json中script字段中dev字段对应的是webpack，如下：

"script": {

  "dev" : "webpack"

}

　　// 那么，npm会自动去找当前目录下的webpack.config.js文件

　　// 其中都是nodejs代码，包括webpack的入口文件，输出文件，webpack.config.js内容如下：

module.exports = {

    entry:{

        'main': './main.js'

    },

    output:{

        'filename': './bundle.js'

    }

}

　// 所以，当按照上述步骤配置好了package.json和webpack.config.js这两个文件时，同样可以执行

1	`npm run dev`

　　// 自动生成出口文件bundle.js，到此，我们一直要手动执行命令，虽然命令越来越简单，但结果一样

　　// 在开发环境中，我们希望它可以监听到当修改代码后，自动编译

　　// 在开发完成准备上线时，我们需要进行打包编译一次

　　// 这时我们就不要再用webpack.config.js文件作为配置文件了，因生产和开发环境需求不同

　　// 所以用以下两个文件来替代webpack.config.js文件，在webpack.json中指定好即可

　　// webpack.dev.config.js作为开发环境下的配置文件

　　// webpack.pro.config.js作为生产环境下的配置文件

　　// webpack.json指定方式如下

"script": {

　　"dev" : "webpack --config ./webpack.dev.config.js",   // 开发环境

　　"build" : "webpack --config ./webpack.pro.config.js"   // 生产环境

}

　　// 除了js文件，我们还有css文件，这是要在入口文件main.js中增加导入css文件的语句，如下：

import './index.css'

　　// 这时直接编译会报如下错误：

　　// 下载css文件和style标签的解析器，css-loader解析css文件，style-loader解析style标签// 因为对于webpack来说，css文件也是一个模块，但是像这样的文件，webpack需要loaders处理

1	`npm i css-loader style-loader` `-D`

　　// 在webpack.dev.config.js和webpack.pro.config.js中配置css文件的loader，如下：

module.exports = {

    entry:{

        'main': './main.js'

    },

    output:{

        'filename': './bundle.js'

    },

    watch:true, // 监听代码修改自动生成bundle.js，编译hung住，只在开发环境

    module:{

        loaders:[  //loader加载器，对es6代码的解析，一个叫babel-loader的

            {

                test:/\.css$/,

                loader:'style-loader!css-loader'

            }

        ]

    }

}

　　// 下载html-webpack-plugin插件，用于将index.html放入dist目录下

1	`npm i html-webpack-plugin` `-D` `//` `-D 相当于` `--save-dev`

　　// 注意：通过npm下载的包直接导入即可，如下：

const HtmlWebpackPlugin = require('html-webpack-pligin');

　　// 并且要在webpack.dep.config.js中配置，如下：

plugins:[

    new HtmlWebpackPlugin({

        template:'./index.html',  // 参照物

    })

]

　　// 执行命令npm run dev后，自动生成文件dist，其中是index.html和bundle.js文件

　　// 而vue是模块化开发，App.js为App.vue文件

　　// 下载vue解析器，vue-loader解析vue文件，vue-template-compiler解析vue文件中template

1	`npm install vue-loader@14.1.1` `vue-template-compiler@2.5.17` `-D`

　　// 接下来就可以创建App.vue文件，文件内容可如下：

<template>

    <div>我是一个App</div>

</template>

<script>

export default {

    name:'App',  // 给当前组件起名

    data(){

        return {}

    },

    methods:{

    }

}

</script>

<style>

</style>

　　// 下载vue和vue-router

npm i vue vue-router -S    // vue和 vue-router是项目依赖，-S表示保存项目依赖的包

　　// 引用直接写下载包的名字即可，不用再写路径了，如下：

import Vue from 'vue'

　　// 下载webpack-dev-server，是webpack的升级版，在前端搭一个服务器，即nodejs

1	`npm install webpack-dev-server` `--save-dev`

　　// 配置package.json，如下

"script": {

  "dev" : "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js",  // 开发环境下自动打开浏览器，自动刷新

  "build": "webpack --config ./webpack.pro.config.js"

}

　　// 渲染机制render

render:c=>c(App)

　　// 最后npm run dev即可运行项目，通过访问它开的服务器可以访问页面，至此，我们已经一步步搭好了一个脚手架，在此基础上开发即可，接下来学习的脚手架就帮我们做好了这些工作，它生成的目录结构跟我们自己创建的类似。

三、vue-cli的使用

　　使用脚手架创建一个项目，只要下载了vue-cli就有了vue的命令

1	`vue` `-V` `//` `查看vue版本`

　　目前可用的模板有webpack模板和webpack-simple模板，我们主要用前者，后者简单了解

1、使用webpack-simple模板创建项目

　　// init初始化命令是版本2的命令，拉取了cli2后，即可用版本2又可用版本3的

1	`vue init webpack-simple` `04-my-project` `//` `自动生成名为04-my-project的项目，目录如下`

04-my-project

　　|--.babelrc

　　|--.editorconfig

　　|--.gitignore

　　|--index.html

　　|--package.json

　　|--README.json

　　|--webpack.config.js

　　|--src

　　　　|--App.vue

　　　　|--main.js

　　　　|--assets

　　　　　　　|--...

　　// 执行下面命令，下载package.json中的包，注意一定要进入当前项目，即cd 04-my-project

1	`npm install` `//` `执行后项目文件下生成node_modules目录`

　　// 启动项目

1	`npm run dev`

　　// 下载vue-router

1	`npm i vue-router` `-S` `//` `-S下载到当前项目中`

　　// vue提供scoped属性，使得style属性只对当前组件有效，不写就是全局有效

<style scoped></style>

2、使用webpack模板创建项目

　　// 创建项目

1	`vue init webpack` `05-webpack-project` `//` `创建项目名为05-webpack-project的项目`

　　// 若使用单页面应用，则vue-router选项输yes，其他都是no，电脑有npm就选择npm下载

　　// 进入项目

1	`cd` `05-webpack-project`

　　// 安装依赖的包

1	`npm install`

　　// 启动项目

1	`npm run dev`

　　// 最后生成目录如下

05-webpack-project

　　|--.babelrc

　　|--.editorconfig

　　|--.gitignore

　　|--.postcssrc.js

　　|--index.html

　　|--package.json

　　|--README.md

　　|--build 文件夹

　　|--config 文件夹

　　|--node_modules 文件夹

　　|--src 文件夹

　　|--static 文件夹

　　注意：nodejs中有这样一个机制，即若一个文件夹下只有index.js，则直接写文件夹名字即可。

　　接下来就可以写项目了！

4、使用elementui（ElementUI依赖vue，引用了要Vue.use(ElementUI)）

　　// 下载到项目中

1	`npm i element-ui` `-S`

　　详细内容参见官网：http://element-cn.eleme.io/#/zh-CN

　　main.js中使用

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

5、全局css

　　全局css样式文件，可以在static下创建global文件夹，创建index.css，再在main.js中引用即可。

　　main.js中引用方式如下：

import '../static/global/index.css'

5、query查询（会在当前路径下拼接查询条件 '?userid=2'，后期将等号后边的动态起来）

<router-link :to="{name:'Course', query:{userid:2}}">免费课程</router-link>

四、补充知识点

1、下载webpack命令

1	`npm i webpack@3.12.0` `-g` `//` `-g表示global`

　　如果出现下面的错误，则再执行npm cache clear --force，如下图：

　　通过module.exports = 变量抛出2、CMD需要在nodejs的环境下

　　通过require('./time.js') 引入

　　这是CMD规范，了解即可，而vue中使用的是es6的module规范。

2、pycharm安装vue

　　1）file - > settings - >Plugins搜索vue，点击Search in repositonies，如下图：

　　2）点击左侧Vue.js，点击右侧绿色按钮Install，如下图：

　　3）安装完成后重启pycharm即可。

Vue 4 -- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用的更多相关文章

vue之获取原生的dom的方式
1.获取原生的DOM的方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
Vue（4）- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用
一.获取原生的DOM的方式在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...
获取原生的DOM方式,DIY脚手架,vue-cli的使用
一 . 获取原生的DOM的方式在js中,我们可以通过id, class 或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加 ref 属性,通过 this.$r ...
vue如何获取并操作DOM元素
原文地址方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二: 使用ref,给相应的元素加re ...
vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
[前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
获取原生DOM,diy脚手架,vue-clide使用,element-ui的使用
一.获取原生DOM的方式给标签或者属性添加ref属性 //1.添加属性 <div ref='shy'><div> <Home ref='home'></Ho ...
JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .ge ...
vue 改变数据DOM不更新，获取不到DOM的解决方法
1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...

随机推荐

uoj problem 11 ydc的大树
题目大意: 给定一颗黑白树.允许删除一个白点.最大化删点后无法与删点前距自己最远的黑点连通的黑点个数.并求出方案数. 题解: 这道题很棒棒啊. 一开始想了一个做法,要用LCT去搞,特别麻烦而且还是\( ...
bzoj 4500: 矩阵差分约束系统
题目: Description 有一个n*m的矩阵,初始每个格子的权值都为0,可以对矩阵执行两种操作: 选择一行, 该行每个格子的权值加1或减1. 选择一列, 该列每个格子的权值加1或减1. 现在有K ...
逐步改用 IronPython 开发你的 ASP.NET 应用程序
IronPython for ASP.NET 的 CTP 已经发布有一段时间了,我们在看了官方提供的范例之后,相信对一个 ASP.NET 应用程序中完全使用 IronPython 开发还是有一些担心的 ...
Poj 2503 Babelfish(Map操作)
一.Description You have just moved from Waterloo to a big city. The people here speak an incomprehens ...
IDEA常用快捷键整理
快速定位文件: Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 Alt+Shift+C,最近打开的文件 Ctrl+N,快速打开类 Ctrl+Shift+N,快速打开文件当 ...
C#图片压缩类winform
using System;using System.Collections.Generic;using System.Text;using System.Drawing;using System.Dr ...
利用java mail发送邮件
import java.util.Date; import java.util.Properties; import javax.activation.DataHandler; import java ...
Ubuntu使用crontab 使用举例
除了这些固定值外,还可以配合星号(*),逗号(,),和斜线(/)来表示一些其他的含义: 星号表示任意值,比如在小时部分填写 * 代表任意小时(每小时) 逗号 ...
《精通Spring4.X企业应用开发实战》读后感第六章（国际化）
8、泛型程序设计与c++标准模板库4.标准c++库中的算法
标准c++算法是通过迭代器和模板来实现的,其实算法本身就是一种函数模板. 算法从迭代器那里获得一个元素,而迭代器则知道一个元素在容器中的什么位置.迭代器查找元素的位置并将这些信息提供给算法以便算法能够 ...

Vue 4 -- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用