vue 之node.js 02

文檔

鋪墊

之前網頁製做web1.0 現在是web2.0-->交互式操做

前端工具

grunt gulp webpack ：打包機 做用：將項目中的js，css，img，font，html等進行捆綁 編譯成一個.js文件進行加載

請求

//  img src ， css href ， audio src a href 都是對服務器發起一次請求

並行操做 ---> 異步

amd 和 cmd 模板化 異步模塊定義 ---本身百度

什麼是node.js

一種後端語言

# Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 # Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 # Node.js 的包管理器 npm，是全球最大的開源庫生態系統。 

# nodejs：Node。js的包管理器npm，一門後端語言，寫服務器代碼 # npm：比如Python中的pip，node package # manage， 開源的，供全部的前端開發者使用的包都在這裏面
# babel ： 將咱們的es6的代碼在各類瀏覽器兼容(工具。)

包下網站

流程

自動生成json文件

1：初始化 npm init --yes

下載包 必須加--save(項目依賴 如bootstrap 渲染頁面)

2：下載jQuery npm jquery --save

Vue組件

組件 (Component) 是 Vue.js 最強大的功能之一。
組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器爲它添加特殊功能。
在有些狀況下，組件也能夠表現爲用 is 特性進行了擴展的原生 HTML 元素。 全部的 Vue 組件同時也都是 Vue 的實例，因此可接受相同的選項對象 (除了一些根級特有的選項) .
並提供相同的生命週期鉤子

# 組件：功能 架構 樣式 組合的一個文件 .vue

需知

關於webpack模板 # entry 入口文件的地址 # output 出口 # loader babel-base-loader， vue-loader， css-loadeer， style-loader # babel-base-loader 解析咱們文件中的es6代碼 # vue-loader 將文件編輯成.vue文件，供瀏覽器去識別(瀏覽器識別不了vue文件) # css-loadeer 解析css代碼 # style-loader 引入css的style

# plugins 插件--> 就是一個js功能 # 例如js壓縮(醜陋化) css壓縮 html壓縮 圖片壓縮 等等

# 模塊---》 一個js文件就是一個模塊

使用vue-cli

1：先下載

# 全局安裝 vue-cli
npm install --global vue-cli

# mac
在前面加sudo
在輸入密碼，輸入開機密碼便可

vue help 能夠查看全部命令

vue init simple 第一個模板

第二個模板 webpack-simple

2：進入該目錄 cd 02demo

3：下載項目裏全部的依賴

方式一：

方式二：利用淘寶鏡像下載

用 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm: npm install -g cnpm --registry=https://registry.npm.taobao.org
而後在cnpm instal

檢查

查看node是否按轉 node -v 查看vue vue --version 成功的話會顯示版本

啓動

npm run dev

文件大概

一、main.js是咱們的入口文件，主要做用是初始化vue實例，並使用咱們須要的插件

二、App.vue是咱們的跟組件，全部頁面都是在App.vue下面進行切換的，能夠理解爲全部的組件都是App.vue的子組件

三、index.html文件入口

四、src放置組件和入口文件

五、node_modules爲依賴的模塊

六、config中配置了路徑端口值等

七、build中配置了webpack的基本配置、開發環境配置、生產環境配置等

 

注意：

1：app.vue須要寫三個固定標籤 <!-- 組件都是.vue的文件 -->
<!-- 固定三標籤 -->
<!-- 寫頁面結構 -->
<template>
</template>
<!-- 業務邏輯 -->
<script>
</script>
<!-- 樣式 -->
<style></style>

2： 全部組件裏面的標籤必須是閉合標

3：script必須有的內容
script>
  // 拋出
  export default{
    name:"App",
    // 數據屬性是一個對象單體函數
    data(){
      return {
        // 放當前組件的全部數據屬性 key-val
        msg:'學習使我快樂',
        favs:['python','java','vue']
      },
      // 方法聲明
      methods:{

      },
      // 計算屬性
      computed:{

      },
      // 組件關係
      components:{

      }
    }
  }
</script>

4 之後再項目中 凡是看到帶有index或者main開頭的文件，通常狀況下都是咱們項目的入口文件

// 模塊  第三方的模塊 只能引入名字 有import 就有export（拋出

組件通訊

父子組件創建通訊

vue的核心思想：數據驅動視圖，雙向數據綁定

父子組件通訊：單向數據流

父子組件關聯:須要在App.vue(父主件)，裏寫個components對象

1：先建立子組件，而後在父組件裏導入

 // 1：導入子組件模塊 import Vheader from './Vheader'

2：掛載

 // 組件關係 父組件關聯子主件 components:{ // 2： 將Vheader組件與父組件關聯起來 // Vheader：Vheader 當名字同樣時，能夠直接寫Vheader // 只有這裏寫了，上面才能自定義標籤 Vheader }

3：使用

<!-- 3 插入Vheader的圖片 自定義標籤 -->
    <Vheader></Vheader>

<!-- 組件都是.vue的文件 -->
<!-- 固定三標籤 -->

<!-- 寫頁面結構 -->
<template>
  <!-- HTML -->
  <div id = 'app'>
    <h3>{{ msg }}</h3>
    <ul>
      <li v-for = '(item,index) in favs'> {{ item }} </li>
    </ul>

    <!-- 3 插入Vheader的圖片 自定義標籤 -->
    <Vheader></Vheader>
  </div>

</template>



<!-- 業務邏輯 -->
<script>
  // JS
  // 1：導入子主件模塊
