初識vue系列之二

vue中的dom操作

• 兩步:

  1. 給我們想要操作的dom元素加上ref屬性，並賦值: <div ref="mydiv"></div>
  2. 做了這個操作之年，vue內部會獲取所有有ref屬性元素.
  3. 在想要操作dom的程式碼的位置寫this.$refs.mydiv，這個物件表示的是我的要操作的div這個元素的原生dom物件。
  4. 最終有了這個物件，就嚮往常一樣操作dom就可以了!

• 設計師!

1.4. vue父子元件相互傳值(傳資料)

1.4.1. 父元件給子元件傳值:

• 1. 在元件中使用子元件<div> <Add test="哈哈" :mylist="list"></Add></div>
  2. 給使用的子元件標籤新增屬性,屬性的值就是我們要傳遞的值,最終子元件可以接收到test和mylist對應的值
  3. 所謂的傳遞值，其實vue底層是把test的值mylist賦給了子元件的例項物件
• 1. 父元件可以給子元件傳很多值, 子元件可以有選擇的接收:
  2. 接收時，要給子元件新增props屬性，屬性值為陣列,陣列中的元素就是我們想要接收的資料對應的屬性名props:['test','mylist']

  var test = 3 子元件例項物件.test = test

父給子傳，其實是賦值: 子元件例項.屬性 = 父元件例項.屬性

1.4.2. 子給父傳值

呼叫的其實是方法 預先在父元件中寫好方法，在子元件中想辦法呼叫這個方法 getdata2(arg){}

1. 在父元件中寫子元件標籤時,要給子元件標籤註冊事件: <Son @隨便起名字A="getdata2"></Son>
2. 在子元件中，當我們想呼叫getdata2這個方法時, this.$emit('隨便起名字A',傳遞給getdata2的引數) this.$emit裡其實最終是呼叫了父元件例項的getdata2方法

1.4.3. 元件的生命週期

• 只是說明的是個過程

  • 我們出現之前... beforeCreated(){}
  • 我們細胞出現後：created()
  • 出生是: mounted() ....
  • 結束

• beforecreate

• • created: 例項建立完成後呼叫
• • mounted: dom結構載入完成: 當前元件的template新增到dom中之後呼叫

1.5. 路由

• npm install vue-router --save
• hashchange事件,當url錨點改變時會觸發這個事件
• 1.定義要用到的元件
• 2.配置路由規則
• 3.建立VueRoter例項，並傳入2中配置的規則，routes
• 4.new Vue例項,並傳3中建立的例項，賦值router屬性
• 5.指定路由中配置的元件在dom中的顯示位置，

• 最終路由對應的元件會替換router-view

1.6. webpack

• npm install webpack -g
• npm install webpack-dev-server -g

1.6.1. 神器!

• npm 預設是從npm官網下載的包
• 其實可以第一次聯網，以後就不用聯網了

1.6.2. sinopia

• 1.下載: npm install -g sinopia

1.6.3. 明天需要下載的包

1.6.3.1. 全域性下載的

• npm install webpack -g
• npm install webpack-dev-server -g

1.6.3.2. 非全域性下載的

• npm install webpack
• npm install webpack-dev-server
• npm install babel-core
• npm install babel-preset-es2015
• npm install html-webpack-plugin
• npm install less
• npm install bable-loader
• npm install less-loader
• npm install file-loader
• npm install url-loader
• npm install style-loader
• npm install css-loader
• npm install less-loader

• npm install vue-loader

• --save

  • 是瀏覽器執行時需要的
  • node執行時需要

• --save-dev

  • 是開發時必需要有的
  • nodemon --save-dev
  • 表明程式碼在執行時，可以不用它

• babel-preset-es2015 --save-dev

  • 將es6轉換為es5,是在瀏覽器執行程式碼之前
  • 是在開發的時候就轉換好的
  • const a = 3: var a = 3

• jquery --save

• $('div').html('xxx')

• vue --save

• webpack --save-dev

• less-loader --save-dev

vue-router --save

-g