戴口罩前噴兩噴:參半口腔噴霧 9.9 元/瓶速囤(京東 29.9 元)
阿新 • • 發佈:2022-04-28
一、引入vue
方法一:下載vue.js,然後像引用jquery一樣,在HTML中使用script標籤引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
方法二:使用架構工具,推薦使用npm安裝後,然後可以直接用作 AMD 模組
var Vue = require('Vue');
二、宣告式渲染
hello World例項(新建html將如下內容放在body中)
<div id="app">{{ message }}</div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script>var app = new Vue({ el: '#app', data: {message: 'Hello Vue!'} }) </script>
除了繫結插入的文字內容,我們還可以採用這樣的方式將資料繫結到 DOM 元素的屬性
<div id="app-2">
<span v-bind:title="message">Hover your mouse over me to see my title!</span>
<!-- v-bind被稱為指令,指令帶有字首 v-,以表示它們是 Vue.js 提供的特殊屬性 v-bind:變數=‘資料’-->
</div>
var app2 = new Vue({ el: '#app-2', data: {message: 'You loaded this page on ' + new Date()} })
三、條件
<div id="app-3"><p v-if="seen">Now you see me</p></div><!-- v-if 條件指令,v-if=‘資料(布林值)’-->
var app3 = new Vue({
el: '#app-3',
data: {seen: true}//設定為false時,P元素不渲染
})
四、迴圈
<ol id="app-4"><li v-for="todo in todos">{{ todo.text }}</li></ol><!-- v-for 迴圈指令,v-for=‘列表項 in 陣列資料’-->
var app4 = new Vue({
el: '#app-4',
data: {todos:[{text: 'Learn JS'},{text:'Learn Vue'},{text: 'Build something awesome'}]}
//app4.todos.push({text:'New item'})會新增列表項
})
五、使用者輸入
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button><!-- v-on繫結事件指令,v-on:事件型別=‘呼叫函式’ -->
</div>
var app5 = new Vue({
el: '#app-5',
data: {message: 'Hello Vue.js!'},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
六、資料繫結
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message"><!-- v-model資料繫結指令 v-model=‘繫結的資料’-->
</div>
var app6 = new Vue({
el: '#app-6',
data: {message: 'Hello Vue!'}
})
七、元件
<ol>
<todo-item></todo-item><!--自定義元件-->
</ol>
Vue.component('todo-item', {//定義一個元件
props: ['todo'],//將資料從父作用域傳到子元件
template: '<li>{{ todo.text }}</li>'
})
以下有資料傳遞的元件
<ol id="app-7">
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
<!--先迴圈從groceryList陣列中分別獲取列表項為item,將item賦值給todo分別傳遞給子元件-->
</ol>
Vue.component('todo-item', {
props: ['todo'],//子元素通過props介面實現與父元素的資料傳遞
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {groceryList: [{ text: 'Vegetables' },{ text: 'Cheese' },{ text: 'Whatever' }]}
})