溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue數據雙向綁定與vue.config.js文件配置的方法的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue數據雙向綁定與vue.config.js文件配置的方法文章都會有所收獲，下面我們一起來看看吧。
Vue 內部通過 Object.defineProperty 方法屬性攔截的方式，把 data 對象里每個數據的讀寫轉化成 getter/setter，當數據變化時通知視圖更新
MVVM 數據的雙向綁定主要是指，Model 數據變化 View 視圖自動渲染展示；View 視圖數據變化 Model 數據自動同步更新
定義
Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 并返回這個對象。 ------(引自MDN)
語法
Object.defineProperty(obj, prop, descriptor)
（1）參數
obj 要在其上定義屬性的對象。
prop 要定義或修改的屬性的名稱。
descriptor 將被定義或修改的屬性描述符。
（2）返回值
被傳遞給函數的對象。
（3）屬性描述符
Object.defineProperty() 為對象定義屬性，分 數據描述符 和 存取描述符 ，兩種形式不能混用。
數據描述符和存取描述符均具有以下可選鍵值：
configurable 當且僅當該屬性的 configurable 為 true 時，該屬性描述符才能夠被改變，同時該屬性也能從對應的對象上被刪除。默認為 false
enumerable 當且僅當該屬性的 enumerable 為 true 時，該屬性才能夠出現在對象的枚舉屬性中。默認為 false 數據描述符具有以下可選鍵值：
value 該屬性對應的值。可以是任何有效的 JavaScript 值（數值，對象，函數等）。默認為 undefined
writable 當且僅當該屬性的 writable 為 true 時，value才能被賦值運算符改變。默認為 false 存取描述符具有以下可選鍵值：
get 一個給屬性提供 getter 的方法，如果沒有 getter 則為 undefined。當訪問該屬性時，該方法會被執行，方法執行時沒有參數傳入，但是會傳入this對象（由于繼承關系，這里的this并不一定是定義該屬性的對象）。默認為
undefinedset 一個給屬性提供 setter 的方法，如果沒有 setter 則為 undefined。當屬性值修改時，觸發執行該方法。該方法將接受唯一參數，即該屬性新的參數值。默認為 undefined
<body>
<p id="app"></p>
<script src="./vue.js"></script>
<script>
let app = document.getElementById("app")
// 聲明臨時存儲變量
let temp = "初始數據"
// 數據監聽對象
Object.defineProperty(window, "actual", {
// 監聽讀取數據
get() {
console.log("獲取數據調用");
return temp },
// 監聽修改數據
set(value) {
console.log("修改數據調用");
temp = value bind(actual) // 數據一旦發生變化就重新渲染頁面
}
})
// vue 數據雙向綁定
function bind(content) {
app.innerHTML = content }
bind(actual)
</script></body>
vue.config.js(相當于之前的webpack.config.js) 是一個可選的配置文件，如果項目的 (和package.json同級的) 根目錄中存在這個文件，那么它會被@vue/cli-service自動加載。你也可以使用package.json中的vue字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。
在根目錄中創建vue.config.js
這個文件應該導出一個包含了選項的對象：
配置選項
publicPath
Type:string
Default:’/’
部署應用包時的基本 URL， 用法和 webpack 本身的output.publicPath一致。
這個值也可以被設置為空字符串 (’’) 或是相對路徑 (’./’)，這樣所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑。
// 這里的webpack配置會和公共的webpack.config.js進行合并
module.exports = {
// 執行 npm run build 統一配置文件路徑（本地訪問dist/index.html需'./'）
publicPath: './',
}把開發服務器架設在根路徑，可以使用一個條件式的值：
// 這里的webpack配置會和公共的webpack.config.js進行合并
module.exports = {
// NODE_ENV：Node.js 暴露給執行腳本的系統環境變量。通常用于確定在開發環境還是生產環境
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
}outputDir
Type:string
Default:‘dist’
輸出文件目錄，當運行vue-cli-service build(npm run build) 時生成的生產環境構建文件的目錄。注意目標目錄在構建之前會被清除 (構建時傳入–no-clean可關閉該行為)。
// 這里的webpack配置會和公共的webpack.config.js進行合并
module.exports = {
// 執行 npm run build 統一配置文件路徑（本地訪問dist/index.html需'./'）
// NODE_ENV：Node.js 暴露給執行腳本的系統環境變量。通常用于確定在開發環境還是生產環境
// publicPath: '/',
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
outputDir: 'dist', // 輸出文件目錄
}assetsDir
Type:string
Default:’’
放置生成的靜態資源 (js、css、img、fonts) 的目錄。
// 這里的webpack配置會和公共的webpack.config.js進行合并
module.exports = {
// 執行 npm run build 統一配置文件路徑（本地訪問dist/index.html需'./'）
// NODE_ENV：Node.js 暴露給執行腳本的系統環境變量。通常用于確定在開發環境還是生產環境
// publicPath: '/',
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
outputDir: 'dist', // 輸出文件目錄
assetsDir: 'static', // 放置靜態資源
}**注：**從生成的資源覆寫 filename 或 chunkFilename 時，assetsDir會被忽略。
indexPath
Type:string
Default:‘index.html’
指定生成的index.html的輸出路徑 (相對于outputDir)。也可以是一個絕對路徑。
// 這里的webpack配置會和公共的webpack.config.js進行合并
module.exports = {
// 執行 npm run build 統一配置文件路徑（本地訪問dist/index.html需'./'）
// NODE_ENV：Node.js 暴露給執行腳本的系統環境變量。通常用于確定在開發環境還是生產環境
// publicPath: '/',
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
outputDir: 'dist', // 輸出文件目錄
// assetsDir: 'static', // 放置靜態資源
// indexPath: 'index.html', // 可以不設置一般會默認
}filenameHashing
Type:boolean
Default:true
默認情況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。然而，這也要求 index 的 HTML 是被 Vue CLI 自動生成的。如果你無法使用 Vue CLI 生成的 index HTML，你可以通過將這個選項設為false來關閉文件名哈希。
// 這里的webpack配置會和公共的webpack.config.js進行合并
module.exports = {
// 執行 npm run build 統一配置文件路徑（本地訪問dist/index.html需'./'）
// NODE_ENV：Node.js 暴露給執行腳本的系統環境變量。通常用于確定在開發環境還是生產環境
// publicPath: '/',
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
outputDir: 'dist', // 輸出文件目錄
// assetsDir: 'static', // 放置靜態資源
// indexPath: 'index.html', // 可以不設置一般會默認
// filenameHashing:true, // 文件命名
}pages
Type:Object
Default:undefined
在 multi-page（多頁）模式下構建應用。每個“page”應該有一個對應的 JavaScript 入口文件。
其值應該是一個對象，對象的 key 是入口的名字，value 是：
一個指定了entry,template,filename,title和chunks的對象 (除了entry之外都是可選的)；
或一個指定其entry的字符串。
**注：**當在 多頁應用 模式下構建時，webpack 配置會包含不一樣的插件 (這時會存在多個html-webpack-plugin和preload-webpack-plugin的實例)。如果你試圖修改這些插件的選項，請確認運行vue inspect。
lintOnSave
Type:boolean|‘error’
Default:true
是否在保存的時候使用 `eslint-loader` 進行檢查。 有效的值：`ture` | `false` | `“error”` 當設置為 `“error”` 時，檢查出的錯誤會觸發編譯失敗。
// 這里的webpack配置會和公共的webpack.config.js進行合并
module.exports = {
// 執行 npm run build 統一配置文件路徑（本地訪問dist/index.html需'./'）
// NODE_ENV：Node.js 暴露給執行腳本的系統環境變量。通常用于確定在開發環境還是生產環境
// publicPath: '/',
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
outputDir: 'dist', // 輸出文件目錄
// assetsDir: 'static', // 放置靜態資源
// indexPath: 'index.html', // 可以不設置一般會默認
// filenameHashing:true, // 文件命名
lintOnSave: false, //設置是否在開發環境下每次保存代碼時都啟用 eslint驗證
}runtimeCompiler
Type:boolean
Default:false
是否使用包含運行時編譯器的 Vue 構建版本。設置為true后你就可以在 Vue 組件中使用template選項了，但是這會讓你的應用額外增加 10kb 左右。
// 這里的webpack配置會和公共的webpack.config.js進行合并
module.exports = {
// 執行 npm run build 統一配置文件路徑（本地訪問dist/index.html需'./'）
// NODE_ENV：Node.js 暴露給執行腳本的系統環境變量。通常用于確定在開發環境還是生產環境
// publicPath: '/',
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
outputDir: 'dist', // 輸出文件目錄
// assetsDir: 'static', // 放置靜態資源
// indexPath: 'index.html', // 可以不設置一般會默認
// filenameHashing:true, // 文件命名
lintOnSave: false, //設置是否在開發環境下每次保存代碼時都啟用 eslint驗證
// runtimeCompiler: false, // 是否使用帶有瀏覽器內編譯器的完整構建版本
}transpileDependencies
Type:Array<string | RegExp>
Default:[]
默認情況下babel-loader會忽略所有node_modules中的文件。如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來。
productionSourceMap
Type:boolean
Default:true
如果你不需要生產環境的 source map，可以將其設置為false以加速生產環境構建。
crossorigin
Type:string
Default:undefined
設置生成的 HTML 中和
integrity
Type:boolean
Default:false
在生成的 HTML 中的和
Webpack相關配置
configureWebpack
Type:Object | Function
如果這個值是一個對象，則會通過webpack-merge合并到最終的配置中。
如果這個值是一個函數，則會接收被解析的配置作為參數。該函數及可以修改配置并不返回任何東西，也可以返回一個被克隆或合并過的配置版本。
chainWebpack
Type:Function
是一個函數，會接收一個基于webpack-chain的ChainableConfig實例。允許對內部的 webpack 配置進行更細粒度的修改。
Css相關配置
css: { // css相關配置
// 是否將組件中的 CSS 提取至一個獨立的 CSS 文件中，生產環境下是 true，開發環境下是 false
extract: process.env.NODE_ENV === "production",
// 是否為 CSS 開啟 source map。設置為 true 之后可能會影響構建的性能。
sourceMap: false,
// 啟用 CSS modules for all css / pre-processor files.(預加載)
requireModuleExtension: true,
loaderOptions: {
sass: {
// data: `@import "@/assets/css/variables.scss";`
}
}
},css.modules(===css.requireModuleExtension)
Type:boolean
Default:false
默認情況下，只有*.module.[ext]結尾的文件才會被視作 CSS Modules 模塊。設置為true后你就可以去掉文件名中的.module并將所有的*.(css|scss|sass|less|styl(us))文件視為 CSS Modules 模塊。
從 v4 起已棄用，請使用[這里是代碼010]。 在 v3 中，這個選項含義與
css.requireModuleExtension相反
css.extract
Type:boolean | Object
Default: 生產環境下是true，開發環境下是false
是否將組件中的 CSS 提取至一個獨立的 CSS 文件中 (而不是動態注入到 JavaScript 中的 inline 代碼)。
css.sourceMap
Type:boolean
Default:false
是否為 CSS 開啟 source map。設置為true之后可能會影響構建的性能。
css.loaderOptions
Type:Object
Default:{}
向 CSS 相關的 loader 傳遞選項。
支持的 loader 有：
css-loader
postcss-loader
sass-loader
less-loader
stylus-loader
devServer
Type:Object
所有?webpack-dev-server?的選項都支持。注意：
有些值像host、port和https可能會被命令行參數覆寫。
有些值像publicPath和historyApiFallback不應該被修改，因為它們需要和開發服務器的publicPath同步以保障正常的工作。
devServer.proxy
Type:string | Object
如果你的前端應用和后端 API 服務器沒有運行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 服務器。這個問題可以通過vue.config.js中的devServer.proxy選項來配置。
devServer: {
port: 2021, // 設置端口號
host: '10.32.120.69', // ip 本地
disableHostCheck: true, //是否關閉用于 DNS 重綁定的 HTTP 請求的 HOST 檢查
hotOnly: false, // 熱更新
https: false, // https:{type:Boolean}配置前綴
open: false, //配置自動啟動瀏覽器
proxy: null, //設置代理
// proxy: { //目的是解決跨域，若測試環境不需要跨域，則不需要進行該配置
// '/api': { // 攔截以 /api 開頭的url接口
// target: 'https://api.taobao.cn/', //目標接口域名
// changeOrigin: true, //是否跨域
// ws: true, //如果要代理 websockets，配置這個參數
// secure: false, // 如果是https接口，需要配置這個參數
// // 標識替換
// // 原請求地址為 /api/getData 將'/api'替換''時，
// // 代理后的請求地址為： http://xxx.xxx.xxx/getData
// // 若替換為'/other',則代理后的請求地址為 http://xxx.xxx.xxx/other/getData
// pathRewrite: { // 標識替換
// '^/api': '/' //重寫接口 后臺接口指向不統一 所以指向所有/
// '^/api': '/api/mock'
// }
// }
// }
},這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調用’https://api.taobao.cn/xxx/proxytime=2017-07-07 14:57:22’，直接寫‘/api/xxx/proxytime=2017-07-07 14:57:22’即可
import axios from 'axios'
export default {
created() {
// 1. 代理成功
// https://api.taobao.cn/users/proxy 轉換成 http://localhost:2021/api/users/proxy
axios.get('/api/users/proxy').then(res => { // /api 不能少
console.log(res)
})
}
}parallel
Type:boolean
Default:require(‘os’).cpus().length > 1
是否為 Babel 或 TypeScript 使用thread-loader。該選項在系統的 CPU 有多于一個內核時自動啟用，僅作用于生產構建。
pwa 學習
Type:Object
向PWA 插件傳遞選項。
這個插件中添加的serviceworker只在生產環境中啟用(例如，只有當你運行npmrunbuild或yarnbuild時)。
不推薦在開發模式中啟用serviceworker，因為它會導致使用以前緩存的資產而不包括最新的本地更改的情況。
pwa: {
// serviceWorker:false,
// 允許您從一個現有的service worker文件開始，并創建一個該文件的副本，并將“預緩存清單”注入其中。
// workboxPluginMode:'InjectManifest',
// workboxOptions: {
// //swSrc: './app/sw.js', /* Empty file. */
// },
iconPaths: {
favicon32: "favicon.ico",
favicon16: "favicon.ico",
appleTouchIcon: "favicon.ico",
maskIcon: "favicon.ico",
msTileImage: "favicon.ico"
}
}pluginOptions
Type:Object
這是一個不進行任何 schema 驗證的對象，因此它可以用來傳遞任何第三方插件選項。
// 這里的webpack配置會和公共的webpack.config.js進行合并
module.exports = {
// 執行 npm run build 統一配置文件路徑（本地訪問dist/index.html需'./'）
// NODE_ENV：Node.js 暴露給執行腳本的系統環境變量。通常用于確定在開發環境還是生產環境
// publicPath: '/',
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
outputDir: 'dist', // 輸出文件目錄
// assetsDir: 'static', // 放置靜態資源
// indexPath: 'index.html', // 可以不設置一般會默認
// filenameHashing:true, // 文件命名
lintOnSave: false, //設置是否在開發環境下每次保存代碼時都啟用 eslint驗證
// runtimeCompiler: false, // 是否使用帶有瀏覽器內編譯器的完整構建版本
configureWebpack: { // 別名配置
resolve: {
alias: {
//'src': '@', 默認已配置
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'api': '@/api',
'views': '@/views',
'plugins': '@/plugins',
'utils': '@/utils',
}
}
// 使用前面可加~
},
productionSourceMap: false, //如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建
css: { // css相關配置
// 是否將組件中的 CSS 提取至一個獨立的 CSS 文件中，生產環境下是 true，開發環境下是 false
extract: process.env.NODE_ENV === "production",
// 是否為 CSS 開啟 source map。設置為 true 之后可能會影響構建的性能。
sourceMap: false,
// 啟用 CSS modules for all css / pre-processor files.(預加載)
requireModuleExtension: true,
loaderOptions: {
sass: {
// data: `@import "@/assets/css/variables.scss";`
}
}
},
devServer: {
port: 2021, // 設置端口號
host: '10.32.120.69', // ip
disableHostCheck: true, //是否關閉用于 DNS 重綁定的 HTTP 請求的 HOST 檢查
hotOnly: false, // 熱更新
https: false, // https:{type:Boolean}配置前綴
open: false, //配置自動啟動瀏覽器
proxy: null, //設置代理
// proxy: { //目的是解決跨域，若測試環境不需要跨域，則不需要進行該配置
// '/api': { // 攔截以 /api 開頭的url接口
// target: 'https://api.taobao.cn/', //目標接口域名
// changeOrigin: true, //是否跨域
// ws: true, //如果要代理 websockets，配置這個參數
// secure: false, // 如果是https接口，需要配置這個參數
// // 標識替換
// // 原請求地址為 /api/getData 將'/api'替換''時，
// // 代理后的請求地址為： http://xxx.xxx.xxx/getData
// // 若替換為'/other',則代理后的請求地址為 http://xxx.xxx.xxx/other/getData
// pathRewrite: { // 標識替換
// '^/api': '/' //重寫接口 后臺接口指向不統一 所以指向所有/
// '^/api': '/api/mock'
// }
// }
// }
},
// 這個插件中添加的service worker只在生產環境中啟用(例如，只有當你運行npm run build或yarn build時)。
// 不推薦在開發模式中啟用service worker，因為它會導致使用以前緩存的資產而不包括最新的本地更改的情況。
pwa: {
// serviceWorker:false,
// 允許您從一個現有的service worker文件開始，并創建一個該文件的副本，并將“預緩存清單”注入其中。
// workboxPluginMode:'InjectManifest',
// workboxOptions: {
// //swSrc: './app/sw.js', /* Empty file. */
// },
iconPaths: {
favicon32: "favicon.ico",
favicon16: "favicon.ico",
appleTouchIcon: "favicon.ico",
maskIcon: "favicon.ico",
msTileImage: "favicon.ico"
}
}
}關于“vue數據雙向綁定與vue.config.js文件配置的方法”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue數據雙向綁定與vue.config.js文件配置的方法”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
