溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小生博客：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實例各個生命周期的鉤子函數
<div id="app">
{{message}} -- 使用"{{}}"將數據渲染到DOM
</div>
<script type="text/javascript">
var app = new Vue({ -- 創建Vue實例
el: '#app', -- 通過屬性綁定元素
data:{
message: 'Hello Vue!', -- 設置上下文
}
})
</script> 通過"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'
}
})
只用來判斷真假(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> <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> 通過"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> <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> <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> 動態添加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"可以簡寫為":",所以"v-bind:style"可以寫為":style"
<body>
<div id="app">
<p :>我是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實例創建時可以執行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>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
