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

vue

Vue快速入门笔记（一）

發布時間：2024/7/19 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue快速入门笔记（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- - - - 一、Vue基礎
      - 1、第一個Vue程序
        2、el：掛載點
        3、data：數據對象
      - 二、模板語法
      - 1、v-once
        2、v-html
        3、v-bind
        4、v-text
        5、v-on
      - 三、計算屬性和偵聽器
      - 1、計算屬性
        2、偵聽器
      - 四、Class與Style綁定
      - 1、綁定HTML Class
        2、綁定內聯樣式
      - 五、條件渲染
      - 1、v-if
        2、v-else
        3、v-else-if
        4、v-show
        v-if與v-show的區別
      - 六、列表渲染
      - 1、v-for
      - 七、表單輸入綁定
      - 1、v-model
      - 八、組件基礎
      - 1、基本示例
        2、通過 Prop 向子組件傳遞數據
      - 九、網絡應用
      - 1、axios
        2、axios+vue

一、Vue基礎

1、第一個Vue程序

來自官方文檔
引入Vue

聲明式渲染

<div id="app">{{ message }} </div> var app = new Vue({el: '#app',data: {message: 'Hello Vue!'} })

2、el：掛載點

Vue實例的作用范圍
Vue會管理el選項命中的元素及其內部的后代元素

是否可以使用其他的選擇器
可以使用其他的選擇器，但是建議使用ID選擇器

是否可以設置其他的dom元素
可以使用其他的雙標簽，不能使用HTML和body

3、data：數據對象

Vue中用到的數據定義在data中
data中可以寫復雜類型的數據
渲染復雜類型數據時，遵守js的語法即可

<body><div id="app">{{ message }}<h2>{{school.name}}{{school.mobile}}</h2><ul><li>{{campus[0]}}</li><li>{{campus[1]}}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!',school:{name:"江西師范大學",mobile:"123-321-9000"},campus:["瑤湖校區","青山湖校區"]}})</script> </body>

二、模板語法

1、v-once

使用 v-once 指令，能執行一次性地插值，當數據改變時，插值處的內容不會更新

2、v-html

v-html指令的作用是設置元素的innerHTML
內容中有html結構會被解析為標簽
v-text指令無論內容是什么，只會解析為文本
解析文本使用v-text，需要解析html結構使用v-html

<body><div id="app"><h1>{{ message }}</h1><h1 v-once>{{ message }}</h1><p>{{ rawHtml }}</p><p><span v-html="rawHtml"></span></p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!',rawHtml:'<span v-html="rawHtml">hello</span>'}})</script> </body>

3、v-bind

v-bind指令的作用是為元素綁定屬性
完整寫法是v-bind:屬性名
簡寫的話可以直接省略v-bind，只保留:屬性名
需要動態的增刪class建議使用對象的方式

<body><div id="app"><br><img :src="imgSrc" style="width: 10em;" alt="" :title="imgTitle + '!!!'":class="{active:isActive}" @click="toggleActive"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {imgSrc:"img/1.jpg",imgTitle:"哈哈哈哈哈",isActive:false},methods: {toggleActive:function(){this.isActive = !this.isActive;}},})</script> </body>

4、v-text

v-text指令的作用是設置標簽的內容
默認寫法會替換全部內容，使用插值表達式{{}}可以替換指定內容
內部支持表達式

<body><div id="app"><h2 v-text="message + '!'">test</h2><h2 v-text="info + '!'">test</h2><h2>{{message + '!'}}test</h2></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>var app = new Vue({el:"#app",data:{message:"hello",info:"This is v-text"}}) </script> </body>

5、v-on

v-on指令的作用是為元素綁定事件
事件名不需要寫on
指令可以簡寫為@
綁定的方法定義在methods屬性中
方法內部通過this關鍵字可以訪問定義在data中的數據
事件綁定的方法寫成函數調用的形式，可以傳入自定義參數
定義方法時需要定義形參來接收傳入的實參
事件的后面跟上.修飾符可以對事件進行限制
.enter可以限制觸發的按鍵為回車
事件的修飾符有多種

事件修飾符
.stop
.prevent
.capture
.self
.once
.passive

<a v-on:click.stop="doThis"></a> <form v-on:submit.prevent="onSubmit"></form> <a v-on:click.stop.prevent="doThat"></a> <form v-on:submit.prevent></form>  <div v-on:click.capture="doThis">...</div>  <div v-on:click.self="doThat">...</div> <a v-on:click.once="doThis"></a>   <div v-on:scroll.passive="onScroll">...</div>

