vue的基礎使用

時間 2019-11-19

標籤 vue 基礎使用简体版

原文原文鏈接

vue的介紹

漸進式的JavaScript框架

vue           react            angualr

做者:尤雨溪    facebook         谷歌公司


文檔:中文  建議:若是你想學好vue  
1.看視頻  初步的瞭解vue  
2.學vue的課 時刻看官網文檔  https://cn.vuejs.org/

前端框架和庫的區別

功能上的不一樣

jquery庫：包含DOM(操做DOM)+請求，就是一塊功能。

art-template庫：模板引擎渲染，高性能的渲染DOM    (咱們後端的一種模板  跟python的模板相似)

框架：大而全的概念，簡易的DOM體驗+請求處理+模板引擎

在KFC的世界裏，庫就是一個小套餐，框架就是全家桶。

代碼上的不一樣

通常使用庫的代碼，是調用某個函數或者直接使用拋出來的對象，咱們本身處理庫中的代碼。
通常使用框架，其框架自己提供的好的成套的工具幫咱們運行咱們編寫好的代碼。

框架的使用

初始化自身的一些行爲
執行你所編寫的代碼
釋放一些資源

nodejs

去官網https://nodejs.org/en/download/ 下載安裝(傻瓜式安裝)javascript
打開終端 cmd : 執行node -v 若是出現版本號，證實安裝node成功，跟安裝python雷同html
下載完node以後，會自帶包管理器 npm，比如是python中 pip3包管理器。pip3 install xxx前端

使用npmvue

1.要初始化npm的項目 :java

npm init --yes 自動生成一個package.json文件node

```javascript
{

    "name": "vue_lesson",

    "version": "1.0.0",

    "description": "這是個人vue的第一個項目",

    "main": "index.js",

    "scripts": {

      "test": "echo "Error: no test specified" && exit 1"

    },

    "author": "mjj",

    "license": "ISC",

    "dependencies": {

      "vue": "^2.5.16"

    }

  }

```

2.下載依賴包python

npm install vue --save
npm install jquery --savereact

3.卸載包 npm uninstall vue --savejquery

4.下載全部的依賴包 npm installajax

vue的起步

引包:
建立實例化對象

new Vue({
el:'#app',//目的地
data:{
    msg:"hello Vue"
}
});
/*
{{}}: 模板語法插值
    {{變量}}
    {{1+1}}
    {{'hello'}}
    {{函數的調用}}
    {{1==1?'真的':'假的'}}
*/

指令系統

//經常使用
v-text 
v-html 
v-if
v-show
v-for
v-bind
v-on

表單控件的value (看後面)

v-if和v-show

v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。
相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。
通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

//保存數組或者對象 格式
v-for = '(item,index) in menuList'
v-for = '(value,key) in object'
//item指的是數組中每項元素

<a href="" class='box'></a>
<img src="" alt="">
使用v-bind:class = '{}||[]||變量名||常量' 對咱們的頁面中標籤的屬性進行綁定 全部的屬性均可以進行綁定,注意只要使用了v-bind 後面的字符串必定是數據屬性中的值

v-on v-bind v-for

// 1.事件源 2.事件  3.事件驅動程序
vue中使用v-on:click對當前DOM綁定click事件 注意:全部的原生js的事件使用v-on均可以綁定

v-if和v-on 來對頁面中DOM進行操做

v-bind:class和v-on對頁面中DOM的樣式切換

v-bind和v-on

在vue中它能夠簡寫: v-bind:         
:class 等價於 v-bind:class   
:src 等價於v-bind:src
:id 等價於v-bind:id
v-on:click   等價於 @click = '方法名'

v-text  v-html  {{}}: 對頁面的dom進行賦值運算   至關與js中innerText innerHTML

v-if = 'true':
//建立
var oP =   document.createElement('p')  ;
oDiv.appendChild(op)

v-if = 'false'
//銷燬
oDiv.removeChild(op)
v-show = 'true'
oDiv.style.display = 'block'
v-show:'true'
oDid.style.display = 'none'

v-bind:class
oDiv.className += ' active'

/*
漸進式的JavaScript框架
作加法和作減法:大部分的人以爲作加法簡單,作減法難
vue這個框架 將 作減法的事情都給我們作了(難的部分)
學習簡單的部分就能實現複雜的dom操做
*/

組件的使用

局部組件的使用

打油詩: 1.聲子 2.掛子 3.用

//1.聲子
var App = {
 tempalte:`
   <div class='app'></div>`
};


new Vue({
 el:"#app",
 //3.用子  
 template:<App />
 //2.掛子
 components:{
    App
 }

})

