jsvue文件如何編譯

1. VUE中如何動態編譯js

需求：動態獲取一段字元串類型的js腳本，動態編譯它並且可以敏叢完美在vue中運行與之交互。
實現：動態編譯js的方式有飢橘eval和new function
簡單例子：

eval：

new function:

顯然後者更利於擴展，詳細了解區別可以參考鏈接內容：爛拿團
https://www.hu.com/question/29743491
https://imys.net/20151222/eval-with-new-function.html

要注意使用new Function，在vue環境中直接賦值的方式函數作用域與賦值vue結構對象不同： https://jsfiddle.net/5neLzn1x/

2. 如何優雅地使用 VSCode 來編輯 vue 文件

先來扒一扒使用 PHPStorm 遇到的問題：
vue文件雖然可以通過插件來解決高亮問題，但是 <script> 標簽中的 ES6 代碼的識別老是出問題，箭頭函數有的時候能正確識別，有的時候會報錯
無法正確識別 vue 文件中的 jsx 語法
無法正確識別和高亮 vue 文件 <style> 標簽中使用的 less 語法
vue文件中 <template> 部分使用了大量的自定義標簽（自定義組件）和自定義屬性，會報一堆 warning
經常性卡死
webpack實時編譯的錯誤不能直接展示在代碼編輯器內，還得自己到控制台中查看
如何安裝 vscode
很簡單，傳送門： 官網下載安裝
第一步，要支持 vue 文件的基本語法高亮
這里，我試過好3個插件： vue , VueHelper 和 vetur ，最終選擇使用 vetur 。
安裝插件： Ctrl + P 然後輸入 ext install vetur 然後回車點安裝即可。
p.s: vscode 的插件安裝比 PHPStorm 的插件安裝更快捷方便，安裝完成後還不用重啟整個程序，只要重新載入下工作區窗口就可以了。
安裝完 vetur 後還需要加上這樣一段配置下：
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
這時可以打開一個vue文件試試，注意下右下角狀態欄是否正確識別為 vue 類型：
如果被識別為 text 或 html ，則記得要點擊切換下。
第二步，要支持 vue 文件的 ESLint
可能還有人會問為什麼要 ESLint ？沒有 lint 的代碼雖然也可能可以正確運行，但是 lint 作為編譯前的一道檢測成本更小，而且更快。此外， ESLint 還有很多規范是幫助我們寫出更加優雅而不容易出錯的代碼的。
jshint 本來也是個不錯的選擇，但是 ESLint 對 jsx 的支持讓我還是選擇了 ESLint.
安裝插件： Ctrl + P 然後輸入 ext install eslint 然後回車點安裝即可。
ESLint 不是安裝後就可以用的，還需要一些環境和配置：
首先，需要全局的 ESLint , 如果沒有安裝可以使用 npm install -g eslint 來安裝。
其次，vue文件是類 HTML 的文件，為了支持對 vue 文件的 ESLint ，需要 eslint-plugin-html 這個插件。可以使用 npm install -g eslint-plugin-html 來安裝
接著，安裝了 HTML 插件後，還需要在 vscode 中配置下 ESLint：
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
},
最後，別忘了在項目根目錄下創建 .eslintrc.json , 如果還沒創建，還可以使用下面快捷命令來創建：
這樣一來 vue 中寫的 js 代碼也能正確地被 lint 了。
要是不小心少個括弧之類的都可以有對應的報錯:
多餘 import 也都能報錯:
還是蠻智能的。
第三步，配置構建任務
vue 項目的構建我選擇用 webpack ，不過，並不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 寫的 node 腳本。 腳本主要有兩個，一個是 build/bin/build.js 另一個是 build/bin/watch.js 分別是單次構建和實時構建。
於是乎，對應 vscode 中的 tasks 也是有兩個： build 和 watch ，簡單配置如下：
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
// use `Ctrl+P` and type `task` + SPACE + <taskName> to run a task
"version": "0.1.0",
"tasks": [
{
"taskName": "build",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/build.js"
],
"suppressTaskName": true,
"isBuildCommand": true
},
{
"taskName": "watch",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/watch.js"
],
"suppressTaskName": true,
"isBackground": true
}
]
}
這樣配置好後，按 Ctrl + Shift + B 即可開始單次構建。 不過單次構建比較慢（要10秒+），一般我都用實時構建： Ctrl + P 然後輸入 task watch <回車> 即可開始實時構建。實時構建除了第一次比較慢，其他時候還是非常快的，一般1秒內就可以構建好。
最後，webpack 構建錯誤提示
webpack 構建失敗後一般都會有錯誤提示，會顯示在輸出窗口中：
為啥是彩色的？ 因為裝了 Output Colorizer 這個插件。
當然，這樣還是不夠方便 -- 實時構建是後台運行的，「輸出」窗口一般也都是在後台，每次保存完文件還得點開豈不麻煩。
要是能做到像 ESLint 一樣直接把錯誤標到編輯器上面就好了。真的可以嗎？翻了下 vscode 的文檔，發現有神奇的 problemMatcher -- 可以對任務輸出進行解析，解析出的問題會顯示在「問題」窗口中，如果還有文件名行號和列號，則會在源代碼編輯窗口中對應的位置標出來。
先放個最終效果：
在這個文件的第32行，import 了一個不存在的模塊，這樣的錯誤在 ESLint 中當然是檢查不出來的，然而在 webpack 的實時構建中會報錯：
這個事情的困難在於兩點：
如何通過 problemMatcher 把這個錯誤給抓出來？
如何找到錯誤對應的行號？（如果可能的話，還有列號）
webpack的錯誤輸出格式並不是完全統一的，而且有些還沒有行號 -- 一方面可能是 webpack 的 bug ，另一方面 vue 文件在構建的時候會拆成 template, script 和 style 三個方面進行構建，報錯的行號可能對不上。
最終我的解決方案是對 webpack 的錯誤重新格式化輸出，然後匹配：
首先，重新格式化輸出需要 format-webpack-stats-errors-warnings 這個包（偶新寫的）
npm install --save-dev format-webpack-stats-errors-warnings
然後，到 build/bin/build.js 和 build/bin/watch.js 中在 webpack 構建完成的回調函數中增加這個格式化後的輸出：
更多使用介紹見 github
最後，在 .vscode/tasks.json 中，每個任務下添加 problemWatcher :
// ...
{
"taskName": "build",
// ...
// build 任務的:
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
}
}
}
{
"taskName": "watch",
// ...
// watch 任務的：
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
},
"watching": {
"activeOnStart": true,
"beginsPattern": "^\\s*Webpack begin run",
"endsPattern": "^\\s*Build complete at"
}
}
// ...
}
// ...
註：在 watch 任務中，為了匹配何時開始和何時結束，我在 webpack 構建的 run 和 watch 時增加了一個 console.log('Webpack begin run') 的列印，而在構建完成後增加了一個 console.log("Build complete at ..") 的列印。

