vue 學習小結送給新手

時間 2019-11-08

標籤 vue 學習小結送給新手简体版

原文原文鏈接

Vue 是如今最火的前端JavaScript 開發框架。
首先，接受它的思想
View 模板即html，靜態界面
Model 數據源模型界面全部的數據負責提供及管理
Vue 負責將view 及 Model結合起來。javascript

<div id="app">
    {{message}}
</div>
<script type="text/javascript">
    var exampleData = {
        message:'Hello World!'
    }
//exampleData 數據模型 數據和模板組成
    new Vue({
        el:'#app',
        data:exampleData
    })
</script>

id爲app的一段html 即模板，裏面有一個{{message}}表達式等待被填充 {{}} 兩個大括號即Vue 表達式html

var exampleData = {
        message:'Hello World!'
    }
    
    exampleData模型 提供了view 須要的數據message 
    vue 作什麼呢？ 告知雙方，View 的Model 在哪裏，
    Model 爲哪一個view服務
    
 new Vue({
        el:'#app',
        data:exampleData
    })

實例化一個Vue 配置參數 el指向html 元素
data參數指向數據前端

**MVVM
Model View ViewMode(vue,el,data)**vue

數據綁定是vue 最核心也是最酷的一個能力。
咱們能夠將html 與數據綁定起來。只要數據發生改變，html(view)當即更新，html由form表單等帶來的數據改變，數據相應字段也會發生相應改變。即V-model
一 viewmodel關聯
el:'#app',data:{message:'hello world!'}
div#app{{message}}表達式就會顯示數據模型model裏的message的值 Hello world!java

二數據綁定
v-model將input 和 message綁在了一塊兒，任何一方的改變都會影響彼此
好比：剛開始，message的值爲hello world input value顯示爲hello world! 數據綁定了 input顯示message的值
接着 input用戶輸入，value 發生了改變，通知數據message更新他的值，雙向互通。react

三界面的更新
input的輸入，致使message的值更新，#app元素內，任何表達式與message有關的，都將從新計算，斌企鵝自動更新界面。
因此，<p>{{message}}</p>會顯示出實時與input輸入的值同樣。web

指令綁定在html元素上，相似於屬性的特殊命令，用於加強html的能力
v-if 表達式，true 則輸出 false 不輸出，頁面上不會輸出其html
v-model 雙向數據綁定指令主要用於form 表單，input 輸入值會傳給數據更新，數據更新會直接在界面數據上反映。ajax

v-show 與v-if 同樣接受一個boolean 值得表達式，但不同的地方
無論真心急啊都會在頁面上輸出，只是style display:none 而已。數據庫

MVVM核心作的是數據驅動的界面，若是數據是數組怎麼辦？
v-for 負責循環輸出數據到模板上，item in items
循環的數組是 items 當前的對象是item
在循環中item對象的全部屬性均可以使用item.property調用。
items 來自於vue 實例的data數據源
v-on指定事件監聽指令
v-on:event_type="function_name"
在vue 實例裏有一個methods API 專門用於提供各類方法，
供html調用json

v-for=「（index,n） in 4」
循環指令，執行 4次
index 當前的下標，n爲當前的數字

v-bind:class="{on:(tab==index)}"
簡寫:class
屬性綁定指令，動態屬性輸出
好比.activ,.on

on:(tab == index)
on是要輸出的類名，是常量，：右邊是表達式，若是爲真
則輸出左邊的類，
數據驅動的屬性綁定改變tab的值就能夠，讓第幾個tab有on 這個類

v-on:mouseover = "setCurrent()"
添加DOM 事件監聽

methods:{
        setCurrent:function(index) {
        this.tab = index;
    }
}

component 組件
組件化思惟是mvvm 最重要的思想，可讓網頁像搭積木同樣的來開發。
react 做爲組件化思惟的先驅 facebook 當年統計的組件多達5w多個。
優勢是：
1 複用組件化開發的過程就是一個選取組件拼裝的過程
2 易維護一個組件過期了或者有新的需求直接下架（可拔插）
3 協做一個開發者負責本身的一些組件
組件化開發適合大型應用

組件語法

<body>
     
        <my-component></my-component>
     
    //定義一個組件名爲my component
    Vue.component('my-component',{
        //template 屬性 組件的html
        template:'<div>A custom component!</div>'
    })

