vue項目怎麼編譯成html
『壹』 vue怎麼渲染html
new Vue，執行初始化
掛載$mount方法，通過自定義Render方法、template、el等生成Render函數
通過Watcher監聽數據的變化
當數據發生變化時，Render函數執行生成VNode對象
通過patch方法，對比新舊VNode對象，通過DOM Diff演算法，添加、修改、刪除真正的DOM元素
至此，整個new Vue的渲染過程完畢。
『貳』 在vue中後台返回的文本包含標簽如何解析為html
在項目中遇到解析html，發現v-html並不滿足復雜的渲染，就使用jq來處理
1.v-html 處理簡單的標簽
如：text="<p>vue轉換</p>"
html中解析：
<p v-html="text">{{text}}</p>
2.返回標簽中還有img、a標簽，使用v-html就不會轉換方法如下：
使用jquery處理:
1.在標簽定義class
<div class="descript"></div>
2.安裝jq
npm install jquery --save
3.在使用的地方引入
import $ from 'jquery'
async loadProctDetail(cData) {
const { data } = await getProctDetail(cData)
this.descript = data.data.sku //介面返回數據賦值
this.loadhtml() //調用方法
},
loadhtml() {
('.descript').html(this.descript) //賦值
const srcdescript = ('.descript').find('img') //找到當前所有的a標簽、img標簽
for (let i = 0; i < srcdescript.length; i++) { //遍歷
let a = srcdescript.eq(i).attr('href') //找到a標簽的href屬性
let b = evals.eq(i).attr('src') //找到img標簽的src屬性
//this. url + a) //賦值
srcdescript.eq(i).attr('src', this.$url + b) //賦值
//如果介面返回有就不添加:
// srcdescript.eq(i).attr('href', a) //賦值
//srcdescript.eq(i).attr('src', b) //賦值
}
}
『叄』 Vue基礎篇
內容簡介：
1）Vue指令
2）computed和watch
3）生命周期鉤子
4）組件間的傳參
5）插槽
6）修飾符
7）nextTick()
前端三大框架：
Vue：尤雨溪開發
React：Facebook主導開發
Angular：谷歌主導開發
為什麼選擇Vue?
1.國內Vue的市場份額佔比多
2.簡單易上手，非常適合前端開發初學者學習
前置知識：
1.HTML、CSS和JS基礎
2.了解Node和npm
3.webpack（可選，vue-cli已經封裝了打包功能）
使用Vue的兩種方式：
1.直接script標簽引入vue.js文件
2.基於Node環境創建Vue項目（使用vue-cli初始化一個Vue項目）
前端框架與庫的區別
• jquery 庫 -> DOM(操作DOM) + 動畫+ ajax請求
• 框架 -> 全方位功能
一、指令
指令（Directives）是帶有 v- 前綴的特殊屬性。
插值表達式和v-text指令被直接解析為字元串；元素綁定 v-html 指令後，解析了msg 變數值裡面的html標簽，輸出真正的html元素。
v-model也可用在自定義組件上。
5.v-for（列表渲染）
使用v-for時應綁定key屬性，key屬性可以用來提升v-for渲染的效率
Vue 將被偵聽的數組的變更方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
由於 JavaScript 的限制，Vue 不能檢測數組、對象的以下變化：1. 利用索引直接設置數組的某一項 2. 對象屬性的添加或刪除
二、computed和watch
三、生命周期鉤子
什麼是Vue生命周期？
Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程。
總共分為8個階段：創建前/後，掛載前/後，更新前/後，銷毀前/後。
1）beforeCreate
此時實例上只有一些生命周期函數和默認的事件，此時data computed watch methods上的方法和數據均不能訪問。
2）created
此時可以讀取data的值，並可以對其進行操作，把方法、計算屬性也都掛載到了實例。但是依舊不能訪問el，不能獲取到DOM元素。
在這個鉤子函數中，我們可以進行http請求，把請求到的數據儲存在data中。
3）模板編譯，把data裡面的數據和vue語法寫的模板編譯成HTML
4）beforeMount
將編譯完成的HTML掛載到對應虛擬DOM，此時還未掛載到頁面上
5）mounted
編譯好的HTML已掛載到頁面上
6）beforeUpdate和updated
數據更新時調用，通常使用計算屬性或偵聽器取而代之
7）beforeDestroy
銷毀所有觀察者、組件及事件監聽
8）destroyed
組件已經完全銷毀，組件中的數據、方法、計算屬性、過濾器等都已不可用。
四、組件間的通信
1.父子組件間的通信
父子組件通信可以總結為props向下傳遞，事件向上傳遞。
單向數據流：父級 prop 的更新會向下流動到子組件中，但反過來不行。
每個Vue實例都實現了事件介面：子組件使用 this.$emit(eventName,optionalPayload) 觸發自定義事件。父組件在使用子組件的地方直接用v-on來監聽子組件觸發的事件。
父組件通過ref直接調用子組件中的方法。
子組件調用父組件中的方法：
1）子組件中通過 this.$parent.fatherMethod() 來調用父組件的方法
2）子組件用$emit向父組件觸發一個事件，父組件監聽這個事件
3）父組件通過props把方法傳入子組件中（type: Function），在子組件里直接調用這個方法
2.兄弟組件間的通信
其中一種方法是讓父組件充當兩個子組件之間的中間件（中繼）；
另一種就是使用EventBus（事件匯流排），它允許兩個組件之間直接通信，而不需要涉及父組件：
Vue原型上的方法：
五、插槽
3）作用域插槽
使用場景：
在使用ElementUI組件庫的el-table組件時，表格的編輯和刪除操作要用到作用域插槽。因為el-table組件，就是當前組件的子組件。通過作用域插槽很容易拿到當前表格行的索引和內容，這樣就可以很方便地進行編輯、刪除的操作。v-slot指令是Vue2.6之後，作用域插槽的新語法，舊語法（slot-scope）現在還保留，但3.0之後會移除。
六、修飾符
2.事件修飾符
vue提倡的是在方法中只有純粹的數據邏輯，而不是去處理 DOM 事件細節，所以提供了事件修飾符用於DOM的事件處理。
3.按鍵修飾符
七、nextTick()
定義：在下次 DOM 更新循環結束之後執行延遲回調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。（當數據更新了，在dom中渲染後，自動執行nextTick的回調）
應用場景：需要在視圖更新之後，基於新的視圖進行操作。
『肆』 vuejs目基本完成，怎麼編譯成html js css
動態添加進去的tr不能應用js和css,在tr添加進頁面後,再調用一下$("tr").addClass("樣式名"); 重新給他添加一下樣式即可.至於js的話,在綁定事件的時候用:$("tr").live(f