我的Vue-1.0學習筆記

時間 2019-11-30

標籤我的 vue 1.0 學習筆記简体版

原文原文鏈接

dVue.js是相似於angular.js的一套構建用戶界面的漸進式框架，只關注視圖層，採用自底向上增量開發的設計。php

Vue.js的代碼須要放置在指定的HTML元素後面。css

關於Vue的數據綁定：html

例子：vue

<div id="app">  {{a}}    </div>

new Vue({

        el:"#app",              //使用選擇器找到綁定數據的模塊

        data:{

            a:"hello world"    //數據內容

        }

})

防止刷新看到花括號的方法：在父元素添加v-cloak 是一個樣式，添加後在CSS裏定義node

[v-cloak]{

Display:none;

}

<span>{{msg}}</span>    ->   v-text       

{{{msg}}}    ->   v-html         // 轉義HTML文本

關於Vue的雙向數據綁定：使用v-modelwebpack

例子：web

<div id="app">

  {{a}}

  <input type="text" v-model="a"/>

</div>

new Vue({

        el:"#app",             

        data:{

            a:"hello world"    //數據內容

        }

    })

若是不想頁面上的數據隨着輸入值改變，能夠加* 輸入改變數據後，頁面不會改變。數據只綁定一次 {{a*}} 頁面加載的時候進行數據綁定，後面數據更改頁面不變化vue-router

HTML轉意輸出 {{{msg}}} 在js中定義的HTML語法，會直接在頁面生成vue-cli

例子;typescript

<div id="app">

  {{a*}}

  <input type="text" v-model="a"/>

</div>

關於Vue的事件綁定：使用v-on

後面跟各類事件：v-on:click/mouseout/mouseover/dblclick/mousedown.....

能夠簡寫爲 @click=""

例子：v-on:click="函數"

事件對象: $event 封裝了的事件event 表示當前鼠標點擊對象

@click="show($event)"

事件冒泡:

阻止冒泡: 在事件後面加上 .stop

ev.cancelBubble=true; 使用 $event 後定義在方法中

@click.stop推薦 @click.stop=「方法」原生寫法

默認行爲(默認事件): 在事件後面加上 .prevent

阻止默認行爲:

ev.preventDefault();

@contextmenu.prevent推薦

鍵盤事件:

@keydown 敲打鍵盤任意鍵觸發（顯示前）後面能夠直接.序號表示按某個鍵@keyup 敲打鍵盤任意鍵觸發（顯示後）

$event.keyCode 鍵盤觸發事件對象，即該按鍵的序號在方法中傳入事件對象

經常使用鍵:

回車

a). @keyup.13 // 13表示按鍵的鍵盤序號

b). @keyup.enter 推薦

上、下、左、右

@keyup/keydown.left

@keyup/keydown.right

@keyup/keydown.up

@keyup/keydown.down

.....

自定義鍵盤信息:

Vue.directive('on').keyCodes.ctrl=17; // ctrl 是按鍵名稱

//聲明某個按鍵的序號，便可以在後面使用@keydown /@keyup .按鍵名調用

關於Vue的事件綁定：使用v-bind

v-bind:src="" 後面跟各類屬性，如src/class/style.....

簡寫: :src="url" 後面能夠直接寫data裏的數據名稱

Class後面帶的能夠是一個數組，也能夠是一個對象，或者直接一個json文件

例子：

<strong :class="json">文字...</strong>

 <strong :class="[e,red]">文字...</strong>

<strong :class="{red:true,blue:false}">文字...</strong>

關於Vue的列表輸出：使用v-for

至關於angular的ng-repeat，不過不須要var

例子：

    <ul>

        <li v-for="n in todos">{{n.text}}</li>

    </ul>

new Vue({

    el:".app",

    data:{

        todos:[

            {text:"第一個數據"},

            {text:"第二個數據"},

            {text:"第三個數據"},

        ]

    }

})

$index :表示遍歷的索引下標，默認從0開始

$key：表示遍歷json數組時的key值

