一、Vue簡介
Vue (讀音 /vju?/，類似于 view)，不要讀錯，面試的時候大家一定要獨對音調,不要讀成V U E.雖然好像并沒有什么卵用,不過顯得專業!!!專業就是Money
Vue是一個漸進式的前端框架，什么是漸進式的呢？ VUE全家桶
? 漸進式意味著你可以將Vue作為你應用的一部分嵌入其中，或者如果你希望將更多的業務邏輯使用Vue實作，那么Vue的核心庫以及其生態系統，比如Core+Vue-router+Vuex+axios，也可以滿足你各種各樣的需求，
Vue的特點和Web開發中常見的高級功能：
? 1、解耦視圖和資料
? 2、雙向資料系結
? 3、可復用的組件
? 4、前端路由技術
? 5、狀態管理
? 6、虛擬DOM
學習Vuejs的前提？
? 從零學習Vue開發，并不需要你具備其他類似于Angular、React，甚至是jQuery的經驗，但是你需要具備一定的HTML、CSS、JavaScript基礎，
注意：
? 學習Vue框架，必須嚴格遵循他的語法規則，Vue代碼的書寫思路和以前的JQuery完全不一樣，所以，在專案中使用Vue之前，必須先學習Vue的基本語法規則，
二、Vue 安裝使用
專案里引入Vue的方式：（在專案中使用vue）
使用一個框架，我們第一步要先下載安裝它
使用Vue的方式有很多：
方式一：直接CDN引入
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
方式二：下載和引入
// 開發環境 https://vuejs.org/js/vue.js
// 生產環境 https://vuejs.org/js/vue.min.js
方式三：NPM安裝
? 通過Vue-Cli3(腳手架)方式引入，我們使用該方式
三、體驗Vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{ str1 }}</p>
</div>
<script>
// 使用一個vue物件來管理這個div及里面的資料
new Vue({
el:"#app", // Vue物件管理的是這個標簽
data:{ // data里面是這個標簽中會用的一些資料
str1:"Hello玖柒"
}
})
</script>
</body>
</html>
上面的代碼做了什么事情？
-
先看js代碼，會發現創建了一個Vue物件
-
創建Vue物件的時候，傳入了一個物件：{}
2.1 {}中的el屬性：該屬性決定了這個Vue物件掛載到哪一個元素上，很明顯，我們這里掛載到了id為app的元素上，
2.2 {}中包含了data屬性：該屬性中通常會存盤一些資料，好像上面例子中的str1就是直接定義出來的資料
四、Vue常見的語法格式（重點）
4.1、模板語法的初步認識(胡子語法|插值語法等)
<body>
<div id="app">
<p>{{str1}}</p>
<p>{{num1}}</p>
<p>{{num2}}</p>
<p>num1和num2中比較大的數字: {{num1 > num2 ? num1 : num2}}</p>
<p>把str2反轉: {{str2.split('').reverse().join('')}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
str1: 'hello',
num1: 20,
num2: 30,
str2: 'hello'
}
})
</script>
</body>
</script>
4.2、v-bind控制標簽屬性
v-bind指令,讓普通的標簽屬性的值為 data中的屬性名
v-bind指令簡寫為冒號
<div id="app">
<!-- v-bind指令,讓普通的標簽屬性的值為 data中的屬性名
v-bind指令簡寫為:
-->
<a v-bind:href="url1">百度一下</a>
<a :href="url2">淘寶一下</a>
</div>
<script>
new Vue({
el: "#app",
data: {
str1: 'hello',
num1: 20,
num2: 30,
str2: 'hello',
url1: "http://www.baidu.com",
url2: "http://www.taobao.com",
}
})
</script>
</script>
4.3、v-on事件格式
v-on指令 事件指令可以簡寫為@,需要注意的是在methods中使用方法,需要加上this,可以簡單的理解為一個Vue的實體
<div id="app">
<p>{{num1}}</p>
<p>{{num2}}</p>
<p>num1和num2中比較大的數字: {{num1 > num2 ? num1 : num2}}</p>
<button v-on:click="num1++">按鈕1</button>
<button @click="num1+=5">按鈕2</button>
<button @click="add(8)">按鈕3</button>
</div>
<script>
new Vue( {
el: '#app',
data:{
num1:20,
num2:30
},
methods:{
add: function(value) {
// alert("執行了")
this.num1 += value;
}
}
})
</script>
4.4、定義Vue物件基本格式總結
var vm = new Vue({
el: "要系結的標簽",
data: {
變數名1：值1,
變數名2：值2,
變數名3：值3,
...
},
methods: {
方法名1: function(){
},
方法名2: function(){
},
方法名3: function(){
}
}
});
五、vue控制類名和style樣式(動態控制類名)（重點）
<div id="app">
<!-- :class 值可以使一個物件 鍵名使類名,值是布林值 值為true表示有這個類,false表示無 -->
<div :class="{active:bool1, current:bool2}">
1
</div>
<!-- :class 值也可以說一個陣列 陣列中的元素就是這個標簽擁有的類名, 要加引號 -->
<div :class="['active', 'current']">2</div>
<!-- :class 值也可以是三元運算子,利用布林值控制 -->
<div :class="bool3 ? 'active' : ''">3</div>
<div :class="[bool3 ? 'active' : '', 'current']">4</div>
</div>
<script>
new Vue({
el:'#app',
data: {
bool1: true,
bool2: false,
bool3: true
}
})
</script>
六、選項卡案例
<div id="app" class="tab">
<div class="hd">
這里使用的是物件的方式
<span :class="{active: num==1}" @click="num=1">標題1</span>
<span :class="{active: num==2}" @click="num=2">標題2</span>
<span :class="{active: num==3}" @click="num=3">標題3</span>
</div>
<div class="bd">
這里使用的是三目運算子的方式
<div :class=" num==1?'current':''">標題1對應的內容</div>
<div :class=" num==2?'current':''">標題2對應的內容</div>
<div :class=" num==3?'current':''">標題3對應的內容</div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
num:1
}
})
</script>
七、v-if和v-show指令（重點）
v-if 和v-show都是來控制標簽是否顯示，但是也有區別，v-show是對樣式層面的控制，v-if是對dom節點的控制，
簡單點說，
- v-if的值為false時,會直接洗掉節點
- v-show的值為false時,不會洗掉節點,而是隱藏起來,相當于使用了display:none
點擊收藏按鈕案例：
<div id="app">
<button v-if="!isCollected" @click="isCollected=!isCollected">點擊收藏</button>
<button v-else @click="isCollected=!isCollected">取消收藏</button>
</div>
<script>
new Vue({
el:"#app",
data:{
// isCollected: false 表示未收藏
isCollected: false
}
})
</script>
</script>
八、v-for 串列和物件的渲染
<div id="app">
<ul>
<!-- list是一個陣列,item是陣列中的每一個元素 -->
<li v-for="item, index in list">{{index}}--{{item}}</li>
</ul>
<hr>
<ul>
<!-- obj是一個物件,item是鍵值對中的值 -->
<li v-for="item, key in obj">{{key}}---{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
list:['html', 'css', 'javascript', 'jquery', 'node', 'vue', 'react'],
obj: {
name: 'Vue',
age: 6,
work: 'web'
}
}
})
</script>
九、表單資料系結(雙向資料系結)（重點）
v-model 怎么使用?
v-model與表單元素配合使用, 值是data當中的屬性名,屬性名對應的值,可以理解為表單元素的
value值, 一旦用戶修改了輸入框的內容(value值),則val的值也會發生變化
具體代碼：
<div id="app">
<input type="text" v-model="val" />
<p>{{val}}</p>
<select v-model="selVal">
<option value ="bj">北京</option>
<option value ="sh">上海</option>
<option value ="gz">廣州</option>
</select>
<p>{{selVal}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
val: "默認值",
selVal: 'gz'
}
})
</script>
十、Vue中的MVVM
什么是MVVM
- View層：
視圖層，在前端里就是我們常說的DOM層，主要作用是給用戶展示各種資訊；
- Model層：
資料層，資料可能是我們自定定義的資料，或者是從網路請求下來的資料；
- ViewModel層：
視圖模型層，是View層和Model層溝通的橋梁；一方面它實作了資料系結（Data Binding），將Model的改變實時反應到View中；另一方面它實作了DOM監聽，當DOM發生改變可以對應改變資料（Data）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/257481.html
標籤：其他
上一篇：HTML及CSS筆記