3. vuejs目基本完成，怎麼編譯成html js css

動態添加進去的tr不能應用js和css,在tr添加進頁面後,再調用一下$("tr").addClass("樣式名"); 重新給他添加一下樣式即可.至於js的話,在綁定事件的時候用:$("tr").live(f

4. weex最新版如何將.vue編譯成.js文件

1.在components 目錄下新建一個validate.js：
export default{
install(Vue){
Vue.prototype.$myName = "zhagngsan";
}
}
這就是我們的插件，定義了一個屬性
2.入口文件jssrc/index.js 加入：
// 引入
import validate from "./../components/validate";
// 使用
Vue.use(validate);
3.我們到user-username.vue 組件下驗證一下:
mounted(){
alert(this.$myName);
},
瀏覽器訪問登錄頁面，成功彈出：
這里寫圖片描述
4.剛剛我們已經學會插件里定義屬性，馬上來學一下如何定義方法：
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
}
}
同樣可以使用該方法：
if(this.checkUserName("hello")){
alert("ok");
}else{
alert("error");
}
5.
這里寫圖片描述
我們修改user-name.vue 組件，來實現文本框驗證：
<template>
<div class="form-group">
<label class="col-sm-2 control-label">用戶名</label>
<div class="col-sm-10">
<input type="text" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
<label class="label label-danger" v-if="showErrorLabel">用戶不合法</label>
</div>
</div>
</template>
<script>
export default{
props:["placeholder"],
data:function () {
return {
username:"",
showErrorLabel:false,
}
},
methods:{
userNameChange(){
// 用戶名改變的方法里判斷 用戶名是否復合要求
if(this.checkUserName(this.username)){
this.showErrorLabel = false; // 如果驗證沒有通過就顯示錯誤提示
}else{
this.showErrorLabel = true;
}
// 調用父組件的方法
this.$emit("childChange","username",this.username)
}
}
}
</script>
這里寫圖片描述
自定義指令
文檔：
1、validate.js:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(value == ""){
return true; // 如果沒有填寫,默認為true
}
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
Vue.directive("uname",{
bind(){
console.log("bind"); // 只會調用一次
},
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
},
})
}
}
2、我們自定了一個uname 指令，下面來看一下如何使用的？
<input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
我們在組件的模板里使用了 v-uname ，並且給綁定了」username」數據。
我們打開瀏覽器的控制台：
這里寫圖片描述
說明我們定義的指令里，這個方法執行了：
bind(){
console.log("bind"); // 只會調用一次
},
3、下面我們來看一下update 里的東東
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
}

5. vue壓縮後的js可以反編譯出來嗎