v-for="(k,v) in json" 這樣的寫法會在頁面同時輸出key值和value值

當數組數據有重複時，使用v-for會報錯，須要添加track-by='$index/uid'

關於Vue的條件判斷：使用v-if v-else 控制元素顯示或者隱藏

例子：

<div v-if="true">爲true時顯示</div>

<div v-else>不然這個顯示</div>

v-show:相似於v-if 不過隱藏時也會佔據頁面空間

v-on: 綁定一個事件,後面跟隨觸發類型

例子：

 <button v-on:click="revr">Reverse Message</button>

var app5 = new Vue({

  el: '#app-5',

  methods: {

    revr: function () {

      this.message = this.message.split('').reverse().join('')   //使用Vue內部的變量，須要使用this

    }

  }

})

關於Vue的過濾器：跟angular同樣也是使用數據|格式

vue提供過濾器 : capitalizeuppercasecurrency....

數組數據配合使用的過濾器:

limitBy：限制幾個即數組遍歷顯示的時候限制顯示幾個，後面帶兩個參數

limitBy 取幾個從哪個下標開始如：limitBy 2 3

filterBy：過濾數據，將包含某個數據的內容顯示

filterBy 包含的內容如：filterBy a

orderBy：排序，將數組內容排序顯示，後面兩個參數

1表示正序，-1表示倒序

orderBy 按照什麼排序 1/-1 如： orderBy 'o'

例子：

{{data | uppercase}}     //轉化爲大寫

val in arr | limitBy 2   //只顯示兩個數據

val in arr | filterBy a   //只顯示包含數據a的內容

val in arr | orderBy 'o'   //以o數據位置爲標準進行排序顯示

Vue.filter:自定義轉化格式,，須要在js中使用Vue.filter定義，能夠改變數據的格式、內容等

Vue.filter('name', function (value) { //定義格式轉化名稱name，傳入參數值value

return value.split('').reverse().join('') //從新定義數據內容並return 返回

})

時間過濾器：

        Vue.filter('date',function(input){

            var oDate=new Date(input);

            return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();

        });

雙向過濾器：使用在v-modul 綁定數據的過濾

Vue.filter('filterHtml',{

            read:function(input){                          //model-view    

                return input.replace(/<[^<]+>/g,'');

            },

            write:function(val){                       //view -> model   

                return val;

            }

});

關於Vue的數據交互：引入: vue-resource

引入vue-resource.js文件，使用this.$http

get方式:

獲取一個普通文本數據：不須要傳參數的時候

this.$http.get('aa.txt').then(function(res){

    alert(res.data);

},function(res){

    alert(res.status);

});

then（） : 裏面跟兩個方法，第一個爲請求成功，第二個爲失敗

res：傳入方法內，表示請求返回的數據

res.data：表示請求返回的數據內容

給服務發送數據：須要傳參數的時候

   this.$http.get(this.$root.api+'/Index/Staff/training',{params:{    //傳遞的參數必須爲一個對象，使用params

    subject_field_id:1,        //表示傳參數過去，值爲1

    train_state:2

}}).then(function(res){

     console.log(res.data);

},function(res){

    alert(res.status);

});

get():請求方式括號內帶一個對象，對象內容爲傳過去的參數

post方式：在請求方式括號內增長一個對象 { emulateJSON:true }

this.$http.post('post.php',{

    a:1,

    b:20

},{

    emulateJSON:true

}).then(function(res){

    alert(res.data);

},function(res){

    alert(res.status);

});

jsonp方式：跨域請求，請求地址爲外域網站

https://sug.so.360.cn/suggest?callback=suggest_so&word=a

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{

    wd:'a'      //傳過去的參數

},{

    jsonp:'cb'    //更改callback名字，默認名字就是"callback"

}).then(function(res){

    alert(res.data.s);

},function(res){

    alert(res.status);

});

第四種方式：默認是get提交

this.$http({

url:地址

data:給後臺提交數據,

method:'get'/post/jsonp    提交方式

jsonp:'cb'       //cbName       若是是jsonp提交方式，聲明名稱

});

