获取原生DOM,diy脚手架,vue-clide使用,element-ui的使用
一.获取原生DOM的方式
给标签或者属性添加ref属性
//1.添加属性
<div ref='shy'><div>
<Home ref='home'></Home>
//2.获取原始DOM
this.$refs.shy
//3.组件实例化对象
this.$refs.home
使用实例
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script>
Vue.component("Test1",{
data(){return{}},
template:`<div>我是test1组件</div>`,
})
Vue.component("Test2",{
data(){return{}},
template:`<div>我是test2组件</div>`,
})
let App={
data(){return{}},
template:`<div>
<input type="text" ref="input">
<Test1 ref="test1"></Test1>
<Test2 ref="test2"></Test2>
</div>`,
mounted(){
//input输入框的默认聚焦
//获取原始Dom
console.log(this.$refs.input.focus())
//获取组件实例对象
console.log(this.$refs.test1)
console.log(this.$refs.test2)
//获取父组件
console.log(this.$refs.test1.$parent)
//获取跟组件Vue
console.log(this.$refs.test1.$root)
//获取子组件,结果是一个列表
console.log(this.$children);
//循环得到每一个子组件
for(let key in this.$refs){
console.log(this.$refs[key])
}
}
}
new Vue({
el:"#app",
data(){return{}},
template:`<App></App>`,
components:{
App
}
})
</script>
</body>
二.DIY脚手架(不重要)
webpack项目开发的依赖
1.webpack
webpack是一个现代JavaScript应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
2.历史介绍
2009年初，commonjs规范还未出来，此时前端开发人员编写的代码都是非模块化的，
那个时候开发人员经常需要十分留意文件加载顺序所带来的依赖问题
与此同时 nodejs开启了js全栈大门，而requirejs在国外也带动着前端逐步实现模块化
同时国内seajs也进行了大力推广
AMD 规范 ，具体实现是requirejs define('模块id',[模块依赖1,模块依赖2],function(){ return ;}) , ajax请求文件并加载
Commonjs || CMD 规范seajs 淘宝玉伯
commonjs和cmd非常相似的
cmd require/module.exports
commonjs是js在后端语言的规范: 模块、文件操作、操作系统底层
CMD 仅仅是模块定义
UMD 通用模块定义，一种既能兼容amd也能兼容commonjs 也能兼容浏览器环境运行的万能代码
npm/bower集中包管理的方式备受青睐，12年browserify/webpack诞生
npm 是可以下载前后端的js代码475000个包
bower 只能下载前端的js代码,bower 在下载bootstrap的时候会自动的下载jquery
browserify 解决让require可以运行在浏览器，分析require的关系，组装代码
webpack 打包工具，占市场主流
3.前端模块的引用
(1)在模块中
var add = function () {
alert(11111);
}
module.exports = add
(2)导入
var p = require('./time.js')
console.log(p)
p();
4.webpack模块化支持
在模块中
var person = {
name:'张三',
fav:function () {
alert(1);
}
}
export default person
导入
import * as a from './module.js' console.log(a.add())
执行
webpack ./main.js ./bundle.js
5.webpack模块使用
npm --init yes
生成一个package配置文件
npm i webpack@3.12.0 -D
下载webpack依赖
npm run dev
让项目跑起来
三.vue-cli的使用
1.使用vue-cli
1.电脑上,linux,unix等安装nodesjs:npm 包管理器
2.
通过vue -v查看当前版本
3.下载的是3的新版本,使用旧版本
4.先看清除当前的根目录是哪个,
如果不是my-project,一定要企鹅日到当前目录下,然后再执行: npm install
5.运行项目:npm run dev
2.创建一个项目
3.执行顺序
当访问的路径为/时
4.scoped当前的样式只对当前
<style scoped>
h2{
color: green;
}
</style>
四.element-ui的使用
1.地址:http://element.eleme.io/#/zh-CN/component/installation
与bootstrap类似
引入:
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
获取原生DOM,diy脚手架,vue-clide使用,element-ui的使用的更多相关文章
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- FastAPI实践项目：SayHello(FastAPI + vue.js + axios + element ui)
目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...
- vue项目使用element ui的Checkbox
最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...
- 在vue中关于element UI 中表格实现下载功能，表头添加按钮，和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- vue加载Element ui地址省市区插件-- element-china-area-data
1.安装 npm install element-china-area-data -S 2.使用(引入) import { provinceAndCityData, regionData, provi ...
- vue同时安装element ui跟 vant
记一个卡了我比较久的问题,之前弄的心态爆炸各种问题. 现在来记录一下,首先我vant是已经安装成功了的. 然后引入element ui npm i element-ui -S 接着按需引入,安装插件 ...
- Vue（4）- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用
一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...
- Vue 4 -- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用
一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...
随机推荐
- flex新的心得
主要是对于flex: 与width: 的心得,先看代码. <head> <meta charset="UTF-8"> <meta name=" ...
- 《冰球撞击》Android休闲桌球类游戏现已面试，快来下载吧！
<冰球撞击>Android休闲桌球类游戏现已完工上市快来下载吧! http://pan.baidu.com/s/1dD9vIRv <冰球撞击>是一个类似玩投篮机操作方式的And ...
- java server wrapper 和 maven assembly 插件
Java Service Wrapper工具YAJSW 简介信息 YAJSW是一个开源的Java服务包装(Java Service Wrapper)工具.YAJSW允许您把任何应用程序安装为windo ...
- ajax 如何使用不同的namespace的action
ajax 如何使用不同的namespace的action 由于我的question_save于/question命名空间,一世ajax的url成:"../question/question_ ...
- java_Mac安装多个JDK版本并设置环境变量
JDK6.JDK7.JDK8三个版本的汇总地址:https://pan.baidu.com/s/1pKSYv8Z 安装 JDK6安装 JDK6下载地址 见网盘 安装完毕后确认版本 JavaForOSX ...
- LeapMotion Demo2
原文:LeapMotion Demo2 官方doc有四个手势,最近尝试实现对握拳的识别,并能在我的程序界面上体现出来. 调试过程较为繁琐,幸好最终效果还差强人意! 首先看看我的效果图: ...
- 【转载】centos7+tomcat部署JavaWeb项目超详细步骤
我们平时访问的网站大多都是发布在云服务器上的,比如阿里云.腾讯云等.对于新手,尤其是没有接触过linux系统的人而言是比较有困难的,而且至今使用云服务器也是有成本的,很多时候我们可以通过虚拟机自己搭建 ...
- MVC 异步调用
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
- __declspec的15种用法
__cdecl和__stdcall都是函数调用规范(还有一个__fastcall),规定了参数出入栈的顺序和方法,如果只用VC编程的话可以不用关心,但是要在C++和Pascal等其他语言通信的时候就要 ...
- 【Linux】PuTTY----------windows访问Linux 快捷方便
第一步:百度PuTTY,下载好后直接运行,界面如下: 第二步:后输入IP:10.45.XX.XX,直接点击open按钮 第三步:输入用户名: 第四步:密码~ 现在,您就可以对你访问的linux设备进行 ...