(1)父組件向子組件傳遞數據:經過Prop

1.在子組件自定義特性。props:['自定義的屬性1','自定義屬性2']

當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性,那麼咱們就能夠像訪問data中的值同樣  
2.要在父組件中導入的子組件內部 綁定自定義的屬性 <Vheader :title = '父組件中data聲明的數據屬性'/>

注意:一個組件默承認以擁有任意數量的 prop，任何值均可以傳遞給任何 prop。

(2)如何從子組件傳遞數據到父組件

1.給子組件中的某個按鈕綁定原聲事件,。咱們能夠調用內建的 this.$emit('自定義的事件名','傳遞的數據')，來向父級組件觸發一個自定義的事件.

2.在父組件中的子組件標籤中 要綁定自定義的事件,

全局組件的使用

Vue.component('全局組件的名字',{
 跟new Vue() 實例化對象中的options是同樣，可是要注意：
 不論是公共組件仍是局部組件 data必須是個函數 函數必定要返回 {}
})

<slot> 元素做爲承載分發內容的出口

過濾器的使用

局部過濾器

//1.註冊局部過濾器 在組件對象中定義
filters:{
    '過濾器的名字':function(value){
    }   
}
//2.使用過濾器 使用管道符 | 
{{price  | '過濾器的名字'}}

全局過濾器

// 註冊全局的過濾器
//第一個參數是過濾器的名字，第二個參數是執行的操做

Vue.filter('reverse',function(value) {    
    return value.split('').reverse().join('');
});

//使用跟 局部過濾器同樣

計算屬性computed和偵聽器（watch）

偵聽的是單個屬性

watch:{

    數據屬性的名字：function(value){

    },
    數據屬性的名字2：function(value){

    }
}

偵聽多個屬性:計算屬性 computed

{{str.split('').reverse().join('')}}

計算屬性 :默認只有getter方法

data(){

  return {

    name:'alex',

    age:18

}

}

compuetd:{

      key:value

      計算屬性的方法名:funtion(){

        return ${this.name}他的年齡是${this.age}歲

    }

}

var musicData = [

      {

        id:1,

        name:'於榮光 - 少林英雄',

        author:'於榮光',

        songSrc:'./static/於榮光 - 少林英雄.mp3'

      },

      {

        id:2,

        name:'Joel Adams - Please Dont Go',

        author:'Joel Adams',

        songSrc:'./static/Joel Adams - Please Dont Go.mp3'

      },

      {

        id:3,

        name:'MKJ - Time',

        author:'MKJ',

        songSrc:'./static/MKJ - Time.mp3'

      },

      {

        id:4,name:'Russ - Psycho (Pt. 2)',

        author:'Russ',

        songSrc:'./static/Russ - Psycho (Pt. 2).mp3'

      }

    ];

生命週期(鉤子函數)

beforeCreate(){

    // 組件建立以前

    console.log(this.msg);

},

created(){

    // 組件建立以後

    // 使用該組件，就會觸發以上的鉤子函數，created中能夠操做數據，發送ajax，而且能夠實現vue==》頁面的影響  應用：發送ajax請求

    console.log(this.msg);

    // this.msg = '嘿嘿黑';

},

beforeMount(){

    // 裝載數據到DOM以前會調用

    console.log(document.getElementById('app'));

},

mounted(){

    // 這個地方能夠操做DOM

    // 裝載數據到DOM以後會調用 能夠獲取到真實存在的DOM元素，vue操做之後的DOM

    console.log(document.getElementById('app'));

},

beforeUpdate(){

    // 在更新以前，調用此鉤子，應用：獲取原始的DOM

    console.log(document.getElementById('app').innerHTML);

},

updated(){

    // 在更新以前，調用此鉤子，應用：獲取最新的DOM

    console.log(document.getElementById('app').innerHTML);

},

beforeDestroy(){

    console.log('beforeDestroy');

},

destroyed(){

    console.log('destroyed');

},

activated(){

    console.log('組件被激活了');

},

deactivated(){

    console.log('組件被停用了');

}

$屬性

$refs獲取組件內的元素
$parent:獲取當前組件的父組件
$children:獲取當前組件的子組件
$root:獲取New Vue的實例化對象
$el:獲取組件對象的DOM元素

獲取更新以後的dom添加事件的特殊狀況

$nextTick 是在下次Dom更新循環結束以後執行的延遲迴調，在修改數據以後使用$nextTick ，則能夠在回調中獲取更新以後的DOM

相關標籤/搜索

每日一句

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