關於Vue的生命週期：vue內部執行過程

new Vue({})聲明瞭一個對象，也叫鉤子函數

Vue內部會本身經歷四個階段：能夠在後面跟方法

created：當new Vue執行後，即實例已經建立時執行

beforeCompile：當開始編譯HTML頁面全部的Vue語法以前執行

compiled：當編譯HTML頁面全部的Vue語法結束以後執行

ready：當編譯結束後把全部元素掛到Dom樹，即插入到文檔中後執行

Vue能夠經過new聲明建立，也能夠進行銷燬，使用$destroy

銷燬後會經歷兩個階段：

beforeDestroy: 銷燬以前

destroyed: 銷燬以後

例子：

var vm=new Vue({ });

        document.onclick=function(){   

            vm.$destroy();      /*點擊頁面銷燬vue對象*

        };

關於Vue的計算屬性：相似data數據

一樣是一個數據，不事後面跟的是function的寫法，放置邏輯代碼，使用return返回值，沒有使用return返回值，則該數據爲空

通常狀況下，只使用get返回的數據，沒法在後期經過其餘辦法更改值

* computed裏面能夠放置一些業務邏輯代碼，必定記得return

有兩種寫法：

computed:{

b:function(){        //默認調用get

return 值

}

}

完整寫法：

       computed:{

                b:{

                    get:function(){       

                        return this.a+2;

                    },

                    set:function(val){      //必須傳入一個值

                        this.a=val;

                    }

                }

            }

監聽數據變化 : vm.$watch 監聽某個數據，發生改變時執行方法

vm.$watch(name,function); //name表示監視的數據名稱，後面帶方法

vm.$watch(name,fnCb,{deep:true}); //深度監視，監視對象是數組

關於Vue的實例簡單方法：

由於var vm=new Vue({})等於實例化一個對象，因此能夠經過 . 訪問它的各個值

vm.$el-> 就是元素，能夠直接獲取el後面選擇器的整個元素內容

vm.$data -> 就是data，獲取data裏的全部數據，返回數組

vm.$destroy-> 銷燬對象

vm.$log();-> 查看如今數據的狀態，即在控制檯輸出全部數據

vm.$mount -> 手動掛在vue程序，當沒有聲明el:」控制器」時使用

例子：

   var vm=new Vue({

            data:{

                a:1,

                b:2

            }

        }).$mount('#box');

vm.$options-> 獲取自定義屬性，即定義的各個數據或方法寫在外部

例子：

 var vm=new Vue({

            aa:11,                 //自定義屬性,

            show:function(){

                alert(1);

            },

            data:{

                a:1

            }

        }).$mount('#box');

        vm.$options.show();

        console.log(vm.$options.aa);

關於Vue的自定義指令：Vue.directive

相似v-text v-for v-html 都稱爲Vue的指令，即擴展的html語法

能夠經過Vue.directive自定義這些指令

  Vue.directive('red',function(a){            //red爲自定義的指令的名稱

            this.el.style.backgrund='red';   //this.el指使用該指令的元素

        });

 <span v-red>  內容  </span>       //指令名稱爲red，這裏須要使用v-

指令後面能夠帶參數，例如 v-text=「a」

a至關於在自定義的function傳入的參數

自定義元素指令:（用處不大） Vue.elementDirective

Vue.elementDirective('zns-red',{    //自定義HTML標籤zns-red

    bind:function(){

        this.el.style.background='red';   //定義該標籤做用

    }

});

<zns-red></zns-red>

關於Vue的動畫：引入animate.css

最基本的動畫：

//給須要添加動畫的元素添加transition="名稱"

例子：

<div id="div1" v-show="bSign" transition="fade"></div>  

//在css樣式裏面進行定義

<style>

.fade-transition{  transition : 1s all ease; }   //定義動畫時間

.fade-enter{ opacity: 0;  }    //進入的動畫

.fade-leave{ opacity: 0; transform: translateX(200px); }  //離開的動畫

</style>

推薦使用的動畫：引入animate.css

animate.css是一個css動畫庫，能夠在百度上直接下載，在頁面引入

//給須要添加動畫的元素添加transition="名稱" class=」animated」

例子：

<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>

//在new Vue裏面聲明transitions對象並定義動畫

new Vue({

el:'#box',

transitions:{           

bounce:{         //動畫的名稱

enterClass:'zoomInLeft',    

 //進入時使用的動畫的class，參考animate.css書冊

leaveClass:'zoomOutRight'    //離開時使用的動畫的class

}

}

});

關於Vue的組件：Vue.extend Vue.component

vue組件:其實就是一個大的對象，例如new Vue就是一個組件

1. 全局組件 Vue.component定義在外部爲全局組件

兩種書寫方式：

*組件裏面放數據 : data必須是函數的形式，函數必須返回一個對象(json)；事件不變

<div id="box">  <aaa></aaa>  </div>   //自定義的HTML標籤

<script>

var Aaa=Vue.extend({                 //  賦值給變量Aaa

data(){

return {    //組件內部的數據以對象的形式，須要return返回

msg:'ddddd'       //定義數據

}

}

 

template:'<h3>{{msg}}</h3>'    //使用Vue.extend定義一個模版，

});                                    

Vue.component('aaa',Aaa);        //使用Vue.component將aaa綁定到Aaa

//Vue.component定義在外部爲全局組件

綁定後頁面使用<aaa></aaa>至關於<h3>我是標題3</h3>

var vm=new Vue({

el:'#box',

data:{

bSign:true

}

});

</script>

第二種書寫方式：

Vue.component('my-aaa',{    //綁定

template:'<strong>好</strong>'   //定義模版

});

var vm=new Vue({

el:'#box'

});

2. 局部組件 Vue.component定義在某個組件爲局部組件

var Aaa=Vue.extend({                 //  賦值給變量Aaa

data(){

return {    //組件內部的數據以對象的形式，須要return返回

msg:'ddddd'       //定義數據

}

}

template:'<h3>{{msg}}</h3>'    //使用Vue.extend定義一個模版，

});

var vm=new Vue({

el:'#box',

components:｛       //在new Vue裏面將aaa綁定到Aaa，爲局部組件

「aaa」 : Aaa

｝

});

第二種書寫方式：

var vm=new Vue({

el:'#box',

components:{

'my-aaa':{         //自定義的標籤,<my-aaa></my-aaa>

data(){

return {

msg:'welcome vue'   

}

},

methods:{

change(){

this.msg='changed';

}

},

template:'<h2 @click="change">標題2->{{msg}}</h2>'

}     //定義模版

}

});

配合模版：定義的模版比較複雜時，能夠在其餘位置定義，

而後在template綁定id

兩種書寫方式：

第一種.

<script type="x-template" id="aaa">

<h2 @click="change">標題2->{{msg}}</h2>

</script>

第二種.

 <template id="aaa">

<h1>標題1</h1>

<ul><li v-for="val in arr">{{val} }</li> </ul>

</template>

動態組件：能夠經過js動態更改頁面上的組件模版

<component :is="組件名稱"></component>

<component :is="a"></component>

<script>

var vm=new Vue({

el:'#box',

data:{

a:'aaa'

},

components:{

'aaa':{  template:'<h2>我是aaa組件</h2>'  },  //定義模版

'bbb':{   template:'<h2>我是bbb組件</h2>' }

}

});

</script>

組件的嵌套：組件裏面能夠嵌套另外一個組件

var vm=new Vue({

el:'#box',

 

components:{     //父級組件

'aaa':{

template:'<h2>我是aaa組件</h2><bbb></bbb>',  

 //子級組件定義的標籤在父級模版使用

components:{    //子級組件

'bbb':{  template:'<h3>我是bbb組件</h3>' }

}

}

}

});

組件之間的數據交互：

子組件獲取父組件的數據：props

:mmm.sync表示同步數據，即子組件數據改變，父組件數據也改變

<template id="aaa">           //父組件的模版

<h1>11111</h1>      

<bbb :mmm="msg2"></bbb>  //子組件的內容，msg2爲父組件的數據，綁

</template>                                           定到自定義的名稱上

components:{       //這個爲子組件

'bbb':{

props:['mmm'],         //使用props 自定義名稱  mmm

template:'<h3>我是bbb組件->{{mmm}}</h3>' //使用自定義的名稱

}

父組件獲取子組件的數據：vm.$emit(事件名,數據);

須要子組件本身觸發事件發射數據

<template id="aaa">

<span>我是父級 -> {{msg}}</span>

<bbb @child-msg="get"></bbb>  //使用定義的事件名，觸發父組件的方法

</template>

<template id="bbb">

<h3>子組件-</h3>

<input type="button" value="send" @click="send">  //觸發事件發射數據

</template>

methods:{   get(msg){ this.msg=msg;} //父組件的方法，接收子組件發射的數據

methods:{         

send(){  this.$emit('child-msg',this.a);  } //子級組件內的一個方法，使用$emit

}                            // child-msg爲事件名，this.a爲子組件的數據

<slot></slot> ：保留組件模版內本來的HTML文本

組件內部的HTML文本默認會被定義的模版內容覆蓋，使用slot能夠保留本來的HTML文本，當須要多個slot分別表明多個HTML文本時，能夠設置slot值和name值一致

例子：

<ul slot="ul-slot"></ul>    <slot name="ul-slot"></slot>

關於Vue的路由跳轉：<router-view></router-view>

須要在頁面引入vue-router文件，而後在自定義的js文件中配置路由

例子：

<div id="app">

  <p>

    <!-- 使用 router-link 組件來導航. -->

    <!-- 經過傳入 `to` 屬性指定連接. -->

    <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->

    <router-link to="/foo">Go to Foo</router-link>  

    <router-link to="/bar">Go to Bar</router-link>

  </p>

  <!-- 路由匹配到的組件將渲染在這裏 -->

  <router-view></router-view>

</div>

<script>

const Foo = { template: '<div>foo</div>' }   // 定義（路由）組件並編寫HTML內容

const Bar = { template: '<div>bar</div>' }  // 能夠從其餘文件 import 進來

 

// 2. 定義路由

const routes = [

  { path: '/foo', component: Foo },  //定義路由的名稱，以及路由跳轉的位置

  { path: '/bar', component: Bar }

]

// 3. 建立 router 實例，而後傳 `routes` 配置

const router = new VueRouter({

  routes               // （縮寫）至關於 routes: routes，後面也能夠跟一個對象數組

})

// 4. 建立和掛載根實例。頁面的data數據內容以及methods方法在這裏面編寫

const app = new Vue({

  router

}).$mount('#app')

</script>

關於Vue使用了腳手架後自動建立環境的路由跳轉：

Vue.js提供了本身的腳手架vue-cli，用於自動生成vue.js模板工程。即便用該腳手架會自動安裝好webpack打包須要的全部模塊等等。安裝vue-cli以前，須要先安裝了vue和webpack。

安裝vue-cli步驟：在命令行輸入如下指令

npm install -g vue-cli //全局安裝vue-cli

vue init webpack projectName //生成項目名爲projectName的模板，這裏的項目名能夠自定義

cd projectName //打開模板

npm install //初始化安裝依賴

npm run dev //運行項目可自動打開項目並實時更新

npm run build //執行發佈打包爲代碼編寫完成後的最後步驟

代碼編寫：

初始化安裝依賴後項目目錄以下：

Index.html文件爲總頁面。須要從外部引入的css等文件在這裏引入

打開src文件夾，

Components文件夾內的各個vue文件爲各個單頁面，各單頁面在這個文件夾裏面編寫，樣式和js代碼所有寫在一塊兒。

//HTML代碼編寫在<template>標籤的div內，必須使用一個div做爲父容器

//js代碼編寫在<script>標籤的export default 對象裏面，data數據須要return到外部纔可使用，事件對象仍是寫在methods對象裏面

//該頁面的樣式所有寫在<style>標籤裏面

例子：

<template>

  <div id="app">                                

    <router-link to="/bar">Go to Bar</router-link>

    <router-link to="/">Go to main</router-link>

  </div>

</template>

<script>

export default {

  name: 'app',

  data () {

    return {

             todos:[

            {text:"sddfsdf"},

            {text:"dsf"},

            {text:"sdfsdf"},

        ],

   message:"IS my work"

    }

  },

methods:{

    revr: function () {

      this.message = this.message.split('').reverse().join('')   

    }

}

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

}

</style>

Router文件內有一個index.js文件，裏面編寫的是該項目的路由

使用import從外部引入各個單頁面文件（vue文件），不須要加vue後綴

在routes對象數組內設置路由，每一個路由爲一個對象

例子：

import Vue from 'vue'

import Router from 'vue-router'

import Hello from 'components/Hello'

import Foo from 'components/Foo'     //引入單頁面文件

import Bar from 'components/Bar'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'Hello',

      component: Hello,

    },

{

  path: '/foo',

      name: 'Foo',

      component: Foo

 },

{                               //配置路由

  path: '/bar',                    //路由的連接

      name: 'Bar',                  

      component: Bar                  //路由的名稱

 }

  ]

})

App.vue文件爲頁面默認跳轉頁面。能夠根據狀況修改內容

關於如何在vue-cli裏面配置默認路徑的簡寫方式：

在build文件夾中的webpack.base.conf.js中，alias裏進行相關配置

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'base': path.resolve(__dirname, '../src/sass/base/_base.scss')
    }
  },

集成vue+ts 開發環境配置

1.完成vue-cli 下載後，安裝TypeScript相關依賴和項目其他依賴

# npm install typescript ts-loader --save-dev
# npm install

安裝官方插件vue-class-component，vue-property-decorator

npm install vue-class-component，vue-property-decorator --save-dev

2.修改目錄下bulid/webpack.base.conf.js文件，在文件內module>rules添加如下規則

{
  test: /\.tsx?$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/],
  }
},

修改入口文件

entry: {
 app: './src/main.ts'
}

resolve部分

extensions: ['.js', '.vue', '.json', '.ts', '.tsx']

3.在src目錄下新建一個文件vue-shims.d.ts，用於識別單文件vue內的ts代碼

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

4.在項目根目錄下創建TypeScript配置文件tsconfig.json

{
 "include": [
 "src/**/*"
 ],
 "exclude": [
 "node_modules"
 ],
 "compilerOptions": {
 "allowSyntheticDefaultImports": true,
 "experimentalDecorators": true,
 "allowJs": true,
 "module": "es2015",
 "target": "es5",
 "moduleResolution": "node",
 "experimentalDecorators": true,
 "isolatedModules": true,
 "lib": [
  "dom",
  "es5",
  "es2015.promise"
 ],
 "sourceMap": true,
 "pretty": true
 }
}

5.重命名src下的main.js爲main.ts， .vue文件的<script>改成 <script lang="ts">

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import { Watch } from 'vue-property-decorator'
  @Component
  export default class Hello extends Vue {
    msg: string = 'this is a type'

  get productIdsString() {
    const arr = [1,2,3,4]
    return arr.join('_')
  }

  @Watch('msg')
    onSidChange() {
    this.tets()
  }

    tets() {
      alert('dsdsd')
    }

    cheng() {
      this.msg = '45654654654'
    }
  }
</script>

如何將vue文件中的css 和 js 分離

1. js中引入 Component 和vue文件

import { Watch, Component } from 'vue-property-decorator'

　import Template from './HelloWorld.vue'　　　　

2.在 Component中聲明引入的vue文件

@Component({
  mixins: [Template],
})

3 路由引入直接指定到目錄便可

import HelloWorld from '@/components/Hello'

相關標籤/搜索

每日一句

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