Vue基礎起步

時間 2019-12-01

標籤 vue 基礎起步简体版

原文原文鏈接

Vue基礎起步

一、用vue實現helloworld

代碼javascript

<div id="app">{{content}}</div> <script> var app = new Vue({ el:"#app", data:{ content:"hello world" } }) </script>複製代碼

瀏覽器效果以下
html

知識點vue

使用vue時，應該用 new Vue 建立一個vue實例，此處用app來接收這個實例java
el是指定Vue實例綁定哪一個dom標籤，就是說vue的操做範圍是在哪一個標籤以內瀏覽器
好比我如今把代碼改成以下bash
```
<div id="app">{{content}}</div> <div>{{content}}</div> <script> var app = new Vue({ el:"#app", data:{ content:"hello world" } }) </script> 複製代碼
```
瀏覽器效果以下app

能夠看到只要超出了div#app的範圍，vue就不會去渲染數據dom
vue是數據綁定是經過{{名字}}實現的，能夠渲染出data{名字：數據}中的數據函數
vue的好處是免去了dom的操做，咱們只須要在數據上邏輯上作文章便可ui
好比咱們如今用原生js去實現上面的功能
```
<div id="app"></div> <script> var app = document.getElementById("app"); app.innerHTML = "hello world", </script> 複製代碼
```
vue是響應式的，只要數據一變化，視圖數據就會從新渲染
```
var app = new Vue({ el:"#app", data:{ content:"hello world" } }) setTimeout(function(){ app.$data.content="Bye world!" },1000)複製代碼
```
咱們會看到，一秒以後，瀏覽器中出現了變化

注意

只有data中本來存在的屬性被更新時，vue纔會從新渲染，若是是app.$data.a=3後續添加data本來不存在的屬性與值，vue是不會響應的

Object.freeze(data)這樣就會阻止修改限有的屬性

2、用vue實現一個簡易toDoList

所用知識點以下

v-model能夠實現數據的雙向綁定，dom中的數據能夠影響到vue實例，vue實例的數據能夠影響到dom的數據

<input type="text" v-model="inputValue">//vue中的datadata:{    inputValue:''}複製代碼

data中的inputValue和v-model中的inputValue 會同時變化，其中一個變化，另外一個也跟着變化

v-for="item in list"v-for會去遍歷data中的list，item代指每一項
$表示Vue實例所擁有的屬性和方法，此外還有$.el,$watch。。。

methods全部的事件都寫在methods對象中，v-on:事件="事件函數"

<button v-on:click="btnClick">提交</button> new Vue({ methods:{ btnClick:function(){ this.list.push(this.inputValue); this.inputValue=""; } } })複製代碼

好了如今把代碼和效果貼上來嘍

 <div id="app"> <input type="text" v-model="inputValue"> <button v-on:click="btnClick">提交</button> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script> var app = new Vue({ el:"#app", data:{ list:[], inputValue:'' }, methods:{ btnClick:function(){ this.list.push(this.inputValue); this.inputValue=""; } } }) </script>複製代碼

效果圖

使用組件改造todoList

知識點

全局組件的使用

Vue.component('todoList',{})用來註冊一個名字叫todoList的全局組件，{}是要傳進去的參數，注意 todoList在html中要寫做todo-list

Vue.component('todoList',{    
    props:['content']，      template:'<li>{{content}}</li>'
})複製代碼

props:['content']，用來接收父組件傳遞的值
template:''，必填，展現模板的內容，注意千萬不能寫<li>this.$data.content</li>，會報錯，而要寫成<li>{{content}}</li>

html

<todo-list  v-bind:content="item" v-for="item in list"></todo-list>複製代碼

v-bind:名字=「值」 v-bind能夠用來綁定數據，這裏是v-for遍歷父組件的list數據，用content來接收父組件的list中每一項（item）的值

綜上在組件中中，用props:[‘content’] 來接受父組件的傳值

代碼以下

<div id="app"> <input type="text" v-model="inputValue"> <button v-on:click="btnClick">提交</button> <ul> <!-- <li v-for="item in list">{{item}}</li> --> <todo-list v-bind:content="item" v-for="item in list"></todo-list> </ul> </div> <script> Vue.component('todoList',{ props:['content'], template:'<li>{{content}}</li>' }) var app = new Vue({ el:"#app", data:{ list:[], inputValue:'' }, methods:{ btnClick:function(){ this.list.push(this.inputValue); this.inputValue=""; } } }) </script>複製代碼

子組件的使用

形式跟父組件同樣

只不過寫法不一樣

var todoList = {
            props:['content'],
            template:'<li>{{content}}</li>'
        },
//在vue的實例中
new Vue({
	components:{
		todoList:todoList 
	}
})複製代碼

3、父子組件的簡單傳值

咱們要實現一個功能，點擊列表信息時，刪除該信息

效果以下

小知識點

v-on:click能夠縮寫爲@click

v-bind:能夠縮寫爲:bind

代碼

var todoList = {
            props:['content',"index"],
            template:'<li @click="deleteItem">{{content}}</li>',
            methods:{
                deleteItem:function(){
                    this.$emit("delete",this.index);
                }
            }
        }複製代碼

在template中加入點擊事件@click="deleteItem"
而後咱們在子組件的methods加入一個點擊事件函數deleteItem
- emit能夠用來觸發父組件自定義的事件,第一個參數是自定義事件的名字，後面的參數能夠傳參給父組件
父組件引用子組件的html代碼
```
<todo-list :content="item" :index="index" v-for="(item,index) in list" @delete="handleDeleteItem"></todo-list>複製代碼
```
@delete是父組件自定義的事件，當點擊子組件時，子組件會自動觸發該自定義事件，並把參數傳過去
父組件的Vue實例中
```
new Vue({ methods:{ handleDeleteItem:function(index){ this.list.splice(index,1); } } })複製代碼
```
index就是子組件中$emit('delete',this.index)中的this.index傳過來的參數

所有代碼以下

<div id="app"> <input type="text" v-model="inputValue"> <button v-on:click="btnClick">提交</button> <ul> <todo-list :content="item" :index="index" v-for="(item,index) in list" @delete="handleDeleteItem"></todo-list> </ul> </div> <script> var todoList = { props:['content',"index"], template:'<li @click="deleteItem">{{content}}</li>', methods:{ deleteItem:function(){ this.$emit("delete",this.index); } } } var app = new Vue({ el:"#app", components:{ todoList:todoList }, data:{ list:[], inputValue:'' }, methods:{ btnClick:function(){ this.list.push(this.inputValue); this.inputValue=""; }, handleDeleteItem:function(index){ this.list.splice(index,1); } } }) </script>複製代碼