vue壓縮後的js可以反編譯出來，反編譯方法為：

1、在桌面找到自己下載的瀏覽器軟體，點擊瀏覽器圖標。

6. 一個.vue文件，是如何被編譯在瀏覽器中運行的

自我理解的作用：解析轉換.vue文件。提取出script，css，template，再分別交給對應的loader去處理。核心就是提取。
官方定義：
1、允許為唯胡鏈vue組件的每個部分使用他的webpack loader，例如在style中使用sass，在template中使用Pug
2、允許一個.vue文件中做凳使用自定義塊，並對其運用自定義的loader鏈
3、使用webpack loader將style，template中引用的資源當作模塊依賴處理
4、為指孫每個組件模擬出scoped css
5、在開發過程中使用熱重載來保持狀態

7. 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的回調）

應用場景：需要在視圖更新之後，基於新的視圖進行操作。

8. 己保存的vue怎麼重新編緝

1 一般在vue中，有很多vue組件，這些組件每個都是一個文件。都可能需要引用到相同模塊(或者插件)。我們不想每個文件都import 一次模塊。
如果是基於vue.js編寫的插件我們可以用 Vue.use(...)
main.js
2 但是如果想添加一個全局命令，同時又讓每個vue的文件都能用到怎麼辦？
第一步：最好建立一個全局的命令文件例如：directive/directive.js
第二步：利用Vue.directive()建立一個全局命令，並將它暴露出來，例如一個focus 讓表單自動聚焦
directive.js
第三部步：在main.js（入口JS文件）中將它引入，可以省略文件後綴
main.js
這樣任何一個Vue文件只要這樣v-focus(命令名)，就可以很方便的用到了
3 Vue.directive() 的命令一般都是自動運行的或者說初始化等等觸發的，並不能用於非同步事件，怎麼辦？
於是我們可以用到'mixins'混合命令，你最好建立一個專門的文件夾用於存放混合命令，例如：
mixins.js
比如 saveScrollPosition （不是vue中的saveScrollPosition）可以每次在路由跳轉之間保存住瀏覽位置信息
注意：vue2.0 中 路由跳轉之間會自動保存位置信息 但是有Bug（位置信息之間會相互干擾）。
所以我們從新寫一個saveScrollPosition暴露出去後，在你需要的頁面中混入
這樣就會很方便。
4 如果你需要應用一個插件，同時他並不是基於vue.js的插件命令編寫的，那你可以將它賦予Vue的原型上
例如：我想全局引用axios，我們可以這樣
main.js
然後this.$http.get(url) 等等
xxx.vue
5 將需要的變數掛在到window對象上
例如：第三方庫Lodash.js,moment.js等等
main.js
xxx.vue
注意：這種方式不適合服務端渲染，服務端並沒有window對象
強調一點：以上所有的引入都必須通過入口JS文件去引入，這樣才能適用於全局

9. weex最新版如何將.vue編譯成.js文件

將內核切換成 Vue 之後，原先基於 Weex 語法開發的項目將如何過渡到 Vue ？
首先需要明確一點：Weex 原有的前端框架也會繼續存在於 WeexSDK 中，依然支持 .we 文件格式的寫法。
此外，由於 .we 和 .vue 文件的格式本身就比較接近，所以遷移成本比較小，建議大家將現有 .we 格式的文件都轉換成 .vue 格式。我們也推出了相應的工具和方法輔助遷移，在內部也有大量的成功實踐，下邊將重點介紹一下將 .we 文件轉成 .vue 文件的方法。

10. weex最新版如何將.vue編譯成.js文件

1.components 目錄新建validate.js：
export default{
install(Vue){
Vue.prototype.$myName = "zhagngsan";
}
}
我插件定義屬性
2.入口文件jssrc/index.js 加入：
// 引入
import validate from "./../components/validate";
// 使用
Vue.use(validate);
3.我user-username.vue 組件驗證:
mounted(){
alert(this.$myName);
},
瀏覽器訪問登錄頁面功彈：
寫圖片描述
4.剛剛我已經插件定義屬性馬何定義：
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
}
}
同使用該：
if(this.checkUserName("hello")){
alert("ok");
}else{
alert("error");
}
5.
寫圖片描述
我修改user-name.vue 組件實現文本框驗證：


用戶名


用戶合
寫圖片描述
自定義指令
文檔：
1、validate.js:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(value == ""){
return true; // 沒填寫,默認true
}
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
Vue.directive("uname",{
bind(){
console.log("bind"); // 調用
},
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
},
})
}
}
2、我自定uname 指令面看何使用

我組件模板使用 v-uname 並且給綁定username數據
我打瀏覽器控制台：
寫圖片描述
說明我定義指令執行：
bind(){
console.log("bind"); // 調用
},
3、面我看update 東東
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
}