Vue快速入門-1-Vue的簡單使用
阿新 • • 發佈：2018-12-10
小生部落格：http://xsboke.blog.51cto.com
如果有疑問,請點選此處,然後發表評論交流,作者會及時回覆。
-------謝謝您的參考，如有疑問，歡迎交流目錄:
1. 簡單的將資料渲染到DOM 2. Vue的"v-"指令 3. "v-if"指令的使用 4. "v-for"指令的使用 5. Vue的事件處理 6. "v-model:value"實現雙向資料繫結 7. Vue實現逆轉字串 8. Vue 動態新增class屬性,以及三目運算. 9. "v-bind:style"指令定義內聯樣式 10. 指令支援陣列 11. Vue例項各個生命週期的鉤子函式
- 簡單的將資料渲染到DOM
<div id="app"> {{message}} -- 使用"{{}}"將資料渲染到DOM </div> <script type="text/javascript"> var app = new Vue({ -- 建立Vue例項 el: '#app', -- 通過屬性繫結元素 data:{ message: 'Hello Vue!', -- 設定上下文 } }) </script>
- Vue的"v-"指令
通過"v-"用來繫結屬性,然後對屬性值進行操作 <div id="app" v-bind:title='vueTitle'> -- 使用"v-"時不需要再使用"{{}}"渲染 </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ vueTitle: 'vue data vueTitle' } })
- "v-if"指令的使用
只用來判斷真假(true|false)
<div id="app">
<p v-if="seen">如果是true則可以顯示</p> -- 如果seen的值為true則顯示p標籤,如果為false則不顯示
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
seen:true,
}
})
</script>- "v-for"指令的使用
<div id="app">
<ul>
<li v-for="item in list"> -- item就是for從list中取出來的變數,仔細看看其實和普通的for迴圈一樣
{{item}} -- 如果迴圈的是一個字典型別資料,通過 "item." 獲取value
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
list:["Item A","Item B","Item C"]
}
})
</script>- Vue的事件處理
通過"v-on"指令,處理click的事件
所有的事件觸發時執行的函式,都需要寫到Vue例項的的methods選項中,
<div id="app">
<p>{{message}}</p>
<button v-on:click="showmessage">顯示訊息</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: 'Hello Vue!'
},
// 所有的函式都定義在methods
methods:{
showmessage:function(){
this.message = "Hello World!"
}
}
})
</script>- "v-model:value"實現雙向資料繫結(就是不同標籤中的內容是相同的)
<div id="app">
<p>{{message}}</p>
<input v-model:value="message" /> -- input標籤和p標籤互相隨對方改變
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: 'Hello Vue!'
},
})
</script>- Vue實現逆轉字串
<div id="app">
<p>{{message}}</p>
<button v-on:click="reverse">逆轉訊息</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: 'Hello Vue!'
},
methods:{
reverse:function(){
this.message = this.message.split('').reverse().join('') -- Vue逆轉字串,類似python中,先將字串轉換為序列,然後翻轉列表,最後在join為字串
}
}
})
</script>- Vue 動態新增class屬性,以及三目運算.
動態新增class屬性
<style type="text/css">
.active{
background-color: #0f0;
}
</style>
<body>
<div id="app">
<!-- 支援三目運算子 -->
<p v-bind:class="{Vactive:isActive}">我是P標籤</p> -- 當isActive為true時,class屬性才會等於"Vactive",然後將引用上面style定義的CSS樣式
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
isActive:true,
Vactive:'active'
}
})
</script>
</body>
三目運算
<style type="text/css">
.active{
background-color: #0f0;
}
.error{
background-color: #f00;
}
</style>
<body>
<div id="app">
<!-- 支援三目運算子 -->
<p v-bind:class="isActive ? Vactive:Verror">我是P標籤</p> -- 當isActive為true時,引用Vactive的值,為false時,引用Verror的值
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
isActive:true,
Vactive:'active',
Verror:'error',
}
})
</script>
</body>- "v-bind:style"指令定義內聯樣式
"v-bind"可以簡寫為":",所以"v-bind:style"可以寫為":style"
<body>
<div id="app">
<p :style="styleObject">我是P標籤</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
/* Vue的內聯樣式採用的json格式,而且要使用駝峰命名法,
* 和CSS以"-"命名";"結尾是不一樣的
*/
styleObject:{
backgroundColor: '#00f',
fontSize: '20px',
}
}
})
</script>
</body>- 指令支援陣列
<style type="text/css">
.active{ -- 11.1
background-color: red;
}
.error{ -- 因為".error"在".active"後面,所以:".error"的優先順序最高.
background-color: blue;
}
</style>
<body>
<div id="app">
<p :class="items">我是P標籤</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
items:['active','error'], -- 如果陣列中多個變數的CSS屬性衝突,則按照DOM從上往下讀的原則,後面的CSS樣式優先順序高,此例".error"的優先順序高,
} -- 注意,優先順序與陣列的順序無關,而是標籤<style>中的CSS順序,因為瀏覽器是不會識別Vue的,Vue最終還是轉換為了html語言
})
</script>
</body>- Vue例項各個生命週期的鉤子函式
通俗講,就是在Vue例項執行的各個階段可以使用的函式
比如:
在Vue例項建立時可以執行created函式
在Vue例項被掛載到DOM時可以執行mounted函式
在Vue例項更新時,可以執行updated函式
<div id="app">
{{message}}
<button @click="change">單擊更新message</button> -- "v-on"指令可以簡寫為"@",所以這裡的"v-on:click"簡寫為了"@click"
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message:'hello vue!'
},
methods:
change:function(){ -- 點選button按鈕時執行change函式
this.message = 'hello world!' -- 更改message的值
}
},
// 鉤子函式,不用寫在methods中
created:function(){
console.info('Vue物件建立時被呼叫!'); -- 資訊被輸入到console控制檯
},
mounted:function(){
console.info('Vue物件掛載到dom元素時執行！');
},
updated:function(){
console.info('data資料被更新的時候執行');
}
})
</script>