Vue.js 學習總結

Vue學習記錄

資料綁定

v-model

:資料雙向綁定

v-text

:資料展示

v-html

:資料含有html将會解析

v-bind

:綁定資料屬性

注：v-bind 非常常用，Vue縮寫 ：xxx

v-on

:綁定事件

注：v-on 綁定的事件，可以在Vue内置方法methods中進行邏輯處理 縮寫：@xxxx

邏輯控制

v-if

:接受一個boolean值來控制是否顯示

v-show

：與v-if類似

v-if vs v-show ： 差別就是v-show通過display屬性來控制是否顯示,v-if 通過boolean值來控制顯示

v-for

: 循環條件

内置屬性方法

data

:資料綁定的資料都要在data裡面聲明

methods

:v-on綁定的方法可以在這裡面進行邏輯控制

compute

:能夠把data聲明的屬性進行計算

Vue元件

1. 聲明一個元件

Vue.component('my-component',{template:'<p></p>'})
           

1. 在html裡面聲明這個元件即可

<div id='app'>
    <my-component></my-component>
  </div>
           

1. 在此模闆中引入即可

子元件與父元件之間的通信

子元件向父元件通信（自定義事件）

通過$emit來向上傳遞事件

父元件：

methods:{
    hello:function(param){
      //todo
    }
  }
           

子元件：

somemethod:function(){
    this.$emit('send-to-parent',param)
  }
           

父元件向子元件傳遞事件

通過props屬性來接收這個參數

子元件：

props:[
    'send-to-child' //這裡指定之後就可以使用了
  ]
           

路由(vue-router)

<div id='app'>
    //挂載在app下的元件，符合路由規則，則顯示在router-view中
    <router-view></router-view>
  </div>
           

路由配置：

//1.書寫兩個元件
  const Foo = { template: '<div>foo</div>' }
  const Bar = { template: '<div>bar</div>' }

  //2. 路由表
  const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]

  //3. 建立路由
  const router = new VueRouter({
    routes // （縮寫）相當于 routes: routes
  })

  //4. 挂在使用路由
  const app = new Vue({
    router
  }).$mount('#app')
           

動态路由

使用占位符來比對路由表

const routes = [
      //這裡比對 /foo/1
      { path: '/foo/:id', component: Foo }
    ]
           

注：其中參數儲存在this.$router.params.id

路由嵌套

上面路由配置例子：

//1.書寫兩個元件
    const Foo = { template: '
          //這裡又嵌套了一個<router-view>
          <div id='foo'>
              <router-view></router-view>
          </div>
          ' }
    const Bar = { template: '<div>bar</div>' }

    //2. 路由表
    const routes = [
      //這裡新增一個children 子元件将顯示在foo下的<router-view>中
      //位址比對/foo/yourpath
      { path: '/foo', component: Foo,children:[ path:/yourpath, component:yourcomponent] },
      { path: '/bar', component: Bar }
    ]

    //3. 建立路由
    const router = new VueRouter({
      routes // （縮寫）相當于 routes: routes
    })

    //4. 挂在使用路由
    const app = new Vue({
      router
    }).$mount('#app')
           

以上就是我學習Vue總結出來的常用方法函數指令

• 一個比較好的學習vue的例子 基于Vue的一個背景管理模闆
• vue官方文檔 Vue官方文檔
• Element UI 餓了麼元件庫
• Vue Meterial Vue Material風格元件