Vue基礎學習筆記01

Vue.js

• 概要
  • 簡單了解
  • Vue語法

1.簡單認識

• vue是一個漸進式框架？了解就好
  • 意味着可以將vue作為應用的一部分嵌入其中
• vue的特點
  • 解耦視圖和數據
  • 前端路由
  • 可復用組件
  • 狀態管理
  • 虛擬DOM

2.Vue.js安裝

1. 直接CDN引入

   <!-- 開發環境版本，包含了有幫助的命令行警告 --> 
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 生產環境版本，優化了尺寸和速度 -->
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   
   

2. 下載后引入

3. NPM安裝（后面講到）

3.初體驗

	<div id="app">{{message}}
        <ul>
				<li v-for="item in movies">{{item}}</li>
		</ul>

	<h2>{{count}}</h2>
    <button type="button" @click="add">+</button>
    <button type="button"  @click="sub">-</button>
    </div>
//數據和視圖分離
	<script src="../js/vue.js"></script>
		<script>
			//let(ES6定義變量)/const(常量)
			let app=new Vue({
				el:'#app',//用於掛載要管理的元素
				data:{//定義數據
					message:'Hello Vue',
                    movies:['Hello','World','VUE']
				}，
                methods:{
					add:function(){
						console.log('add執行');
						this.count++;
					},
					sub:function(){
						console.log('sub執行');
						this.count--;
						
					}
				}
			});
		</script>

4.MVVM的概念

5.Vue生命周期

beforeCreate:function(){
console.log('xxx');
},
mounted:function(){
console.log('xxxs');
}//這是一些生命周期的回調函數 大概意思就是在創建vue對象時，執行到某一步驟就會回調一個函數

6.語法

6.1 插值操作

6.1.1 Mustache {{}}

• mustache語法中不僅可以直接協變量，還可以寫簡單的表達式，如：

• {{firstname+' '+lastname}}
  

6.1.2 v-once

• vue是響應式的，但有時候我們不想數據跟着變化，就用到v-once.

• <h2 v-once>{{message}}</h2>
  

6.1.3 v-html

• 如果我們直接通過{{}}來輸出，會將HTML代碼也一起輸出

• <h2 v-html="url"></h2>
  

6.1.4 v-text

• 類似與{{}} ，但不同的是它不會先看到{{}}這個..但一般很少用..

• <h2 v-text="url"></h2>
  

6.1.5 v-pre

• v-pre用於跳過這個元素和它子元素的編譯過程，用於顯示原本的Mustache語法

• <p v-pre>{{message}}</p> //輸出是{{message}}沒有解析
  

6.1.6 v-cloak

• 防止閃爍..防止htlml先顯示{{message}}之類的..
• 原理：寫上個v-cloak屬性，然后如果屬性存在就display:none不顯示，當vue解析完后就刪除v-cloak這個屬性

6.2 綁定屬性

• 動態的綁定某一些屬性的值，如a標簽的href，img的src屬性。

6.2.1 v-bind基本使用

簡單使用:

	<div id="app">
			<a v-bind:href="ahref">百度</a>
	</div>		
    <script>	
        let app=new Vue({
            el:'#app',//用於掛載要管理的元素
            data:{//定義數據
                ahref:'http://www.baidu.com'
            }	
        });
    </script>
//簡寫 : <a :href="ahref">百度</a>

6.2.2 v-bind 對象語法

• ​ 對象語法的含義是:class后面跟的是一個對象

• 用法一：直接通過{}綁定一個類

• <h2 :class="{'active': isActive}">Hello World</h2>*
  

• 用法二：也可以通過判斷，傳入多個值

• <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
  

• 用法三：和普通的類同時存在，並不沖突

  注：如果isActive和isLine都為true，那么會有title/active/line三個類

  <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
  

• 用法四：如果過於復雜，可以放在一個methods或者computed中,即調用一個方法，返回一個對象。

  注：classes是一個計算屬性 后面才講到

  <h2 class="title" :class="classes">Hello World</h2>
  

  簡單例子：

		<div id="app" :class="{'red':isRed,'blod':isBlod}">  //<---看這里
			百度
		</div>
		<script>	
			let app=new Vue({
				el:'#app',
				data:{//定義數據
					isRed:true,
					isBlod:true
				}		
			});
		</script>

6.2.3 v-bind數組語法

注意：下面加單引號的是字符串不解析，如果不加單引號就是對應data里面的數據了。
用法一：直接通過{}綁定一個類
<h2 :class="['active']">Hello World</h2>

用法二：也可以傳入多個值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的類同時存在，並不沖突
注：會有title/active/line三個類
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果過於復雜，可以放在一個methods或者computed中
注：classes是一個計算屬性
<h2 class="title" :class="classes">Hello World</h2>

6.3 綁定樣式

​ v-bind:style來綁定一些CSS內聯樣式。

6.3.1 對象語法

綁定方式一：對象語法
:style="{color: currentColor, fontSize: fontSize + 'px'}"
//style后面跟的是一個對象類型對象的
//key是CSS屬性名稱
//對象的value是具體賦的值，值可以來自於data中的屬性

綁定方式二：數組語法  基本不用 
<div v-bind:style="[baseStyles, overridingStyles]"></div>
//style后面跟的是一個數組類型  baseStyles 是data的一個對象：以key:value..
//多個值以，分割即可

6.4 計算屬性 computed

• n但是在某些情況，我們可能需要對數據進行一些轉化后再顯示，或者需要將多個數據結合起來進行顯示，用到計算屬性。

6.4.1 基本使用：

	<div id="app">{{fullName}}</div> //不用加（）
		<script>	
			let app=new Vue({
				el:'#app',
				data:{
					firstname:'Hello',
					lastname:' Vue'
				},
				//計算屬性
				computed:{
					fullName:function(){//其實是個簡寫，詳細看下面
						return this.firstname+ " "+this.lastname;
					}
				}
			});
		</script>

