Vue技術分享

2021-10-07 21:00:59 字數 1540 閱讀 3405

是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合

mvvm模式圖

在用 vue 構建大型應用時推薦使用 npm 安裝。npm 能很好地和諸如 webpack 或 browserify 模組打包器配合使用。npm install vue

node 版本要求,vue cli 需要 node.js 8.9 或更高版本 (推薦 8.11.0+)。

npm install -g @vue/cli。可以用這個命令來檢查其版本是否正確:vue -version

執行以下命令來建立乙個新專案: vue create `name`。 然後會被提示選取乙個 preset。你可以選預設的包含了基本的 babel + eslint 設定的 preset,也可以選「手動選擇特性」來選取需要的特性。

上述命令會開啟乙個瀏覽器視窗,並以圖形化介面將你引導至專案建立的流程。【演示】

文字:} 裡面可以使用js表示式 }  }

html:}只能顯示文字,要轉義html,要是用v-html指令 

標籤屬性資料繫結:button 可簡寫

v-if指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 truthy 值的時候被渲染。也可以用v-else新增乙個「else 塊」:

abc

not a/b/c

v-else-if也必須緊跟在帶v-if或者v-else-if的元素之後。v-else元素必須緊跟在帶v-if或者v-else-if的元素的後面。

v-show:用法和v-if大致一樣。但是v-show不支援元素,也不支援v-else。

var example2 = new vue(,

]}})

new vue(

}})

js中陣列改變,只有以下幾個方法會重新渲染,否則要用到this.$set(arr, index, value)

vue入門級技術分享

需求 解決方案 宣告式渲染 元件系統 vueui元件 elementui 客戶端路由 vue router 大規模狀態管理 vuex 構建工具 webpack 專案腳手架 vue cli 資料持久化 vue cookie 圖表vue echarts 質量檢查 eslint plugin vue 推薦...

技術分享 vue3 0新特性teleport是啥

前言 舉個簡單的例子,我們在使用modal元件的時候,我們將它放在了我們的模板template裡面,但是由於modal元件希望位於頁面的最上方,這時候我們將modal元件掛載在body上面是最好控制的,我們能夠很好的通過zindex來控制modal的位置,當他巢狀在templat裡面的時候就不那麼容...

mysql可以分享的技術 技術分享 MySQL

1 查詢語句是如何執行的?1 連線 1 建立連線 2 驗證許可權,修改了許可權,建立新的連線才會生效。3 sql執行的臨時記憶體 2 查詢快取 1 先查詢快取,更新操作會導致所有快取失效。2 mysql 8.0功能去掉 3 分析 詞法解析,語法解析 4 優化 1 決定使用哪個索引,比方說根據統計資訊...