定義在vue實例化以前

Vue.component('組件名稱'，option)
template 屬性是基本屬性，用於設置組建的模板，即view
data,methods 等等，其實它跟Vue實例同樣，具備那些複雜的功能

表現
組件的名字能夠像自定義的html元素同樣，插入html文檔，擴展html的功能
本質上組件就是一堆html代碼的集合，除了html以外，還有數據集交互邏輯，讓這個組件變得功能強大.
本來的html太簡單功能太貧瘠。

優勢：使用的直觀性

組件時屬於實例的也多是屬於其餘組件的。
父組件，子組件。。。組件之間有關係
組件最後經過自定義html的形式掛到vue實例上去或父組件上去

components 屬性子組件的集合，
語法是一個json對象

var vm = new Vue({
  el:'#app',
  data:{
  },
  components:{
      'my-component':Child
  }
})

my-component 是咱們給組件取的別名，html內插入的就是這個名字
Child是咱們的組件。

組件內數據的聲明與vue 實例數據的聲明有些不一樣，必須爲函數

data:function(){
        return{
        message:'hello'
    }
}

return 返回一個json 對象

filter 過濾去
在開發中常常有這樣的需求數據庫中存放的是原始數據，離咱們顯示的需求，還差那麼一點點。
或者是數據須要整個容，換個形式，filter負責
數據在 | 管道後將由一個函數來化妝

組件或者實例中有一個屬性filters 裏面放置filter函數在vue2.0之前默認提供一些經常使用的過濾器，好比capitalize sortBy
Vue 2.0之後須要自行定義。
能夠自行定義，數據最後顯示的方式。

聲明周期函數
組件有他的聲明週期，即建立先後，銷燬先後
在配置選項中有一些預約義的生命週期函數鉤子，就在相應的週期那一刻會觸發。
好比常常會在組件加載完成後,發起數據請求ajax
放在created 方法中
在組件銷燬前解綁數據源。

v-html 指令用途：用於將數據顯示爲html而不是字符串

Ajax
異步無刷新網頁技術，一般用於瀏覽器JavaScript 主動向
後端請求數據並實時更新界面的操做中

Ajax 工程師 RIA富互聯網應用開發工程師

傳統請求同步
HTTP 請求的過程
網友在瀏覽地址裏輸入url請求後，解析DNS IP地址找到網頁所在的服務器。
通知服務器，須要這個頁面的html
服務器收到請求指令後，去數據庫裏取出數據，動態渲染html模板，最後經過與網友的鏈接
,將網頁字符串發送給瀏覽器，咱們就看到網頁了

Ajax 異步請求
與同步請求不一樣，Ajax 是在網頁已經渲染，跟服務器斷開鏈接後，客戶端JavaScript 經過用戶點擊事件（換一批）鼠標滾動（下一頁）主動向服務器端請求數據
並且並非一直等待結果再執行，而是在服務器端接到指令後，完成運算由服務器端異步的調用callback來繼續執行頁面邏輯{動態DOM操做}
服務器成功執行，調用callback,
失敗，調用error 不會刷新頁面的就是ajax

一瀏覽器原生的異步請求對象 XMLHttpRequest
XML 數據的格式如今主要是JSON
HttpRequest javascript 發出http請求的能力
流程

1 打開請求，這是並無真正發送請求而是去作了http握手
xhr.open('GET',URL);
URL 是服務器端提供給你取數據的地址，是預約好的。
服務端只須要根據前端的需求，準備好數據，並在預約的地址（URL）,
以JSON的格式返回給用戶便可

2 定義回調

xhr.onload = function() {
        xhr.responseText;
}

xhr 請求後服務器端返回的數據，會異步賽道xhr.responseText屬性裏面。
JSON.parse()將返回數據變成json 對象
xhr.send()真正發送請求

xhr的優勢在於，帶來了web2.0革命，傳統了的請求，頁面是靜態的，死板的
而xhr時代的頁面是動態的，富交互的，

$.getJSON(url,params,function(data){
        
});
$.post(url,params,function(data){
        
});

平時咱們不會去直接用XMLHttpRequest

input radio 切換後，ajax 的數據操做由watch 方法來負責

watch:{
        propertypeName:'函數名'
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

vue 學習小結 送給新手

vue 學習小結送給新手