當前位置：首頁 > 前端技术 > vue >内容正文

vue

前端学习笔记之-VUE框架学习-Vue核心

發布時間：2024/4/15 vue 49 豆豆

生活随笔收集整理的這篇文章主要介紹了前端学习笔记之-VUE框架学习-Vue核心小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第一章：Vue核心

1.1.Vue簡介

官網介紹：https://cn.vuejs.org/v2/guide/

1.2.初識Vue

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTG-8" /><title>初始vue</title><script type="text/javascript" src="../js/vue.js"></script> </head> <body><div id="my"><h1>hello 小付</h1></div><div id="my01"><h1>hello {{name}}</h1><h1>他的年齡是：{{age}} </h1><h1>{{money+12}}</h1></div><script type="text/javascript">// 創建vue實列const x = new Vue({//el:document.getElementById("my");el:'#my01',//el：用于當前vue實列用于那個容器，值通常為css選擇器字符串//data 中用于存儲數據，用于el指定的容器去使用，值我們暫時先寫成一個對象data:{name:'小花',age:18,money:12}});</script> </body> </html>

總結：
1.想讓Vue工作，就必須創建一個Vue實例，且要傳入一個配置對象;
2.my容器里的代碼依然符合html規范，只不過混入了一些特殊的Vue語法;
3.my容器里的代碼被稱為【Vue模板】;
4.Vue實例和容器是一一對應的;
5.真實開發中只有一個Vue實例,并且會配合著組件一起使用;
6.{{xxx}}中的xxx要寫js表達式，且xxx可以自動讀取到data中的所有屬性;
7.一旦data中的數據發生改變，那么模板中用到該數據的地方也會自動更新;

注意區分:js表達式和js代碼(語句)

1.表達式:一個表達式會產生一個值，可以放在任何一個需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’: "b’

2.js代碼(語句)
(1).if(){}
(2). for(){}

1.3. 模板語法

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>模板語法</title><script type="text/javascript" src="../js/vue.js"></script> </head> <body><div id="my"><h1>插值語法，用于解析標簽體內容</h1><h2>你好：{{name}}</h2><h2>歡迎就讀：{{school.name}}</h2><hr/><h1>指令語法，用于解析標簽（包括:標簽屬性、標簽體內容、綁定事件.....）</h1><a v-bind:href="url">點我百度一下</a><a :href="url.toUpperCase()">點我百度一下2</a></div><script type="text/javascript">new Vue({el:'#my',data:{name:"小付",url:"https://www.baidu.com/",school:{name:"家里蹲大學"}}});</script> </body> </html>

總結：
Vue模板語法有2大類:

1.插值語法:功能:用于解析標簽體內容。寫法:{{xxx}}，xxx是js表達式，且可以直接讀取到data中的所有屬性。2.指令語法:功能:用于解析標簽（包括:標簽屬性、標簽體內容、綁定事件.....）。舉例: v-bind:href="xxx”或簡寫為:href="xxx"，xxx同樣要寫js表達式，且可以直接讀取到data中的所有屬性。備注: Vue中有很多的指令，且形式都是: v-????，此處我們只是拿v-bind舉個例子。

1.4.數據綁定

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>數據綁定</title><script type="text/javascript" src="../js/vue.js"></script> </head> <body><div id="my">單向數據綁定：<input type="text" :value="name"><hr/>雙向數據綁定：<input type="text" v-model="age"><h2 v-model:x = "name">你好呀</h2></div> </body> <script type="text/javascript">new Vue({el:'#my',data:{name:"小付",age:18}}); </script> </html>

Vue中有2種數據綁定的方式:

1.單向綁定(v-bind):數據只能從data流向頁面。 2.雙向綁定(v-model):數據不僅能從data流向頁面，還可以從頁面流向data.備注:1.雙向綁定一般都應用在表單類元素上（如:input、 select等)2.v-model:value可以簡寫為v-model，因為v-model默認收集的就是value值。

1.4.1 el與data的兩種寫法(組件的知識提前學習)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>el與data的兩種寫法 </title><script type="text/javascript" src="../js/vue.js"></script> </head> <body><div id="my"><h1>你好：{{name}}</h1></div> </body> <script type="text/javascript">// el 的寫法 /* const v = new Vue({// el:'#my', 第一種寫法data:{name:"小付"}});console.log(v);//等3秒鐘在去綁定mysetTimeout(()=>{v.$mount('#my'); //第二種寫法，意思就是將當前的vue對象掛載在 my這個容器},3000);*///data 的寫法const v = new Vue({el:'#my',// data:{// name:"小付" //第一種寫法// }//data 的第二種寫法：函數式//data:function(){//data函數必須是function 不能是=>()函數，否則this就是Windowsdata(){//簡寫console.log(this);//此處的this是Vue的實列return{name:'小付'}}});</script> </html>

