Vue2.0学習ノート

25457 ワード

vue.js

Vueオブジェクトインスタンス

例

アクセスインスタンス属性と方法

Vue基本概念

グローバルapi

Vueuse

Vuecomponent

Vueextend

オプションVueインスタンスオブジェクトで使用できるオプションの作成

data

template

methods

インスタンス属性メソッドVueインスタンスが呼び出すことができる属性メソッド

vmdata

vmel

vmonvmemit

命令

v-text

v-html

v-show

v-if v-else v-else-if

v-for

v-on

内蔵コンポーネント

アセンブリ

テンプレート構文

リストレンダリング

classとstyle

条件レンダリング

イベントプロセッサ

フォームコントロールバインド

計算属性

遷移効果

カスタムコンポーネント

プラグイン

awesome vue多くのvue試用プラグイン

タイムプラグインvue-date-picker

シングルファイルコンポーネント

vue-cli

es6

vue-router

動的ルーティング構成

ネストルーティング

プログラミングナビゲーション

ネーミングルーティング

ネーミングビュー

リダイレクト

HTML 5 Historyモード

router-link

router-view

ルーティング情報オブジェクト

Vuex

State

Mutations

Actions

Getters

Modules

vue-resource

json-server

問題

template内蔵コンポーネント

dataの中のデータalisttrue bはlist属性が全くなくループの下で値が取れないなぜifがtrueまたは他の

であると判断したのか.

矢印関数のthisは、親コンテキスト

をバインドする方法をどのように理解するかを示します.

Vue2
Vueオブジェクトインスタンス
≪インスタンス｜Instance｜emdw≫

var vm =  new Vue()

/* eslint-disable no-new */
new Vue()

var vm =  new Vue({
  el: '#app',  //    
  template: '', //     
  components: { App },
  data: { 
    a: 1 
  }
})

インスタンスのプロパティとメソッドへのアクセス

//vm.a       data  
//vm.$data.a       $    vm        
var vm =  new Vue({
  el: '#app',
  template: '',
  components: { App },
  data: { a: 1}
})
console.log(vm.$data.a) // 1
console.log(vm.a)  // 1

Vueの基本概念
グローバルapi
Vue.use

//   Vue.js      :vue-resource  
import vueResource from 'vue-resource'

Vue.use(vueResource);

Vue.component

//           
Vue.component( 'jianjun', {
  template: '      {
     { msg }}
',
  data(){
    return {
      msg: '        '
    }
  }
})

//     ，           
Vue.component('my-component', Vue.extend({ /* ... */ }))

//     ，        （     Vue.extend）
Vue.component('my-component', { /* ... */ })

//        （       ）
var MyComponent = Vue.component('my-component')

Vue.extend

//     Vue    ，    “  ”。
//data      ，     -   Vue.extend()

オプション(Vueインスタンスオブジェクトを作成するために使用できるオプション)
すべてのライフサイクルフックはthisコンテキストをインスタンスに自動的にバインドするので、データにアクセスして属性とメソッドを演算することができます.これは、矢印関数を使用してライフサイクルメソッド(created:()=>thisなど)を定義できないことを意味します.fetchTodos()).これは、矢印関数が親コンテキストをバインドしているため、thisはあなたが期待しているVueインスタンスとは異なります.FetchTodosの動作は定義されていません.
data

var data = { a: 1 }
//         
var vm = new Vue({
  data: data
})
vm.a // -> 1
vm.$data === data // -> true
// Vue.extend()   data      
var Component = Vue.extend({
  data: function () {
     
    return { a: 1 }
  }
  //  
  data () {
    return { a: 1 }
  }
})

var vm = new Vue({
  el: '#app', //             DOM      Vue        。    CSS    ，       HTMLElement   。
  template: xxx,
  components: xxx,
  data: {
    xxx
  }
})

template

var vm = new Vue({
    el: xxx,
    template: '', //          Vue        。
    components: {  },
    data: {
      xxxx
    }
})

methods

//methods       Vue    。
var vm = new Vue({
    el: xxx
    components: xxx
    data (){
        xxxx
    }
    methods: {
      say: function () {
     
        console.log("   ,   !")
      }
    }
})
vm.say() //       VM         ，           。

インスタンスのプロパティ/メソッド(Vueインスタンスが呼び出せるプロパティ/メソッド)
vm.$data Vue 。Vue data 。
vm.$el Vue DOM 。
vm.$on、vm.$emit

vm.$on現在のインスタンス上のカスタムイベントをリスニングします.イベントはvm.$Emitトリガ.コールバック関数は、すべての受信イベントトリガ関数の追加パラメータを受信します.

vm.$Emitは、現在のインスタンス上のイベントをトリガーします.追加のパラメータは、リスナーコールバックに渡されます.

vm.$on('test', function (msg) {
     
 console.log(msg)
})
vm.$emit('test', 'hi')
// -> "hi"

