學(xué)習(xí)資料

慕課網(wǎng) - vue2.5入門

基礎(chǔ)語法

示例代碼1

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

掛載點(diǎn)：vue實(shí)例綁定的dom節(jié)點(diǎn)

模板：掛載點(diǎn)輸出的內(nèi)容，可以直接在掛載點(diǎn)內(nèi)部編寫，也可以通過template屬性實(shí)現(xiàn)。

示例代碼1中div標(biāo)簽內(nèi)部的<h1>hello {{msg}}</h1>和vue中的 template: '<h1>hello {{msg}}</h1>' 效果一致

實(shí)例: 指定掛載點(diǎn)、指定模板、綁定數(shù)據(jù)后可以自動(dòng)結(jié)合模板、數(shù)據(jù)生成最終要展示的內(nèi)容，并放到掛載點(diǎn)之中

插值表達(dá)式：兩個(gè)花括號(hào)包裹一個(gè)變量

{{msg}} 就是一個(gè)插值表達(dá)式

示例代碼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: 雙向數(shù)據(jù)綁定
• v-if: 不符合條件時(shí)整個(gè)元素dom都清除，符合條件時(shí)再重新創(chuàng)建該dom
• v-show: 不符合條件時(shí)，dom元素增加display:nonecss屬性，
• v-for: 用法(item, index) in/of list，item是元素列表每個(gè)元素值，index是每個(gè)元素的索引值

事件

click就是一個(gè)點(diǎn)擊事件, v-on:click表示綁定一個(gè)點(diǎn)擊事件，簡寫方式為@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>

雙向數(shù)據(jù)綁定: 當(dāng)頁面數(shù)據(jù)變化時(shí)，變量的值也會(huì)同時(shí)變化

示例代碼4

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

計(jì)算屬性: 一個(gè)屬性的值是通過其他屬性計(jì)算得來

偵聽器: 監(jiān)聽一個(gè)屬性的變化后進(jìn)行數(shù)據(jù)處理

示例代碼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()

組件

頁面中的某一部分

全局組件: 在掛載點(diǎn)中可以直接使用

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

局部組件: 需要在實(shí)例中聲明才能在掛載點(diǎn)中使用

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>" })

父子組件通信：

子組件=>父組件：子組件通過發(fā)布訂閱模式，向父組件傳遞數(shù)據(jù)

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

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

<!-- @delete="checkout"用于訂閱子組件的delete事件，并觸發(fā)父組件的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 () {// 發(fā)布訂閱模式, 發(fā)布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)}}, })

轉(zhuǎn)載于:https://www.cnblogs.com/zqunor/p/11423929.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。