data 與el的2種寫法

1.el有2種寫法(1).new Vue時候配置el屬性。(2).先創建Vue實例，隨后再通過vm. $mount( ' #root ')指定el的值。 2.data有2種寫法(1).對象式(2).函數式如何選擇:目前哪種寫法都可以，以后學習到組件時，data必須使用函數式，否則會報錯. 3.一個重要的原則:由Vue管理的函數，一定不要寫箭頭函數，一旦寫了箭頭函數，this就不再是Vue實例了。

1.5.MVVM模型

1.M:模型(Model) :對應data中的數據
2.V:視圖(View)︰模板
3.VM:視圖模型(ViewModel) : Vue實例對象

MVVM模型總結
1.M:模型(Model) : data中的數據
2.V:視圖(View) :模板代碼
3. VM:視圖模型(ViewModel): Vue實例
觀察發現:
1.data中所有的屬性,最后都出現在了vm身上。
2.vm身上所有的屬性及Vue原型上所有屬性，在Vue模板中都可以直接使用。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>mvvm</title><script type="text/javascript" src="../js/vue.js"></script> </head> <body><div id="my01"><h1>hello {{name}}</h1><h1>他的年齡是：{{age}} </h1><h1>{{money+12}}</h1><h1>vm中的屬性:{{$options}}</h1></div><script type="text/javascript">// 創建vue實列const vm = new Vue({el:'#my01',data:{name:'小花',age:18,money:12}});// 打印下vmconsole.log(vm);</script> </body> </html>

1.6 數據代理

1.6.1回顧Object.defineProperty方法

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>回顧Object.defineProperty方法</title> </head> <body><script type="text/javascript">let number = 100;let persion = {name:'張三',sex:'男',} //這樣的方式添加的屬性不可枚舉，就是Object.keys（）獲取不到這個age屬性，而且不可遍歷獲取//但是添加 enumerable:true 就可以了Object.defineProperty(persion,'age',{value:18,enumerable:true, //控制屬性是否可以枚舉，默認值是falsewritable:true, //控制屬性是否可以被修改,默認值是falseconfigurable:true,//控制屬性是否可以被刪除});//當有人讀取person的money屬性時，get函數(getter)就會被調用，且返回值就是money的值Object.defineProperty(persion,'money',{get:function getMoney(){console.log('getMoney被調用了')return number},//簡寫 /* get(){console.log('getMoney被調用了')return number} *///當有人修改person的money屬性時，get函數(getter)就會被調用，且會收到修改的具體值set(value){console.log('有人修改了money的值，且值是',value)number = value}})console.log(persion)console.log(Object.keys(persion))</script></body> </html>

1.6.2何為數據代理

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>何為數據代理</title> </head> <body><script type="text/javascript">let obj = {x:100}let obj2 = {y:200}//通過obj2來操作xObject.defineProperty(obj2,'x',{get(){return obj.x},set(value){obj.x = value}})</script> </body> </html>

1.6.3 Vue如何數據代理

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../vue.js"></script> </head><body><div id="my"><h1>學校名稱：{{name}}</h1><h1>學校地址：{{address}}</h1></div></body> <script type="text/javascript">const vm = new Vue({el: '#my',data: {name: "家里蹲大學",address:"重慶巴南"}})console.log(vm) </script></html>

圖示數據代理：

總結：
1.Vue中的數據代理;

通過vm對象來代理data對象中屬性的操作(讀/寫)

2.Vue中數據代理的好處:

更加方便的操作data中的數據

3.基本原理:

通過object.defineProperty()把data對象中所有屬性添加到vm上.為每一個添加到vm上的屬性，都指定一個getter/setter。在getter/setter內部去操作（讀/寫）data中對應的屬性。

1.6.事件處理

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../vue.js"></script> </head><body><div id="my"><h2>歡迎來找{{name}}玩兒</h2><button v-on:click="show">點我提示信息(不傳參)</button><button @click="show">點我提示信息2（不傳參）</button><button @click="show3(66,$event)">點我提示信息3（傳參）</button></div></body> <script type="text/javascript">const vm = new Vue({el: '#my',data: {name: "小付",address: "重慶巴南"},methods: {show(event) {alert('好開心啊')console.log(event.target.innerText)console.log(this === vm) //此處的this就是vm},show3(number, event) {alert('好開心啊3')console.log(event.target.innerText)console.log(number, event)},}})console.log(vm) </script></html>

