VUE基礎入門使用教程
阿新 • • 發佈：2022-05-17
第一個Vue程式
.html
<!--view層 ${} 變成了一個模板--> <div id="app"> <ul> <li><span v-bind:title="m">滑鼠懸停幾秒檢視此處動態繫結的提示資訊！</span> </li> <li>{{name}}</li> <li>{{tit.name}}</li> </ul> <a v-bind:href="tit.url">b站連結</a> </div>
.script
var vm =new Vue({
el:"#app", //元素的縮寫 el
data:{ //Model ： 資料
m:'Hello vue!',
name:'Hello 框架',
tit:{
name:'Vue',
url:'https://www.bilibili.com'
}
}
});
07_事件處理-@click-@keyup
1.事件處理基本使用
事件的基本使用： 1.使用v-on:xxx 或 @xxx 繫結事件，其中xxx是事件名； 2.事件的回撥需要配置在methods物件中，最終會在vm上 3.methods中配置的函式，不需要箭頭函式，否則this就不是vm了； 4.methods中配置的函式，都是被vue所管理的函式，this指向的是vm 或者 元件例項物件； 5.@click="demo" 和 @click="($event)"效果一致，但後者可以傳參 ============================================================================== <div id="root"> <button v-on:click="fn1()">點我提示資訊1（不傳參）</button> <button v-on:click="fn2($event,66)">點我提示資訊2（傳參）</button> </div> ============================================================================== methods:{ fn1(event){ }, fn2(event,number) { console.log(event,number) //console.log(event.target.innerText) //console.log(this)//此處的this是vm alert('同學你好'); } }
2.事件修飾符
Vue中的事件修飾
1. prevent : 阻止事件的預設行為 event.preventDefault() 常用
2. stop : 停止事件冒泡 event.stopPropagation() 常用
3. once : 事件只觸發一次（常用）
==============================================================================
<!--阻止預設事件-->
<a href="http://www.baidu.com" @click.prevent="showInfo">點選我提示資訊</a>
<!--阻止冒泡事件-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo()">點選我提示資訊</button>
</div>
<!--事件只觸發一次（常用）-->
<button @click.once="showInfo">點選我提示資訊</button>
==============================================================================
methods:{
showInfo(e){
// e.preventDefault();//阻止預設事件
// e.stopPropagation();//阻止冒泡
//e.onceProcessed(); //事件只觸發一次
alert('同學你好');
}
}
3.鍵盤事件
<!-- 鍵盤事件
1. keyup : 鍵盤彈起
2. keydown : 按下鍵盤
-->
08_計算屬性- computed
1.姓名案例—用methods實現
因為methods沒有快取，所以只能反覆呼叫,不建議使用這種方式
2.姓名案例—用計算屬性去實現
一、計算屬性:
1.定義:要用的屬性不存在，要通過已有屬性計算得來。
2.原理:底層藉助了Objcet.defineproperty方法提供的getter和setter.
3. get函式什麼時候執行?
(1).初次讀取時會執行一次。
(2).當依賴的資料發生改變時會被再次呼叫。
4.優勢:與methods實現相比， 內部有快取機制(複用)，效爺更高，除錯方便。
5.備註:
(1).計算屬性最終會出現在vm上，直接讀取使用即可。
(2).如果計算屬性要被修改，那必須寫set函式去響應修改，且set中 要引起計算時依賴的資料發生改變
<!--準備好一個容器-->
<div id="root">
姓:<input type="text" v-model="firstName"><br/>
名:<input type="text" v-model="lastName"><br/>
測試:<input type="text" v-model="x"><br/>
全名:<span>{{fullName}}</span><br/> <!--這裡get只調用了1次，因為computed有快取，所以直接就給其他呼叫的賦值了-->
全名:<span>{{fullName}}</span><br/>
全名:<span>{{fullName}}</span><br/>
全名:<span>{{fullName}}</span>
</div>
const vm = new Vue({
el:'#root',
data:{
firstName:'唐',
lastName:'九',
x:'你好'
},
computed:{//計算屬性
fullName:{
//1.get有什麼用？當有人在讀取fullName時，get就會被呼叫，且返回值就作為，fullName的值
//2.get什麼是被呼叫？1.有人初次使用fullName的時候。2.fullName依賴資料發生改變的時候。
get(){
console.log('get被呼叫')
//console.log(this);//此處的this是vm
return this.firstName+'-'+this.lastName
},
//set什麼是被呼叫？ 當fullName被修改時
set(value){
console.log('set',value)
let split = value.split('-');
this.firstName=split[0];
this.lastName=split[1]
}
}
3.data，methods，computed
二、data，methods，computed
data裡面的屬性，你寫什麼value,就是什麼屬性放在vm上
methods裡面的方法，你寫什麼方法，就是什麼方法放在vm上
computed裡面，寫的計算屬性，他不是你寫什麼，vm上就放什麼，
而是vm自動去找get的計算結果（返回值），放在vm身上了，
vm裡面，放的計算結果的名字叫xxx
09_監視屬性-watch
1.天氣案例-監視屬性
<!--準備好一個容器-->
<div id="root">
<h2 >今天天氣很{{info}}</h2>
<button @click="btn">切換天氣</button>
</div>
const vm = new Vue ({
el:'#root',
//新增屬性,資料
data:{
isHot:true,
},
//計算屬性
computed:{
info(){
return this.isHot?'炎熱':'涼爽';
}
},
//方法，函式
methods:{
btn(){
this.isHot= !this.isHot;
}
},
//監視屬性
watch:{
info:{
//handler 什麼時候被呼叫？isHot發生改變的時候
handler(newValue,oldValue){
console.log("isHot 被修改了",newValue,oldValue)
},
//立即執行，函式
immediate:true, //初始化時，讓handler，呼叫一下
}
}
})
2.天氣案例-深度監視
深度監視：
（1）vue中的watch預設不檢測物件內部值的改變（一層）。
（2）配置deep.true 可以監測物件內部值改變（多層）。
備註：
（1）vue自身可以監視物件內部值的改變，但是vue提供的watch預設不可以
（2）使用時watch根據資料的具體結構，決定是否採用深度監視。
==============================================================================
<!--準備好一個容器-->
<div id="root">
<h2 >a的值是:{{numbers.a}}</h2>
<button @click="numbers.a++">點我a+1</button>
</div>
==============================================================================
const vm = new Vue ({
el:'#root',
//新增屬性,資料
data:{
numbers:{
a:1,
b:1,
}
},
//監視屬性：一般預設，不提供多級化機構的監控
watch:{
info:{
//handler 什麼時候被呼叫？isHot發生改變的時候
handler(newValue,oldValue){
console.log("isHot 被修改了",newValue,oldValue)
},
//立即執行，函式
immediate:true, //初始化時，讓handler，呼叫一下
},
numbers:{
//深度監視，監視多級化結構中所有屬性變化
deep:true,
handler() {
console.log("number改變了")
}
}
}
})
10_繫結樣式-:class
繫結樣式
<!--準備好一個容器-->
<div id="root" >
<!--繫結class樣式--字串寫法，適用於：樣式的類名不確定，需要動態指定 -->
<div class="basic" :class="mood" @click="btn">{{name}}</div><br>
<!--繫結class樣式--陣列寫法，適用於：要繫結的樣式個數不確定，名字也不確定 -->
<div class="basic" :class="classArr">{{name}}</div><br>
<!--繫結class樣式--物件寫法，適用於：要繫結的樣式個數確定，名字也確定，但要動態決定用不用 -->
<div class="basic" :class="classObj">{{name}}
</div>
==============================================================================
new Vue({
el:'#root',
data:{
name:'肉肉',
//字串
mood:'normal',
//陣列
classArr:['atguigu1','atguigu2','atguigu3'],
//物件
classObj:{
atguigu1:false,
atguigu2:false,
}
}
==============================================================================
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
.sad{
background-color: #D9AFD9;
background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
}
.normal{
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}
.atguigu1{
}
.atguigu2{
border-radius: 15px 50px 30px 5px
}
.atguigu3{
background-color: cornflowerblue;
}
</style>
11_條件渲染-v-show : v-if
條件渲染
1.使用v-show，做條件渲染
<h2 v-show="false">歡迎來到{{name}}</h2>
<h2 v-show="1===1">歡迎來到{{name}}</h2>
2.使用v-if做條件渲染
<h2 v-if="1===1">歡迎來到{{name}}</h2>
<h2 v-if="false">歡迎來到{{name}}</h2>
v-show不安全，在網頁原始碼，可以看見，v-if看不見，所以安全！
但是頻繁切換，最好使用show
頻率低的用v-if
==============================================================================
<!--準備好一個容器-->
<div id="root">
<h2 >當前n值是{{n}}</h2>
<button @click="n++">點選+n</button>
<!--
<div v-show="n===1">Angular</div>
<div v-show="n===2">React</div>
<div v-show="n===3">Vue</div>
-->
<!-- v-else和v-else-if-->
<div v-if="n===1">Angular</div>
<div v-else-if="n===2">React</div>
<div v-else-if="n===3">Vue</div>
<div v-else>哈哈哈</div>
</div>
來源：3309064415