注意：使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

按鍵修飾符

<input v-on:keyup.enter="submit"> <input v-on:keyup.page-down="onPageDown">

按鍵碼
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

系統修飾鍵
可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。
.ctrl
.alt
.shift
.meta

.exact修飾符
.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。

<button v-on:click.ctrl="onClick">A</button> <button v-on:click.ctrl.exact="onCtrlClick">A</button> <button v-on:click.exact="onClick">A</button> <body><div id="app"><input type="button" value="v-on指令" v-on:click="doTest"><input type="button" value="v-on簡寫" @click="doTest"><input type="button" value="雙擊事件" @dblclick="doTest"><h2 @click="changeFood">{{food}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data:{food:"西瓜"},methods: {doTest:function(){alert("v-on指令");},changeFood:function(){this.food += "好好吃！"}},})</script> </body>

三、計算屬性和偵聽器

1、計算屬性

計算屬性會將計算的結果進行緩存

<body><div id="example"><p>{{ message }}</p><p>{{ reversedMessage }}</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// 計算屬性的 getterreversedMessage: function () {// `this` 指向 vm 實例,會將計算的結果進行緩存return this.message.split('').reverse().join('')}}})</script> </body>

2、偵聽器

Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。

<body><div id="app">{{ message }}<ul><li v-for="item in arr">{{item}}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!',arr:['小明','小紅','小軍']},computed: {},watch: {message:function(val){console.log("監聽事件~~~~~~~");console.log(val);},arr:function(val){console.log(val);}},})</script> </body>

四、Class與Style綁定

1、綁定HTML Class

<body><div id="app"><div class="static" :class="{ active: isActive}"></div><div v-bind:class="classObject"></div><div v-bind:class="[activeClass, errorClass]"></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {isActive: true,classObject:{active:true},activeClass: 'active',errorClass: 'text-danger'}})</script> </body>

2、綁定內聯樣式

五、條件渲染

1、v-if

v-if指令的作用是根據表達式的真假切換元素的顯示狀態,本質是通過操縱dom元素來切換顯示狀態
表達式的值為true，元素存在于dom樹中，為false，從dom移除

2、v-else

可以使用 v-else 指令來表示 v-if 的"else 塊"
v-else-if

3、v-else-if

顧名思義，充當 v-if 的"else-if 塊"，可以連續使用
注意
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。

<body><div id="app"><input type="button" value="切換顯示" @click="toggleIsShow"><input type="button" value="切換選項顯示" @click="ABIsShow"><h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no 😢</h1><br/><h3 v-if="type === 'A'">A</h3><h3 v-else-if="type === 'B'">B</h3></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data:{awesome:true,type:'A',},methods: {toggleIsShow:function(){this.awesome = !this.awesome;},ABIsShow:function(){this.type = (this.type == 'A') ? 'B': 'A'}},})</script> </body>

4、v-show

v-show指令的作用是根據真假切換元素的顯示狀態
原理是修改元素的display，實現顯示隱藏
指令后面的內容，最終都會解析為布爾值。值為true元素顯示，值為false元素隱藏
數據改變之后，對應元素的顯示狀態會同步更新
注意
帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS property display。

<body><div id="app"><input type="button" value="切換顯示狀態" @click="changeIsShow"><input type="button" value="切換圖片" @click="changeImg"><img v-show="isShow" :src="imgUrl" alt=""></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{isShow:false,imgUrl:"img/1.jpg"},methods: {changeIsShow:function(){this.isShow = !this.isShow},changeImg:function(){if(this.imgUrl == "img/1.jpg")this.imgUrl = "img/2.jpg"elsethis.imgUrl = "img/1.jpg"}},})</script> </body>

v-if與v-show的區別

v-if:不顯示時，第一次就直接不渲染，如果內容已經顯示將其改為不顯示，將內容直接從dom去除 v-show:不顯示時，就會改為display:none，但是會渲染在dom上頻繁的切換v-show，反之使用v-if，前者的切換消耗小

六、列表渲染

1、v-for

v-for指令的作用是根據數據生成列表結構
數組經常和v-for結合使用
語法是(item,index) in 數據
item 和 index 可以結合其他指令一起使用
數組長度的更新會同步到頁面上，是響應式的