總結：
事件的基本使用:

1.使用v-on:xxx或@xxx綁定事件,其中xxx是事件名; 2.事件的回調需要配置在methods對象中，最終會在vm 上; 3.methods中配置的函數，不要用箭頭函數!否則this就不是vm了; 4.methods中配置的函數，都是被Vue所管理的函數，this的指向是vm或組件實例對象 5.@click="demo”和@click="demo($event)”效果一致，但后者可以傳參;

1.6.2 事件修飾符

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>mvvm</title><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}#one{height: 50px;background: aquamarine;}#two{height: 50px;background: forestgreen;}.box1{padding: 5px;background: bisque;}.box2{padding: 5px;background: fuchsia;}.list{width: 200px;height: 200px;background: crimson;overflow: auto;}li{height: 100px;}</style> </head>  <body>  <div id="my01"><h1>hello {{name}}</h1> <a href="https://www.baidu.com/" @click.prevent="show">點我提示信息</a><div id="one" @click="show"><button @click.stop="show">點我提示信息2</button></div><button @click.once="show">點我提示信息3</button><div class="box1" @click.capture="show2(1)">div1<div class="box2" @click="show2(2)">div2</div></div><div id="two" @click.self="showTwo"><button @click="showTwo">點我提示信息3</button></div><ul @scroll="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul @wheel.passive="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul> </div><script type="text/javascript">// 創建vue實列const vm = new Vue({el:'#my01',data:{name:'小花'},methods:{show(e){alert('你好呀')},show2(msg){console.log(msg)},showTwo(e){console.log(e.target)},demo(e){console.log('demo')for (let i = 0; i <100000; i++) {console.log("#")}console.log("累壞了")},}});console.log(vm); </script> </body> </html>

總結
Vue的事件修飾符:

1.prevent: 阻止默認事件（常用）; 2.stop:阻止事件冒泡（常用）; 3.once:事件只觸發一次（常用）; 4.captnre:使用事什的捕獲模式; 5.self:只有event.target是當前操作的元素時候才觸發事件: 6.passive:事件的默認行為立即執行，無需等待事件回調執行完畢;

1.6.3 鍵盤事件

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>mvvm</title><script type="text/javascript" src="../js/vue.js"></script> </head><body>  <div id="my01"><h1>hello {{name}}</h1> <input type="text" placeholder="按下回車提示輸入" @keyup.enter="show"><input type="text" placeholder="按下回車提示輸入" @keydown.tab="show"></div><script type="text/javascript">// 創建vue實列const vm = new Vue({el:'#my01',data:{name:'小花'},methods: {show(e) {//判斷是否按下回車回車的keycode為13 js編碼// if (e.keyCode!==13) returnconsole.log(e.target.value)console.log(e.key,e.keyCode)},}});console.log(vm); </script> </body> </html>

1.Vue中常用的按鍵別名;

回車 =>enter 刪除=>delete(捕獲刪除”和“退格”鍵) 退出=>esc 空格=>space 換行=>tab (特殊必須配合keydown去使用) 上=>up 下=> down 左=> left 右=> right

2.Vue未提供別名的按鍵，可以使用按健原始的key值去綁定，但注意要轉為kebab-case（短橫線命名)

3.系統修飾鍵（用法特殊): ctr1、alt、shift、meta
(1).配合keyup使用:按下修飾鍵的同時，再按下其他鍵，隨后釋放其他鍵，事件才被觸發。
(2).配合keydown使用:正常觸發事件。
4.也可以使用keyCode去指定具體的按鍵（不推薦)
5.Vue.config.keyCodes.自定義鍵名=鍵碼，可以去定制按鍵別名

1.7.計算屬性與監視

1.8. class與style綁定

1.9.條件渲染

1.10.列表渲染

1.11.收集表單數據

1.12.Vue實例生命周期

1.13.過渡&動畫

1.14.過濾器

1.15.內置指令與自定義指令

1.16.自定義插件

總結

以上是生活随笔為你收集整理的前端学习笔记之-VUE框架学习-Vue核心的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：学习笔记之-java8的新特性-函数式接
下一篇： Vue学习路线图！