Vue基礎--學習記錄(一)
Vue 是什麼？
官方地址javascript
- Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架
- vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合
使用Vue將helloworld 渲染到頁面上
指令
- 本質就是自定義屬性
- Vue中指定都是以 v- 開頭
v-cloak
- 防止頁面加載時出現閃爍問題
<style type="text/css">
/*
一、經過屬性選擇器 選擇到 帶有屬性 v-cloak的標籤 讓他隱藏
*/
[v-cloak]{
/* 元素隱藏 */
display: none;
}
</style>
<body>
<div id="app">
<!-- 二、 讓帶有插值 語法的 添加 v-cloak 屬性
在 數據渲染完場以後，v-cloak 屬性會被自動去除，
v-cloak一旦移除也就是沒有這個屬性了 屬性選擇器就選擇不到該標籤
也就是對應的標籤會變爲可見
-->
<div v-cloak >{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
// el 指定元素 id 是 app 的元素
el: '#app',
// data 裏面存儲的是數據
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
v-text
- v-text指令用於將數據填充到標籤中，做用於插值表達式相似，可是沒有閃動問題
- 若是數據中有HTML標籤會將html標籤一併輸出
- 注意：此處爲單向綁定，數據對象上的值改變，插值會發生變化；可是當插值發生變化並不會影響數據對象的值
<div id="app">
<!--
注意:在指令中不要寫插值語法 直接寫對應的變量名稱
在 v-text 中 賦值的時候不要在寫 插值語法
通常屬性中不加 {{}} 直接寫 對應 的數據名
-->
<p v-text="msg"></p>
<p>
<!-- Vue 中只有在標籤的 內容中 才用插值語法 -->
{{msg}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
v-html
- 用法和v-text 類似 可是他能夠將HTML片斷填充到標籤中
- 可能有安全問題, 通常只在可信任內容上使用
v-html，永不用在用戶提交的內容上 - 它與v-text區別在於v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標籤解析後輸出。
<div id="app">
<p v-html="html"></p> <!-- 輸出：html標籤在渲染的時候被解析 -->
<p>{{message}}</p> <!-- 輸出：<span>經過雙括號綁定</span> -->
<p v-text="text"></p> <!-- 輸出：<span>html標籤在渲染的時候被源碼輸出</span> -->
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "<span>經過雙括號綁定</span>",
html: "<span>html標籤在渲染的時候被解析</span>",
text: "<span>html標籤在渲染的時候被源碼輸出</span>",
}
});
</script>
v-pre
- 顯示原始信息跳過編譯過程
- 跳過這個元素和它的子元素的編譯過程。
- 一些靜態的內容不須要編譯加這個指令能夠加快渲染
<span v-pre>{{ this will not be compiled }}</span>
<!-- 顯示的是{{ this will not be compiled }} -->
<span v-pre>{{msg}}</span>
<!-- 即便data裏面定義了msg這裏仍然是顯示的{{msg}} -->
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
v-once
- 執行一次性的插值【當數據改變時，插值處的內容不會繼續更新】
<!-- 即便data裏面定義了msg 後期咱們修改了 仍然顯示的是第一次data裏面存儲的數據即 Hello Vue.js -->
<span v-once>{{ msg}}</span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
雙向數據綁定
- 當數據發生變化的時候，視圖也就發生變化
- 當視圖發生變化的時候，數據也會跟着同步變化
v-model
- v-model是一個指令，限制在
<input>、<select>、<textarea>、components中使用
<div id="app">
<div>{{msg}}</div>
<div>
當輸入框中內容改變的時候， 頁面上的msg 會自動更新
<input type="text" v-model='msg'>
</div>
</div>
mvvm
- MVC 是後端的分層開發概念； MVVM是前端視圖層的概念，主要關注於 視圖層分離，也就是說：MVVM把前端的視圖層，分爲了 三部分 Model, View , VM ViewModel
m modelcss
- 數據層 Vue 中 數據層 都放在 data 裏面
v view 視圖html
- Vue 中 view 即 咱們的HTML頁面
vm （view-model） 控制器 將數據和視圖層創建聯繫前端
- vm 即 Vue 的實例 就是 vm
v-on
- 用來綁定事件的
- 形式如：v-on:click 縮寫爲 @click;
v-on事件函數中傳入參數
<body>
<div id="app">
<div>{{num}}</div>
<div>
<!-- 若是事件直接綁定函數名稱，那麼默認會傳遞事件對象做爲事件函數的第一個參數 -->
<button v-on:click='handle1'>點擊1</button>
<!-- 二、若是事件綁定函數調用，那麼事件對象必須做爲最後一個參數顯示傳遞，
而且事件對象的名稱必須是$event
-->
<button v-on:click='handle2(123, 456, $event)'>點擊2</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event.target.innerHTML)
},
handle2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
this.num++;
}
}
});
</script>
事件修飾符
- 在事件處理程序中調用
event.preventDefault()或event.stopPropagation()是很是常見的需求。 - Vue 不推薦咱們操做DOM 爲了解決這個問題，Vue.js 爲
v-on提供了事件修飾符 - 修飾符是由點開頭的指令後綴來表示的
<!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件再也不重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符能夠串聯 即阻止冒泡也阻止默認事件 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div> 使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 v-on:click.prevent.self 會阻止全部的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
按鍵修飾符
- 在作項目中有時會用到鍵盤事件，在監聽鍵盤事件時，咱們常常須要檢查詳細的按鍵。Vue 容許爲
v-on在監聽鍵盤事件時添加按鍵修飾符
<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -當點擊enter 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--當點擊enter或者space時 時調用 `vm.alertMe()` -->
<input type="text" v-on:keyup.enter.space="alertMe" >
經常使用的按鍵修飾符
.enter => enter鍵
.tab => tab鍵
.delete (捕獲「刪除」和「退格」按鍵) => 刪除鍵
.esc => 取消鍵
.space => 空格鍵
.up => 上
.down => 下
.left => 左
.right => 右
<script>
var vm = new Vue({
el:"#app",
methods: {
submit:function(){},
alertMe:function(){},
}
})
</script>
自定義按鍵修飾符別名
- 在Vue中能夠經過
config.keyCodes自定義按鍵修飾符別名
<div id="app">
預先定義了keycode 116（即F5）的別名爲f5，所以在文字輸入框中按下F5，會觸發prompt方法
<input type="text" v-on:keydown.f5="prompt()">
</div>
<script>
Vue.config.keyCodes.f5 = 116;
let app = new Vue({
el: '#app',
methods: {
prompt: function() {
alert('我是 F5！');
}
}
});
</script>
v-bind
- v-bind 指令被用來響應地更新 HTML 屬性
- v-bind:href 能夠縮寫爲 :href;
<!-- 綁定一個屬性 --> <img v-bind:src="imageSrc"> <!-- 縮寫 --> <img :src="imageSrc">
綁定對象
- 咱們能夠給v-bind:class 一個對象，以動態地切換class。
- 注意：v-bind:class指令能夠與普通的class特性共存
一、 v-bind 中支持綁定一個對象
若是綁定的是一個對象 則 鍵爲 對應的類名 值 爲對應data中的數據
<!--
HTML最終渲染爲 <ul class="box textColor textSize"></ul>
注意：
textColor，textSize 對應的渲染到頁面上的CSS類名
isColor，isSize 對應vue data中的數據 若是爲true 則對應的類名 渲染到頁面上
當 isColor 和 isSize 變化時，class列表將相應的更新，
例如，將isSize改爲false，
class列表將變爲 <ul class="box textColor"></ul>
-->
<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
<li>學習Vue</li>
<li>學習Node</li>
<li>學習React</li>
</ul>
<div v-bind:style="{color:activeColor,fontSize:activeSize}">對象語法</div>
<sript>
var vm= new Vue({
el:'.box',
data:{
isColor:true,
isSize:true，
activeColor:"red",
activeSize:"25px",
}
})
</sript>
<style>
.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
</style>
綁定class
二、 v-bind 中支持綁定一個數組 數組中classA和 classB 對應爲data中的數據
這裏的classA 對用data 中的 classA
這裏的classB 對用data 中的 classB
<ul class="box" :class="[classA, classB]">
<li>學習Vue</li>
<li>學習Node</li>
<li>學習React</li>
</ul>
<script>
var vm= new Vue({
el:'.box',
data:{
classA:‘textColor‘,
classB:‘textSize‘
}
})
</script>
<style>
.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
</style>
綁定對象和綁定數組 的區別
- 綁定對象的時候 對象的屬性 即要渲染的類名 對象的屬性值對應的是 data 中的數據
- 綁定數組的時候數組裏面存的是data 中的數據
綁定style
<div v-bind:style="styleObject">綁定樣式對象</div>'
<!-- CSS 屬性名能夠用駝峯式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">內聯樣式</div>
<!--組語法能夠將多個樣式對象應用到同一個元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>
<script>
new Vue({
el: '#app',
data: {
styleObject: {
color: 'green',
fontSize: '30px',
background:'red'
}，
activeColor: 'green',
fontSize: "30px"
},
styleObj1: {
color: 'red'
},
styleObj2: {
fontSize: '30px'
}
</script>
分支結構
v-if 使用場景
- 1- 多個元素 經過條件判斷展現或者隱藏某個元素。或者多個元素
- 2- 進行兩個視圖之間的切換
<div id="app">
<!-- 判斷是否加載，若是爲真，就加載，不然不加載-->
<span v-if="flag">
若是flag爲true則顯示,false不顯示!
</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
----------------------------------------------------------
<div v-if="type === 'A'">
A
</div>
<!-- v-else-if緊跟在v-if或v-else-if以後 表示v-if條件不成立時執行-->
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<!-- v-else緊跟在v-if或v-else-if以後-->
<div v-else>
Not A/B/C
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
v-show 和 v-if的區別
v-show本質就是標籤display設置爲none，控制隱藏vue
- v-show只編譯一次，後面其實就是控制css，而v-if不停的銷燬和建立，故v-show性能更好一點。
v-if是動態的向DOM樹內添加或者刪除DOM元素java
- v-if切換有一個局部編譯/卸載的過程，切換過程當中合適地銷燬和重建內部的事件監聽和子組件
循環結構
v-for
- 用於循環的數組裏面的值能夠是對象，也能夠是普通元素
<ul id="example-1">
<!-- 循環結構-遍歷數組
item 是咱們本身定義的一個名字 表明數組裏面的每一項
items對應的是 data中的數組-->
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]，
}
})
</script>
- 不推薦同時使用
v-if和v-for - 當
v-if與v-for一塊兒使用時，v-for具備比v-if更高的優先級。
<!-- 循環結構-遍歷對象
v 表明 對象的value
k 表明對象的 鍵
i 表明索引
--->
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]，
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
})
</script>
key 的做用後端
- key來給每一個節點作一個惟一標識
- key的做用主要是爲了高效的更新虛擬DOM
<ul> <li v-for="item in items" :key="item.id">...</li> </ul>
案例選項卡
一、 HTML 結構
`
<div id="app">
<div class="tab">
<!-- tab欄 -->
<ul>
<li class="active">apple</li>
<li class="">orange</li>
<li class="">lemon</li>
</ul>
<!-- 對應顯示的圖片 -->
<div class="current"><img src="img/apple.png"></div>
<div class=""><img src="img/orange.png"></div>
<div class=""><img src="img/lemon.png"></div>
</div>
</div>
`
二、 提供的數據
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
三、 把數據渲染到頁面
把tab欄 中的數替換到頁面上數組
- 把 data 中 title 利用 v-for 循環渲染到頁面上
- 把 data 中 path利用 v-for 循環渲染到頁面上
<div id="app">
<div class="tab">
<ul>
<!--
一、綁定key的做用 提升Vue的性能
二、 key 須要是惟一的標識 因此須要使用id， 也可使用index ，
index 也是惟一的
三、 item 是 數組中對應的每一項
四、 index 是 每一項的 索引
-->
<li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
</ul>
<div :key='item.id' v-for='(item, index) in list'>
<!-- : 是 v-bind 的簡寫 綁定屬性使用 v-bind -->
<img :src="item.path">
</div>
</div>
</div>
<script>
new Vue({
// 指定 操做元素 是 id 爲app 的
el: '#app',
data: {
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
}
})
</script>
四、 給每個tab欄添加事件,並讓選中的高亮
4.1 、讓默認的第一項tab欄高亮瀏覽器
tab欄高亮 經過添加類名active 來實現 （CSS active 的樣式已經提早寫好）安全
- 在data 中定義一個 默認的 索引 currentIndex 爲 0
- 給第一個li 添加
active 的類名
- 經過動態綁定class 來實現 第一個li 的索引爲 0 和 currentIndex 的值恰好相等
- currentIndex === index 若是相等 則添加類名 active 不然 添加 空類名
4.2 、讓默認的第一項tab欄對應的div 顯示
- 實現思路 和 第一個 tab 實現思路同樣 只不過 這裏控制第一個div 顯示的類名是 current
<ul>
<!-- 動態綁定class 有 active 類名高亮 無 active 不高亮-->
<li :class='currentIndex==index?"active":""'
:key='item.id' v-for='(item,index) in list'
>{{item.title}}</li>
</ul>
<!-- 動態綁定class 有 current 類名顯示 無 current 隱藏-->
<div :class='currentIndex==index?"current":""'
:key='item.id' v-for='(item, index) in list'>
<!-- : 是 v-bind 的簡寫 綁定屬性使用 v-bind -->
<img :src="item.path">
</div>
<script>
new Vue({
el: '#app',
data: {
currentIndex: 0, // 選項卡當前的索引 默認爲 0
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
}
})
</script>
4.3 、點擊每個tab欄 當前的高亮 其餘的取消高亮
- 給每個li添加點擊事件
- 讓當前的索引 index 和 當前 currentIndex 的 值 進項比較
- 若是相等 則當前li 添加active 類名 當前的 li 高亮 當前對應索引的 div 添加 current 當前div 顯示 其餘隱藏
<div id="app">
<div class="tab">
<ul>
<!-- 經過v-on 添加點擊事件 須要把當前li 的索引傳過去
-->
<li v-on:click='change(index)'
:class='currentIndex==index?"active":""'
:key='item.id'
v-for='(item,index) in list'>{{item.title}}</li>
</ul>
<div :class='currentIndex==index?"current":""'
:key='item.id' v-for='(item, index) in list'>
<img :src="item.path">
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
currentIndex: 0, // 選項卡當前的索引 默認爲 0
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
},
methods: {
change: function(index) {
// 經過傳入過來的索引來讓當前的 currentIndex 和點擊的index 值 相等
// 從而實現 控制類名
this.currentIndex = index;
}
}
})
</script>
相關文章
- 1. Vue基礎---學習記錄(五)
- 2. vue學習筆記—vue基礎（一）
- 3. VUE學習筆記——基礎
- 4. vue學習筆記——基礎
- 5. vue基礎學習筆記（一）
- 6. HTML基礎學習記錄
- 7. TypeScript 基礎（記錄學習）
- 8. jquery基礎學習記錄
- 9. java基礎學習記錄
- 10. Git基礎學習記錄
- 更多相關文章...
- • ADO 添加記錄 - ADO 教程
- • ADO 更新記錄 - ADO 教程
- • Kotlin學習（一）基本語法
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vue基礎---學習記錄(五)
- 2. vue學習筆記—vue基礎（一）
- 3. VUE學習筆記——基礎
- 4. vue學習筆記——基礎
- 5. vue基礎學習筆記（一）
- 6. HTML基礎學習記錄
- 7. TypeScript 基礎（記錄學習）
- 8. jquery基礎學習記錄
- 9. java基礎學習記錄
- 10. Git基礎學習記錄