import Vheader from './Vheader'
  // 拋出
 export default { name:"App", // 數據屬性是一個對象單體函數
 data(){ return { // 放當前組件的全部數據屬性 key-val
 msg:'學習使我快樂', favs:['python','java','vue'] }, // 方法聲明
 methods:{ }, // 計算屬性
 computed:{ }, // 組件關係 父主件關聯子主件
 components:{ // 2： 將Vheader主件與父主件關聯起來
          // Vheader：Vheader 當名字同樣時，能夠直接寫Vheader
          // 只有這裏寫了，上面才能自定義標籤
 Vheader } } } </script>



<!-- 樣式 -->
<style>
  /* CSS */
</style>

App.vue

<!-- 固定三樣式 -->
<template>
    <div class="vheader">
        <img src="./assets/logo.png">
    </div>
</template>


<script>
    // 對應app.vue的import
 export default{ name:'vheader', data(){ return{ } } } </script>

<style></style>

Vheader。vue(子組件)

創建webpack-simple模板

流程：
1： 下載全局vue cli
npm install --global vue-cli

聲明vue項目
showdemo爲項目名 cmd ：vue init webpack-simple showdemo 在提示裏會出現Use sass? 在Windows須要選擇no ，否則須要下載sass 在Mac自帶sass

模板創建完畢
cd 當前目錄
2：下載項目依賴
npm install 
3：啓動
npm run dev

 

 製做mark編輯器

項目依賴 加--save npm install mark --save

要解析成mark語法

v-html

雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML，你須要使用 v-html 指令：

<div class="box" v-html='currentMarked' ></div>

 

問題：當圖片導入不進來

能夠將本地資源以模塊的形式導入進來. import url from './assets/logo.png'

<!-- 固定三樣式 -->
<template>
	<div class="Vheader">
		<h3>啦啦啦</h3>
		<!-- 須要綁定起來，才能連接到下面的屬性 -->
		<img src="./assets/logo.png">
	</div>
</template>


<script>
	import url from './assets/logo.png'
	// 對應app.vue的import
	export default{
		name:'vheader',
		data(){
			return{
				url:url
			}
		}
	}
</script>

<style scoped>
	h3{
		color: blue;
	}
</style>

 

父子組件傳數據

咱們能夠爲組件的 prop 指定驗證規則。若是傳入的數據不符合要求，Vue 會發出警告。這對於開發給他人使用的組件很是有用。

 設計模式：MVVM 父傳子： 使用props,必需要驗證 子傳父：先得自定義事件，使用this.$emit()觸發這個自定義事件
　　　　同級組件之間的傳值 vue-router vue

流程; 1:在父組件綁定子組件的標籤 <Vheader :hfavs = 'favs'></Vheader> 2：在子組件須要驗證 -->props props:{ // 父組件傳數據到子組件 必定要驗證數據屬性的類型 hfavs:Array } 3:顯示數據 <ul>
            <li v-for = "(item,index) in hfavs"> {{item}} </li>
        </ul>

子主件往父組件傳值

 子傳父：先得自定義事件，使用this.$emit()觸發這個自定義事件

<!-- 固定三樣式 -->
<template>
    <div class="Vheader">
        <h3>啦啦啦</h3>
        <!-- 須要綁定起來，才能連接到下面的屬性 -->
        <img src="./assets/logo.png">
        <!-- 3 顯示數據 -->
        <ul>
            <li v-for = "(item,index) in hfavs"> {{item}} </li>
        </ul>

        <!-- I子組件往父組件傳值 -->
        <button @click = 'addOneFav'> 添加 </button>
    </div>

</template>


<script> import url from './assets/logo.png'
    // 對應app.vue的import
 export default{ name:'vheader', data(){ return{ url:url } }, // 2 驗證
 props:{ // 父組件傳數據到子組件 必定要驗證數據屬性的類型
 hfavs:Array }, methods:{ // II 聲明事件 
 addOneFav(){ // $emit 使用$emit() 方法來觸發自定義事件
                // 第一個參數 是自定義的函數名 觸發到主件的函數
                this.$emit('addHandler',11111); } } } </script>

<style scoped> h3{ color: blue;
    }
</style>

Vheader。vue子

<!-- 組件都是.vue的文件 -->
<!-- 固定三標籤 -->

<!-- 寫頁面結構 -->
<template>
  <!-- HTML -->
  <div id = 'app'>
    <h3>{{ msg }}</h3>
<!-- <ul> <li v-for = '(item,index) in favs'> {{ item }} </li> </ul> -->
    <!-- 3 插入子組件 Vheader的圖片 自定義標籤 -->
    <!--1 如何從父組件傳遞數據到子組件 使用vue提供的props I 子組件往父組件傳值，使用自定義事件，使用$emit() 觸發自定義函數 -->
    <!-- 1 綁定 -->
    <Vheader :hfavs = 'getAllDatas' @addHandler='add'></Vheader>
    <Vmarked></Vmarked>

  
  </div>

</template>



<!-- 業務邏輯 -->
<script>
  // JS
  // 1：導入子主件模塊
 import Vheader from './Vheader' import Vmarked from './Vmarked'
  // 拋出
 export default { name:"App", // 數據屬性是一個對象單體函數
 data(){ return { // 放當前組件的全部數據屬性 key-val
 msg:'學習使我快樂', favs:['python','java','vue'] } }, // 方法聲明
 methods:{ add(a){ // alert("11")
            this.favs.push(a) } }, // 計算屬性
 computed:{ getAllDatas(){ return this.favs } }, // 組件關係 父主件關聯子主件掛載子組件 把子組件掛載到父組件中
 components:{ // 2： 將Vheader主件與父主件關聯起來
          // Vheader：Vheader 當名字同樣時，能夠直接寫Vheader
          // 只有這裏寫了，上面才能自定義標籤
 Vheader:Vheader, Vmarked } } </script>



<!-- 樣式 scoped單獨加樣式 -->
<style scoped>
  /* CSS */ h3{ color: red;
  }
</style>

app.vue主