<body><div id="app"><ul><li v-for="(it,index) in arr">{{ index + 1}}城市:{{ it }}</li></ul><h2 v-for="item in vegetables" v-bind:title="item.name">{{ item.name }}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {arr:["北京","上海","深圳"],vegetables:[{name:"番茄"},{name:"西紅柿"}]}})</script> </body>

七、表單輸入綁定

1、v-model

v-model指令的作用是便捷的設置和獲取表單元素的值
綁定的數據會和表單元素值相關聯
綁定的數據<–>表單元素的值

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單輸入綁定</title> </head> <body><div id="app"><input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p><br><textarea v-model="messages" placeholder="多行文本"></textarea><br><span>Multiline message is:</span><p style="white-space: pre-line;">{{ messages }}</p><br><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label><br><br><input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><br><span>Checked names: {{ checkedNames }}</span><br><br><div id="example-4"><input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><br><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><br><span>Picked: {{ picked }}</span></div><div id="example-5"><select v-model="selected"><option disabled value="">請選擇</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span></div><br><br></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {message: 'Tsundere',messages: 'tsundere',checked: false,checkedNames:[],selected: '',picked: '',selecteds:[]},})</script> </body> </html>

八、組件基礎

1、基本示例

// 定義一個名為 button-counter 的新組件 Vue.component('button-counter', {data: function () {return {count: 0}},template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })

組件是可復用的 Vue 實例，且帶有一個名字：在這個例子中是。我們可以在一個通過 new Vue 創建的 Vue 根實例中，把這個組件作為自定義元素來使用：

<div id="components-demo"><button-counter></button-counter> </div> new Vue({ el: '#components-demo' })

注意：data必須是一個函數

2、通過 Prop 向子組件傳遞數據

注意：每個組件必須只有一個根元素

<body><div id="components-demo"><button-counter></button-counter></div><hr><div id="blog-post-demo"><blog-post v-for="post in posts" :key="post.id" :title="post.title" ></blog-post></div><hr><div id="post"><div :style="{ fontSize: postFontSize + 'em' }"><blog v-for="post in posts" :post="post" v-on:enlarge-text="postFontSize += $event"></blog></div></div> <hr><div id="text"><custom-input v-model="searchText"></custom-input><p>{{searchText}}</p></div><hr><div id="alert"><alert-box></alert-box></div><hr><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>// 定義一個名為 button-counter 的新組件Vue.component('button-counter', {data: function () {return {count: 0}},template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})new Vue({el: '#components-demo'})// 定義一個名為blog-post的組件Vue.component('blog-post', {props: ['title'],template: '<h3>{{ title }}</h3>'})new Vue({el: '#blog-post-demo',data:{posts: [{ id: 1, title: 'My journey with Vue' },{ id: 2, title: 'Blogging with Vue' },{ id: 3, title: 'Why Vue is so fun' }]}})// 定義一個名為post的組件// 子組件可以通過調用內建的 $emit 方法并傳入事件名稱來觸發一個事件：Vue.component('blog',{props:['post'],template:'<div class="blog-post">\<p>{{ post.title }}</p>\<button v-on:click="$emit(\'enlarge-text\',0.1)">\Enlarge text\</button>\<div v-html="post.content"></div>\</div>'})new Vue({el:"#post",data:{posts:[{ id: 1, title: 'My journey with Vue',content:'123' },{ id: 2, title: 'Blogging with Vue' ,content:'456' },{ id: 3, title: 'Why Vue is so fun',content:'789' }],postFontSize:1}})Vue.component('custom-input', {props: ['value'],template: `<input:value="value"@input="$emit('input', $event.target.value)">`})new Vue({el:"#text",data:{searchText:''}})Vue.component('alert-box', {template: `<div class="demo-alert-box"><strong>Error!</strong><slot></slot></div>`})new Vue({el:"#alert"})</script> </body>

九、網絡應用

1、axios

axios必須先導入才可以使用
使用get或post方法即可發送對應的請求
then方法中的回調函數會在請求成功或失敗時觸發
通過回調函數的形參可以獲取響應內容，或錯誤信息

官網地址：https://github.com/axios/axios

2、axios+vue

axios回調函數中的this已經改變，無法訪問到data中數據
把this保存起來，回調函數中直接使用保存的this即可

總結

以上是生活随笔為你收集整理的Vue快速入门笔记（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：【计算机网络复习数据链路层】3.5.1
下一篇： html5倒计时秒杀怎么做,vue 设