vue紹介

3676 ワード
一、Vueは何ですか.
ユーザーインタフェースを構築する漸進的なフレームワークです.Vueはボトムアップ増分開発の設計を採用している.Vueのコアライブラリは、ビジュアルレイヤのみに注目しており、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も容易です.一方、単一ファイルコンポーネントとVueエコシステムでサポートされているライブラリと組み合わせて使用すると、Vueは複雑な単一ページアプリケーションに駆動を提供することもできます.
二、特徴
Vue.jsの核心は、簡潔なテンプレート構文を使用して、DOMにデータをレンダリングすることを宣言することです.

  {{ message }}

 


 




var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

データとDOMが結合され、すべての要素が応答式になっています.
三、指令
条件はループv-if,v-show条件と異なり,v-ifはdomの表示と削除であり,v-showはdisplay:noneのみである.
v-forループ

  
    
    
  1. 
      {{ todo.text }}
    
    2. 
  



var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '   JavaScript' },
      { text: '   Vue' },
      { text: '     ' }
    ]
  }
})

イベントのバインド
v-on: 

  
{{ message }}

  


var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-bind命令は、v-bind:hrefの略称:href;
v-on命令は、DOMイベント形式を傍受するために使用される.例えば、v-on:clickは@clickと略記される.
v-html=""
html:「v-htmlでバインドされ、htmlラベルはレンダリング時に解析されます.」
v-text=""
       text: "  v-text    ,html              。

Data()methods components created vueのライフサイクルは、@click=「test」などのイベントmethodをトリガーしてメソッドを定義するために使用されます.methodsはtestというメソッドを定義します.
ルート
v-router axios
vuex
同期操作をmutations非同期操作にactionsを置く
import axios from 'axios'
export default {
  name: 'projects',
  data: function () {
    return {
      projects: []
    }
  },
  methods: {
    loadProjects: function () {
      axios.get('/secured/projects').then((response) => {
        this.projects = response.data
      }, (err) => {
        console.log(err)
      })
    }
  },
  mounted: function () {
    this.loadProjects()
  }
}

Vuex**ドキュメントの説明による、VuexはVueに適用される.jsアプリケーションのステータス管理ライブラリは、アプリケーション内のすべてのコンポーネントに集中的なステータスストレージと操作を提供し、すべてのステータスが予測可能に変更されることを保証します.VuexでのStoreのテンプレート化の定義は次のとおりです.
import Vue from 'vue'import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: { },
 actions: { },
 mutations: { },
 getters: { }, 
modules: { }
})
export default store

上記のコードには、Vuex Storeを定義する際に重要な5つの属性が含まれています.
state: state             ，                。

state: { projects: [], userProfile: {}}

Actions:Actionsは、コミットトリガ変更情報を定義する記述であり、サービス側からデータを取得し、データ取得が完了するとstoreを呼び出す例が一般的である.commit()は、Storeのステータスの変更を呼び出します.コンポーネントでdispatchを使用してActionsを発行できます.
actions: { LOAD_PROJECT_LIST: function ({ commit }) { 

axios.get('/secured/projects').then((response) => { commit
('SET_PROJECT_LIST', { list: response.data }) }, (err) => { console.log(err) }) } }

mutations:mutationsを呼び出すのは、アプリケーションステータスの更新を許可する唯一の場所です.
mutations: { SET_PROJECT_LIST: (state, { list }) => { state.projects = list } }

getters:Gettersでは、コンポーネントがStoreからデータを取得できます.たとえば、StoreのprojectListから完了したアイテムのリストをフィルタできます.
getters:
{ completedProjects: state => 
{ return state.projects.filter(project => project.completed).length }}

あしば
nologinユーザのコマンド実行
Vueインスタンスのライフサイクル