學習資料

慕課網 - vue2.5入門

基礎語法

示例代碼1

<div id="root"><h1>hello {{msg}}</h1> </div> <script>new Vue({el: "#root",template: '<h1>hello {{msg}}</h1>',data: {msg: "world"}}) </script>

掛載點：vue實例綁定的dom節點

模板：掛載點輸出的內容，可以直接在掛載點內部編寫，也可以通過template屬性實現。

示例代碼1中div標簽內部的<h1>hello {{msg}}</h1>和vue中的 template: '<h1>hello {{msg}}</h1>' 效果一致

實例: 指定掛載點、指定模板、綁定數據后可以自動結合模板、數據生成最終要展示的內容，并放到掛載點之中

插值表達式：兩個花括號包裹一個變量

{{msg}} 就是一個插值表達式

示例代碼2

<div id="root"><div v-html="msg" v-on:click="handleClick"></div> </div> <script>new Vue({el: "#root",data: {msg: "<h1>hello</h1>"},methods: {handleClick: function () {this.msg = 'world'}}}) </script>

指令

• v-html: 以html格式解析變量
• v-text: 以文本格式輸出變量
• v-on: 事件綁定，簡寫為@
• v-bind: 屬性綁定，簡寫為:
• v-model: 雙向數據綁定
• v-if: 不符合條件時整個元素dom都清除，符合條件時再重新創建該dom
• v-show: 不符合條件時，dom元素增加display:nonecss屬性，
• v-for: 用法(item, index) in/of list，item是元素列表每個元素值，index是每個元素的索引值

事件

click就是一個點擊事件, v-on:click表示綁定一個點擊事件，簡寫方式為@click

示例代碼3

<div id='app'><h1 v-html='msg' v-on:click='handleClick' v-bind:title='title1'></h1><input v-model='content'/><div>{{content}}</div> </div><script>new Vue({el: "#app",data: {msg: 'hello world',title1: 'this is a title',content: 'this is content'},methods: {handleClick: function () {this.msg = 'ready to learn'}}}) </script>

雙向數據綁定: 當頁面數據變化時，變量的值也會同時變化

示例代碼4

<div id='app'>姓 <input v-model="firstName">名 <input v-model="lastName"><div>{{fullName}}</div> </div><script>new Vue({el: "#app",data: {firstName: '',lastName: '',},// 計算屬性computed: {fullName : function () {return this.firstName + ' ' + this.lastName}},// 偵聽器watch: {firstName: function () {this.count ++},lastName: function () {this.count ++},//等價于fullName: function () {this.count ++},}}) </script>

計算屬性: 一個屬性的值是通過其他屬性計算得來

偵聽器: 監聽一個屬性的變化后進行數據處理

示例代碼5

<input v-model="todo"/><button @click="submit">提交</button><div v-for="(item, index) in todoList" :key="index" v-model="todoList"><input type="checkbox" /> {{item}}</div> </div><script>new Vue({el: "#app",data: {todo: '',todoList: []},methods: {submit: function () {this.todoList.push(this.todo)this.todo = ''}},}) </script>

效果圖

• 給列表增加元素: push()

組件

頁面中的某一部分

全局組件: 在掛載點中可以直接使用

Vue.component('todo-item', {template: "<li>item</li>" })

局部組件: 需要在實例中聲明才能在掛載點中使用

var TodoItem = {template: "<li>item</li>" } new Vue({// ...// 注冊局部組件components: {'todo-item': todoItem},// ... })

組件傳值: 接收外部傳遞的屬性值

外部傳值

<todo-item v-for="(item, index) in todoList" :key="index" :content="item"></todo-item>

組件接收

Vue.component('todo-item', {props: ["content"],template: "<li>{{content}}</li>" })

父子組件通信：

子組件=>父組件：子組件通過發布訂閱模式，向父組件傳遞數據

父組件=>子組件：父組件的模板中增加屬性，子組件中接收屬性

父組件的模板中使用子組件模板:

<!-- @delete="checkout"用于訂閱子組件的delete事件，并觸發父組件的checkout方法--> <todo-itemv-for="(item, index) in todoList":key="index":content="item":index="index"@delete="checkout" ></todo-item>

子組件：

Vue.component('todo-item', {// 接收屬性值props: ["content", "index"],template: "<li @click='checkout'>{{content}}</li>",methods: {// 子組件模板中的checkout事件checkout: function () {// 發布訂閱模式, 發布delete事件this.$emit('delete', this.index)}} })

父組件：

new Vue({el: "#app",data: {todo: '',todoList: []},methods: {submit: function () {this.todoList.push(this.todo)this.todo = ''},checkout: function (index) {this.todoList.splice(index, 1)}}, })

轉載于:https://www.cnblogs.com/zqunor/p/11423929.html

總結

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

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