//         ↓↓↓↓↓↓↓↓
var vm = new Vue({
    el: xxx,
    data:{
        sum: 0
    },
    methods:{
        play(){
            this.$emit('diy')
        },
        sayTotal(){
          this.sum += 1
        }
    }
})
vm.$on('click', function () {
     
  vm.sayTotal()
})

<p @diy="sayTotal">{
     { sum }}p>
<button @click="play">   button>

インストラクション
v-text

//js
var vm = new Vue({
  el: '#app',
  data: {
    msg: '     ',
    msg2: '   !'
  }
})

// html
"app">
 <p v-text="msg">p>
  <p>{
     { msg }}p>
  <p v-text="msg2">p>
  <p>{
     { msg2 }}p>
div> 
     ---        
       
       
    ! 
    ! 
  v-html 
  //js
var vm = new Vue({
  el: '#app',
  data: {
    msg: '     ',
    msg2: '   !'
  }
})
  //html
"app">
  <p v-html="msg">p>
  <p v-html="msg2">p>
div> 
     ---         
       
    ! 
  v-show 
     v-if      ，v-for       v-if   。 
  //         ，      display CSS   。
"app">
  <p v-show="true">     p>
  <p v-show="false">     p> 
div> 
  v-if 、v-else 、v-else-if 
  //                。              /         。      
//               。
"app">
  <p v-if="false">     1p>
  <p v-else>     2p>
  <p v-if="false">     3p>
  <p v-else-if="false">     4p>
  <p v-else>     5p>
div>
 
  //   
if(){
    :     1
}else{
    :     2

}

if(){
    :     3
}else if(){
    :     4
}else{
    :     5
}
  
v-for //js
var vm = new Vue({
  el: '#app',
  data: {
    sayList:[
      { msg: '   ,   ! x1' },
      { msg: '   ,   ! x2' },
      { msg: '   ,   ! x3' },
      { msg: '   ,   ! x4' },
      { msg: '   ,   ! x5' },
    ]
  }
})
  
<div id="app">
  <p>  :       !p>
  <p v-for="say in sayList">  : {
     { say.msg }}p>
  <p v-for="(say, index) in sayList" >  : {
     { say.msg }} | {
     { index }}p>
div>
  //  
  :       !p>
<p>  :    ,   ! x1p>
<p>  :    ,   ! x2p>
<p>  :    ,   ! x3p>
<p>  :    ,   ! x4p>
<p>  :    ,   ! x5p>

<p>  :    ,   ! x1 | 0p>
<p>  :    ,   ! x2 | 1p>
<p>  :    ,   ! x3 | 2p>
<p>  :    ,   ! x4 | 3p>
<p>  :    ,   ! x5 | 4p>
  
v-on 
   トランスファゲート


<button v-on:click="sayA">     button>
<button @click="sayA">     button>
<button @click="sayA('   ',$event)">     button>


<button @click.stop="sayA">    button>
<button @click.prevent="sayA">      button>
<input type="text" @submit.prevent> 
<button @click.stop.prevent="sayA">     button>
<input @keyup.enter="sayA">
<input @keyup.13="sayA">
<button @click.once="sayA">          button>


<button v-on="{ mousedown: sayA, mouseup: sayB}">button>
  


<div id="on-click">
   <p>{
     { total }}p>
   <jianjun v-on:diy-son="eatTotal">jianjun>
div>
  //      js  
Vue.component('jianjun', {
  template: '',
  data() {
    return {
      counter: 0
    }
  },
  methods:{
    eat(){
      this.counter+=1
      this.$emit('diy-son')
    }
  }
})
//     Vue     
var vm = new Vue({
    el: '#on-click',
    data: {
        total: 0,
    },
    methods:{
        eatTotal(){
            this.total += 1
        }
    }
})
  
サブコンポーネントのカスタムリスニングがどのように  されるかではなく、$on、v-on、$emitの3つの  が  になっていることに  してください. v-bind 
  
 み みコンポーネント
コンポーネント
テンプレート  
リストレンダリング
classとstyle
   きレンダリング
イベントプロセッサ
フォームコントロールのバインド
  プロパティ
トランジションエフェクト
カスタムコンポーネント
プラグイン
awesome vue(vue  プラグインがたくさんあります)
タイムプラグイン(vue-date-picker)
シングルファイルコンポーネント
vue-cli 
es6 
vue-router 
  ルーティング  
ネストされたルーティング
プログラミングナビゲーション
ネーミングルーティング
   きビュー
リダイレクト
HTML 5 Historyモード
router-link 
router-view 
ルーティング  オブジェクト
Vuex 
State 
Mutations 
Actions 
Getters 
Modules 
vue-resource 
json-server 
に

NuGetグローバルパッケージキャッシュの場所を変更する

3桁ごとに区切りつつ、小数点以下3桁までを表示しつつ、小数点以下は無駄に0を表示したくない

Vue2.0学習ノート

v-html

v-show

v-if 、v-else 、v-else-if

data a.list=true b list :if true

this ,