獲取原生DOM,diy腳手架,vue-clide使用,element-ui的使用

時間 2019-12-12

標籤獲取原生 dom diy 腳手架 vue clide 使用 element 欄目 HTML 简体版

原文原文鏈接

一.獲取原生DOM的方式

給標籤或者屬性添加ref屬性css

1 //1.添加屬性
2 <div ref='shy'><div>
3 <Home ref='home'></Home>
4 //2.獲取原始DOM
5 this.$refs.shy
6 //3.組件實例化對象
7 this.$refs.home

使用實例前端

 1 <body>
 2 <div id="app"></div>
 3 <script src="vue.js"></script>
 4 <script>
 5     Vue.component("Test1",{
 6         data(){return{}},
 7         template:`<div>我是test1組件</div>`,
 8     })
 9     Vue.component("Test2",{
10         data(){return{}},
11         template:`<div>我是test2組件</div>`,
12     })
13     let App={
14         data(){return{}},
15         template:`<div>
16             <input type="text" ref="input">
17                     <Test1 ref="test1"></Test1>
18                     <Test2 ref="test2"></Test2>
19                 </div>`,
20         mounted(){
21             //input輸入框的默認聚焦
22             //獲取原始Dom
23             console.log(this.$refs.input.focus())
24             //獲取組件實例對象
25             console.log(this.$refs.test1)
26             console.log(this.$refs.test2)
27             //獲取父組件
28             console.log(this.$refs.test1.$parent)
29             //獲取跟組件Vue
30             console.log(this.$refs.test1.$root)
31             //獲取子組件,結果是一個列表
32             console.log(this.$children);
33             //循環獲得每個子組件
34             for(let key in this.$refs){
35                 console.log(this.$refs[key])
36             }
37         }
38     }
39     new Vue({
40         el:"#app",
41         data(){return{}},
42         template:`<App></App>`,
43         components:{
44             App
45         }
46     })
47 </script>
48 </body>

二.DIY腳手架(不重要)

webpack項目開發的依賴vue

1.webpack

webpack是一個現代JavaScript應用程序的靜態模塊打包器。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。node

2.歷史介紹

2009年初，commonjs規範還未出來，此時前端開發人員編寫的代碼都是非模塊化的，jquery
- 那個時候開發人員常常須要十分留意文件加載順序所帶來的依賴問題linux
與此同時 nodejs開啓了js全棧大門，而requirejs在國外也帶動着前端逐步實現模塊化webpack
- 同時國內seajs也進行了大力推廣web
- AMD 規範，具體實現是requirejs define('模塊id',[模塊依賴1,模塊依賴2],function(){ return ;}) , ajax請求文件並加載ajax
- Commonjs || CMD 規範seajs 淘寶玉伯vue-cli
  - 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)在模塊中

1 var add = function () {
2     alert(11111);
3 }
4 module.exports = add

(2)導入

1 var p = require('./time.js')
2 console.log(p)
3 p();

4.webpack模塊化支持

在模塊中

1 var person = {
2     name:'張三',
3     fav:function () {
4         alert(1);
5     }
6 }
7 export default person

導入

1 import * as a from './module.js'
2 
3 console.log(a.add())

執行

1 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 包管理器

經過vue -v查看當前版本

3.下載的是3的新版本,使用舊版本

4.先看清除當前的根目錄是哪一個,

若是不是my-project,必定要企鵝日到當前目錄下,而後再執行: npm install

5.運行項目:npm run dev

2.建立一個項目

3.執行順序

當訪問的路徑爲/時

4.scoped當前的樣式只對當前

1 <style scoped>
2 h2{
3   color: green;
4 }
5 </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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。