溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“Vue新手入門實例分析”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
1. Vue實例和模板語法
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello,word!'
},
methods:{
},
})
</script>
</body>el
Vue 語法與 JavaScript 一樣寫在 script 中，通 過 id 選擇器綁定 DOM，在 Vue 中，只需要在 el 中對 DOM 的 id 進行掛載，可以簡單的理解為鉤子，el 通過 id="app"的特征鉤住了<div> 中的所有內容，這樣我們就可以在 Vue 中實現對 DOM 中的操作。
data
Vue 中的 data 用于聲明我們所要使用的數據，這樣操作有利于我們在維護或者操作文檔的時候能夠更容易的清晰某一板塊所需要修改的數據，并且不需要直接對 DOM 進行操作，此時的數據與 DOM 是雙向綁定的，當我們對 data 中所聲明的數據進行修改時，DOM 中同時也會發生響應式的變化。
methods
Methods 中包含的是我們對這個頁面的整個邏輯以及頁面中的觸發事件，其中的內容相當于 JavaScript 中的 function 內容
在 Vue 中有許多內置指令，通過這些指令替換 JavaScript 中對文檔的以及事件的操作。
v-html
v-html:將數據以 html 標簽形式更新
<!DOCTYPE><html><head> <meta charset="UTF-8"> <title>w3cschool</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="app"> <p>{{website}}</p> <p v-html="message">{{website}}</p> </div><script> new Vue({ el:'#app',
data:{ website:'Vue，js', message:'<h2>hello,word!</h2>' }, methods:{ }, })</script></body></html>可以發現，第二個<p>標簽中所綁定的 Vue.js 被 hello，word！所更新，并且在聲明的 message 中'<h2>hello,word!<\h2>'通過 html 標簽更新了其中的內容，看到的這是一個一級標題的 hello，word！。
v-text
<!DOCTYPE><html><head> <meta charset="UTF-8"> <title>w3cschool</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="app"> <p>{{website}}</p> <p v-text="message">{{website}}</p> </div><script> new Vue({ el:'#app',
data:{ website:'Vue,js', message:'<h2>hello,word!</h2>' }, methods:{ }, })</script></body></html>通過 v-txet 指令，盡管仍然替換掉了<p>標簽中的內容，但是僅僅是通過字符串的形式顯示了出來，而不是像 html 一樣通過 html 標簽的形式顯示。
v-cloak
代碼加載的時候先加載 HTML，把插值語法當做 HTML 內容加載到頁面上，當加載完 js 后才把插值語法替換掉，所以我們會看到閃爍問題，而 v-clock 可以解決這個問題。
<div v-cloak>{{msg}}</div>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>v-once
v-once 指令只渲染元素和組件一次，隨后的渲染，使用了此指令的元素、組件及其所有的子節點，都會當作靜態內容并跳過，這個可以用于優化更新性能。<!DOCTYPE><html><head> <meta charset="UTF-8"> <title>w3cschool</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="app"> <p v-once>can not change:{{website}}</p> <p>change: {{website}}</p> <p ><input type="text" v-model = "website"></p> </div><script> new Vue({ el:'#app',
data:{ website:"hello" }, methods:{ }, })</script></body></html>v-on
對于 Vue 的事件綁定使用內置的 v-on 指令來完成，以及傳遞參數。
<!DOCTYPE><html><head> <meta charset="UTF-8"> <title>w3cschool</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="app"> <input type="button" value="單擊事件" v-on:click="alert"> </div><script> new Vue({ el:'#app',
data:{ }, methods:{ alert:function() { alert('觸發了點擊事件'); }
}, })</script></body></html>在 v-on:click 點擊事件后面添加了命名為 alert 的方法，在此之前我試過直接使用v-on:click="alert('觸發了點擊事件')"，但是點擊之后控制臺報錯，不知道有沒有大神明白為什么會這個樣子。
使用 v-on 指令時，不僅僅可以觸發點擊事件，譬如雙擊事件以及鍵盤敲擊事件等等，只需要修改 v-on:click or(mousedown、mouseup等)，同時我們可以將 v-on:click 簡寫為 @click，觸發事件的方法必須寫在 methods 中。
v-if
v-if、v-show 可以實現條件渲染，Vue 會根據表達式值的真假條件來渲染元素。還有可以與 v-if 搭配的 v-else、v-else-if 指令，類似與 JavaScript 中的 if-else。
簡單來說，v-if相當于 JavaScript 中我們對 DOM 的條件操作，根據表達值的真假，從而對 DOM 進行有條件的操作，讓我們來看看是如何操作的把。
<!DOCTYPE><html><head> <meta charset="UTF-8"> <title>w3cschool</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="app"> <input type="button" value="切換" @click="go"> <p v-if="jump">我跳出來拉</p> </div><script> new Vue({ el:'#app',
data:{ jump:false }, methods:{ go:function(){ this.jump=!this.jump; } }, })</script></body></html>注意，v-if 的默認布爾值為 false，并且 v-if 是直接對 DOM 的操作，而隨后的 v-show 是對樣式的操作。
v-show
v-show用法與v-if大致一樣，不同的是帶有 v-show 的元素始終會被渲染并且保留在 DOM中，v-show只是簡單地切換元素的 CSS 屬性 display，當模板屬性為 true 的時候，控制臺顯示為display:block；屬性值為 false 的時候，控制臺顯示display:none。
v-show不支持<tempalte>語法,也不支持 v-else。
<body>
<div id="app">
<input type="button" value="切換" @click="go">
<p v-show="jump">我跳出來拉</p>
</div>
<script>
new Vue({
el:'#app',
data:{
jump:false
},
methods:{
go:function(){
this.jump=!this.jump;
}
},
})
</script>
</body>v-show與v-if的區別
都是根據表達式的真假判斷元素顯示與隱藏
v-if只有在條件為真時，才對元素進行渲染，v-show無論初始條件為何，元素總會被渲染。
v-show初始開銷更高，v-if的切換開銷更高
頻繁切換時用v-show；運行條件很少改變時用v-if
v-for
在 Vue 中，提供了 v-for 指令用來循環數據。
<!DOCTYPE><html><head> <meta charset="UTF-8"> <title>w3cschool</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="app"> <h>開始循環</h> <li v-for="index in item"> {{index}} </li> </div><script> new Vue({ el:'#app',
data:{ item:[1,2,3,4,5], }, methods:{ }, })</script></body></html><body><!DOCTYPE><html><head> <meta charset="UTF-8"> <title>w3cschool</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="app"> <h>開始循環</h> <li v-for="(index,items) in item">//index表示數組中的元素，items表實元素的下標 {{index}},{{items}} </li> </div><script> new Vue({ el:'#app',
data:{ item:[1,2,3,4,5], }, methods:{ }, })</script></body></html>v-model
關于 v-model 最重要的就是 雙向數據綁定。使用 Vue 操作 DOM 元素時，視圖與數據依照任何的一方同時發生改變。
<body>
<div id="app">
輸入內容：<input type="text" v-model="message"><br/> <!--v-model綁定了輸入框與message中的內容-->
反轉內容：{{reversedMessage}}
</div>
<script>
new Vue({
el:'#app',
data:{
message:''
},
computed:{ //計算屬性在computed選項中定義，當計算屬性所依賴的值發生變化時，這個屬性的值會自動更新
//computed可以換做methods定義一個方法實現相同的功能
reversedMessage: function(){
return this.message.split('').reverse().join('') //選中message中的內容，反轉后添加
}
}
})
</script>
</body>當我們在 input 輸入框里面輸入值時，所綁定的 message 屬性值也發生了變化，當綁定成功，我們在 input 中輸入的任何合法字符串或者數字時，Vue 都會重新更新 message 的屬性值，從而符合我們所輸入的值，再通過 reversedMessage 方法將 message 顛倒過來重新打印在=={{reversedMessage}}==，由于是雙向數據綁定，三者是同時發生的。
v-bind
v-bind 的作用是為元素綁定屬性，寫法v-bind:屬性名，可以簡寫為“:屬性名”。
<body>
<div id="app">
<img :src="imgsrc" :title="imgtitle">
</div>
<script>
new Vue({
el:'#app',
data:{
imgsrc:"xxx",
imgtitle:"獲得圖片",
},
methods:{
},
})
</script>
</body>無論是 class 還是其他標簽，都可以通過“:標簽名”來為元素綁定屬性。對于綁定的元素內容是作為一個 JavaScript 變量，故而可以對其進行編寫 JavaScript 的表達式。
“Vue新手入門實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
