一、获取原生的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的使用的更多相关文章

  1. vue之获取原生的dom的方式

    1.获取原生的DOM的方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

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

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

  3. 获取原生的DOM方式,DIY脚手架,vue-cli的使用

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

  4. vue如何获取并操作DOM元素

    原文地址 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加re ...

  5. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  6. [前端] VUE基础 (6) (v-router插件、获取原生DOM)

    一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...

  7. 获取原生DOM,diy脚手架,vue-clide使用,element-ui的使用

    一.获取原生DOM的方式 给标签或者属性添加ref属性 //1.添加属性 <div ref='shy'><div> <Home ref='home'></Ho ...

  8. JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  9. vue 改变数据DOM不更新,获取不到DOM的解决方法

    1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...

随机推荐

  1. android使用wcf接收上传图片视频文件

    一.Android 权限配置文件: <?xml version="1.0" encoding="utf-8"?> <manifest xmln ...

  2. Ubuntu中Could not get lock /var/lib/dpkg/lock

    找出所有的 apt 以及 apt-get 进程: ps -A | grep apt-get 杀死进程: processnumbe 删除锁定文件: rm /var/lib/dpkg/loc 之后像下面这 ...

  3. 编译内核是出现:arch/arm/mm/tlb-v4wbi.S:64:error: too many positional arguments

    内核:Linux-3.4.2 编译内核出现arch/arm/mm/tlb-v4wbi.S:64:error: too many positional arguments 交叉工具链太老了,换新一点的. ...

  4. PHPstorm 常用快捷键操作

    1.ctrl+ N: 查找类 2.ctrl+ shift+ N: 全局搜索文件 ,优先文件名匹配的文件 3.ctrl + G: 定位行,跳转行 4.ctrl + F12: 显示当前页面类的所有方法 / ...

  5. C笔试题(二)

    /* 现在有一个数组 我们可以定义数组的子数组 如 数组 1 3 4 2 5 8 7 它的子数组可以是 1 3 4 3 4 2 5 等等 请写一个算法 找一个子数组 这个子数组递增不减少 并且是满足递 ...

  6. 9、IPA通路分析相关网页教程

    IPA FAQ: http://ingenuity.force.com/ipa/IPATutorials# ####有各种相关教程和帮助文件. IPA 分析结果展示: http://www.lucid ...

  7. Entity Framework Code-First(9.5):DataAnnotations - MaxLength Attribute

    DataAnnotations - MaxLength Attribute: MaxLength attribute can be applied to a string or array type ...

  8. [亂數] <細說> C/C++ 亂數基本使用與常見問題

    陸陸續續寫了 EA  一.二年,以前亂數引導文回頭看時才發現,怎麼有這麼多細節的錯誤.沒系統. 這篇文章主要引導初學者使用亂數,同時附上常被翻出來討論的議題,C/C++適用,唯以 C 語言撰之. 也由 ...

  9. 移除KVO的风险

    为之前项目添加一个功能用到了一个开源库XMTextView,然后运行报错提示: 显示没有注册一个叫font的观察者,所以闪退.但是我的UITextView没有添加观察者呀,怎么会删除呢? 原来是由分类 ...

  10. SCUT - 223 - Maya - 构造

    https://scut.online/p/223 给定两个数N,M,构造M个在[0,80000]以内的互不相同的数使之异或和为N. 首先特判一下M<=2的两个简单情况,还有坑爹的-1! 然后想 ...