MD基礎語法總結
阿新 • • 發佈：2020-08-13
Vue 是什麼
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架（
JS框架）。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
以上是官網介紹，Vue 其實就一款前端 js框架，類似 jQuery，但是注意 jQuery 不要和 Vue 同時引入
- 引入 Vue
<!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產環境版本，優化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
JavaScript 中的
constvarlet區別 >>> es5時候只有var定義變數，es6新增let和const，存在塊級作用域
constconst定義的變數不可以修改,而且必須初始化。 常常定義常量 也是塊級作用域varvar定義的變數可以修改，如果不初始化會輸出undefined 警告，不會報錯。 全域性作用域letlet是塊級作用域，函式內部使用let定義後，對函式外部無影響。 塊級作用域
入門示例
<body> <div id="app"> <span>{{msg}}</span><br> <input type="text" :placeholder="name">繫結屬性<br> <input type="text" :placeholder="pwd"><br> <span v-text="user.name"></span>取出物件中的值<br> <span>{{user.pwd}}</span>提供雙大括號取值<br> <p>{{lists}}</p>陣列定義用中括號[ ] <p v-text="lists[0]"></p>通過角標來獲取陣列中的某個值 <p v-text="msg.toUpperCase()"></p>取值時可以用Vue中的方法，這裡是轉換為大寫 </div> </body> <script src="/js/vue.js"></script> <script> const app = new Vue({ el:"#app", //element 用來給 Vue 例項定義一個作用範圍 data:{ msg:"vue字串", name:"張三", pwd:"123", user:{name:"李四",pwd:"456"}, lists:["湖南","廣東","江蘇"], }, }); </script>
Vue 例項（物件）中的
el="#app"屬性：代表 Vue 的作用範圍，在該範圍類都可以使用Vue的語法，該範圍之外，Vue語法無效Vue 例項（物件）中的
data屬性：用來給 Vue 例項繫結一些相關資料，這些資料是自定義的
Vue 的基礎語法
v-text 和 v-html
v-text用來獲取 data 中的資料，將資料以文字的形式渲染到指定標籤內部
{{}}(插值表示式) 和 v-text 獲取資料的區別在於 1. 使用 v-text 取值會將標籤中原有的資料覆蓋，使用插值表示式的形式不會覆蓋標籤中原有的資料 2. 使用 v-text 可以避免在網路環境較差的情況出現插值閃爍
v-html用來獲取 data 中的資料，將資料中含有的html標籤先解析再渲染到指定標籤內部
條件與遍歷迴圈
v-if
v-if作用：用來控制標籤元素是否展示，底層通過對dom樹節點進行新增和刪除來控制是否顯示
<div id="app-2">
<p v-if="seen">sess 的值為true，這裡就會顯示</p>
</div>
var app = new Vue({
el: '#app-2',
data: {
seen: true
}
})
v-show
v-show的作用：用來控制頁面中標籤元素是否展示，底層通過控制元素的display屬性來控制標籤是否顯示
<span v-show="true">如果表示式的值為 true ，這裡就會顯示</span>
v-for
v-for作用就是用來對 物件進行遍歷的(在 JavaScript 中，陣列也是物件的一種)
<ol>
lists 表示一個數組
<li v-for="list in lists">
{{list}}
</li>
</ol>
var app = new Vue({
el: '#app',
data: {
lists: ["湖南","廣東","江蘇"]
}
})
繫結
標籤屬性繫結 v-bind
v-bind作用：用來給HTML頁面中標籤元素的屬性 繫結給 vue的例項
<a v-bind:href="vuesrc">Vue 官網</a>
簡化寫法
<a :href="vuesrc">Vue 官網</a>
v-bind:xxx的簡化寫法 ===>>:xxx
var app = new Vue({
el: '#app',
data: {
vuesrc: "https://cn.vuejs.org/",
}
})
事件繫結 v-on
事件的三要素
1. 事件源：發生事件dom元素
2. 事件:發生特定的動作 click單機、雙擊...
3. 監聽器：發生特定動作之後的事件處理程式，通常是js中函式
1. 在vue中繫結事件是通過 `v-on` 指令來完成的 `v-on:事件名` 如 `v-on:click`
2. 在`v-on:事件名`的賦值語句中是當前時間觸發呼叫的函式名，它的簡化寫法我： @click="method"
3. 在vue中事件的函式統一定義在Vue例項的 `methods`屬性中
4. 在vue定義的事件中`this`指的就是當前的`Vue例項(data)`,日後可以在事件中通過使用`this`獲取Vue例項中相關資料
<button v-on:click="test('張三',23,'男')">點選彈窗</button>
可以通過 事件名(param1,param2,param3....) 的方式傳遞引數 給事件監聽器方法
簡化寫法如下
<button @click="test('張三',23,'男')">點選彈窗</button>
v-on:xxx的簡化寫法 ===>>@xxx
const app = new Vue({
el:"#app", //element 用來給 Vue 例項定義一個作用範圍
data:{
message:"簡單的訊息"
},
methods:{
test(name,age,sex){
alert("點選彈出>"+name+">"+age+">"+sex);
//通過 this 獲取 data 中的資料
console.log(this.message);
}
}
});
表單資料雙向繫結 v-model
v-model作用：用來繫結標籤元素的值 與 vue例項物件中data的資料保持一致，從而失效雙向的資料繫結機制你可以用
v-model指令在表單<input>、<textarea>及<select>元素上建立雙向資料繫結
#文字：
<input v-model="message" placeholder="表單文字">
<p>Message is: {{ message }}</p>
# 多行文字
<textarea v-model="message" placeholder="多行文字"></textarea>
<p style="white-space: pre-line;">{{ message }}</p>
#複選框
<input type="checkbox" value="張三" v-model="checkedNames">
<label for="張三">張三</label>
<input type="checkbox" value="李四" v-model="checkedNames">
<label for="李四">李四</label>
<input type="checkbox" value="王五" v-model="checkedNames">
<label for="王五">王五</label>
<br>
<span>多人運動: {{ checkedNames }}</span>
---------
var app = new Vue({
el: '#app',
data: {
message: "",//v-model 繫結的 message 初始設定為空字串
checkedNames: [],
}
})
- 總結
# 總結
1. 使用 `v-mode` 指令可以實現資料的雙向繫結
2. 所謂雙向繫結，表單中資料變化會導致 vue例項data資料變化， vue例項中data資料的變化 同樣會導致表單中的資料變化；稱之為雙向繫結。
# MVVM架構 雙向繫結機制
Model 資料 Vue例項中繫結資料
VM ViewModel 監聽器 ===》 監聽器會實時的監聽 vue例項中data資料 和 頁面展示的資料，從而實現雙向繫結
View 頁面 頁面展示的資料
事件修飾符
.stop- 阻止單擊事件繼續傳播,
<!-- 當這種情況，input 位於 div 下，且兩者都有一個點選事件， 當點選 button 按鈕的同時會觸發 div 的 click事件，這這種情況又叫事件傳播/事件冒泡, 通過 .stop 修飾符可以阻止事件的傳播行為-->
<div @click.stop="divClick">
<input type="button" @click.stop="bClick" value="單擊"/>
</div>
-
.prevent- 用來阻止標籤的預設行為
<a href="https://cn.vuejs.org/" @click.prevent="aClick">點選不會跳轉頁面，而是會觸發 aClick 的單擊事件</a> -
.self- 可以避免其他事件行為的影響，比如 事件傳播：self 只關心自己標籤上觸發的事件行為
<!-- 只會觸發標籤自身的事件 --> <div @click.self="divClick"> <!-- 當點選 按鈕1 或 按鈕2 時，事件的傳播行為不會影響到 div的事件 --> <input type="button" vlaue="按鈕1" @click="btnClick1"/> <input type="button" vlaue="按鈕2" @click="btnClick2"/> .stop 是用於阻止自身事件的傳播行為，.self 可以避免 事件傳播行為的影響 </div> -
.once- 讓指定的事件值觸發一次
<!-- aClick 事件只會被觸發一次 --> <a href="#" @click.once="aClick">連結</a> <!-- 混合使用事件修飾符, 以下標籤 第一次點選不會跳轉頁面，且只會觸發一次 aClick 的事件 --> <a href="https://cn.vuejs.org/" @click.once.prevent="aClick"> 連結 </a> # 第二點選才會跳轉頁面 -
.passive -
.capture
按鍵修飾符
在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許為
v-on在監聽鍵盤事件時新增按鍵修飾符：
# 按鍵碼的別名
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
# 使用方式 v-on:keyup.按鍵碼別名 = "要呼叫的處理方法xxxMethod"
<input type="text" v-model="msg" @keyup.enter="keyEnter">