6.4.2 計算屬性的setter、getter

//一般情況沒有set方法，上面的是簡寫
computed:{
    fullName:{
        get:function(){
            return this.firstname+ " "+this.lastname;
        }
    }

使用set的情況：如果我在控制台修改：fuuName="xxx xxx"，默認會調用set方法。

6.4.3 計算屬性的緩存

？ methods和computed 的區別

• 計算屬性會進行緩存，如果多次使用時，計算屬性只會調用一次 。（內容沒修改的前提下）

6.5 事件監聽

6.5.1 v-on基本使用

如點擊事件：v-on:click=methodName“”

簡寫：@click

6.5.2 v-on參數

1. 如果方法不需要傳參數，@click="name",可以不加()
2. 如果這樣調用@click="name",但name的方法name(event)有參數，默認會傳入事件對象
3. 如果要同時傳入參數和event,通過$event傳入事件

6.5.3 v-on修飾符

阻止冒泡等等。

在某些情況下，我們拿到event的目的可能是進行一些事件處理。
Vue提供了修飾符來幫助我們方便的處理一些事件：
.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。
.once - 只觸發一次回調。

//停止冒泡
<button @click.stop="doThis"></button>
//阻止默認行為 如a的默認跳轉或者表單的提交按鈕等
<button @click.prevent></button>

<input @Keyup.13="onEnter"> //監聽鍵盤抬起，.13修飾抬起哪一個鍵

6.6 條件判斷

nv-if的原理：

pv-if后面的條件為false時，對應的元素以及其子元素不會渲染。

p也就是根本沒有不會有對應的標簽出現在DOM中。

6.6.1v-if v-else-if v-else

6.6.2 key 小問題

• 小問題：

如果我們在有輸入內容的情況下，切換了類型，我們會發現文字依然顯示之前的輸入的內容。

但是按道理講，我們應該切換到另外一個input元素中了。

在另一個input元素中，我們並沒有輸入內容。

為什么會出現這個問題呢？

問題解答：

這是因為Vue在進行DOM渲染時，出於性能考慮，（有個虛擬DOM）會盡可能的復用已經存在的元素，而不是重新創建新的元素。

在上面的案例中，Vue內部會發現原來的input元素不再使用，直接作為else中的input來使用了。

解決方案：

如果我們不希望Vue出現類似重復利用的問題，可以給對應的input添加key

並且我們需要保證key的不同 加一個key屬性：key="name"

6.6.3 v-show

• v-if和v-show的區別
  • v-if為false 元素沒有在DOM上
  • v-show為fase 時元素知識displat為none而已
• 用法
  • v-show="Boolean值 "

6.7 循環遍歷

6.7.1 基本使用

 格式：v-for="item in items"
 遍歷數組的過程中獲取下標值：v-for="(item,index) in items" //注意 index是后面的

 遍歷對象：
 //返回的是對象屬性的值
 <ul><li v-for="item in info">{{item}}</li></ul>
 //遍歷對象的值和鍵
 <ul><li v-for="(value,key) in info">{{value}}--{{key}}</li></ul>
 //遍歷對象值和鍵還有下標  下標一般很少用
  <ul><li v-for="(value,key,index) in info">{{value}}--{{key}}</li></ul>
 data:{
     info{
         name:'whis',
         age:18,
         height:1.77
     }
 }

6.7.2 v-for key的屬性使用 大致理解

視頻的P37..

​ 官方推薦我們在使用v-for時，給對應的元素或組件添加上一個:key屬性。

​ 原因：看ppt..

7. ES6不完全學習

7.1 let/var

var沒有塊級作用域，會引起一些問題。比如這個：就需要閉包解決。

​ 塊級作用域：let是有塊級作用域的

7.2 const使用

標志一個常量，const定義時要賦值，且之后不能修改。

如果指向對象的話，意思是指向的對象不能變，但那個對象的屬性可以修改。

7.3對象字面量增強寫法

//對象字面量寫法 不是用 const obj=new Object（）
const obj={
    name:'dong'
}
//ES5寫法
const name='dong';
const obj={
    name:name
}
//ES6寫法 會把上面的name作為名稱，值作為value 相當於name='dong'
const obf={
    name //屬性的增強寫法
}
//注意是冒號，習慣性寫成=號...
//函數的增強寫法 以前是run:function(){}
const obj={
    run(){
        
    }
}
//TypeScript 有了類型檢測..

8.檢查數組更新

• vue是響應式的，當數據發生改變，Vue檢測到data數據改變就會重新渲染dom。

• 但有些對數組的操作不一定式響應式的。

• Vue中包含了一組觀察數組編譯的方法，使用它們改變數組也會觸發視圖的更新。
  push()//后面添加元素 可以添加多個  可變參數
  pop()//刪除最后元素
  shift() //刪除第一個
  unshift()//最前面添加元素 可以添加多個
  
  //可以刪除、替換、增加
  splice()//參數 start  
  刪除：arraynames.splice(1,3) //第二個參數刪除個數
  替換：arraynames.splice(1,3,'M','N','F')；//第二個參數替換個數，替換從1開始的后三個
  插入：arraynames.splice(1,0,'M','N','F')；//插入元素..
  sort()//排序
  reverse()//倒轉
  //還有一種修改的方法
  Vue.set(this.arraynames，0，’aa‘)；//是通過vue的內部實現的
  注意：
  這個：this.arraynames[0]='XXX'; //通過索引修改數組是沒有響應式的。即數組內容改變了，但DOM不會刷新改變
  
  

我看的這個視頻的網站：https://www.bilibili.com/video/av59594689