[Flycan] 20170418 Vue 筆記

.babelrc

{
  "presets": [
    ["latest", {
      "es2015": { "modules": false }
    }],
   "stage-2"
  ]
}

app.html

<!-- ./src/App.vue -->

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <welcome></welcome>
  </div>
</template>

<script>
import Welcome from './components/WelcomeComponent.vue'
export default {
  name: 'app',
  components: {
    Welcome
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

index.js

// ./store/index.js

// ES6: import [Variable] from 'package'
import Vue from 'vue'
import Vuex from 'vuex'

// ES5
// const Vue = require('vue')

Vue.use(Vuex)

const Welcome = {
	state: {
		msg: 'Welcome to Your Vue.js App'
	}
}

const Essential = {
	state: {
	    title: 'Essential Links',
	    links:[
	      {
	        text:'Core Docs',
	        href:'https://vuejs.org',
	        target:'_blank'
	      },
	      {
	        text:'Forum',
	        href:'https://forum.vuejs.org',
	        target:'_blank'
	      },
	      {
	        text:'Gitter Chat',
	        href:'https://twitter.com/vuejs',
	        target:'_blank'
	      },
	      {
	        text:'Twitter',
	        href:'https://vuejs.org',
	        target:'_blank'
	      },
	    ]
	}
}

const Ecosystem = {
	state: {
	    title: 'Ecosystem',
	    links:[
	      {
	        text:'vue-router',
	        href:'http://router.vuejs.org/',
	        target:'_blank'
	      },
	      {
	        text:'vuex',
	        href:'http://vuex.vuejs.org/',
	        target:'_blank'
	      },
	      {
	        text:'vue-loader',
	        href:'http://vue-loader.vuejs.org/',
	        target:'_blank'
	      },
	      {
	        text:'awesome-vue',
	        href:'https://github.com/vuejs/awesome-vue',
	        target:'_blank'
	      },
	    ]
  	}

}

const store = new Vuex.Store({
	strict: true,
	modules: {
		Welcome,		// Welcome: Welcome 的簡寫
		Essential,
		Ecosystem
	}
})

// ES6
export default store
// ES5
// module.export = store

listCompnent.js

Vue.component('listComponent', {
  template: `
    <section class="main">
      <input class="toggle-all" type="checkbox" v-model="allDone">
      <ul class="todo-list">
        <li class="todo"
          v-for="todo in filteredTodos"
          :class="{
            completed: todo.completed,
            editing: todo == editing}">
          <div class="view">
            <input class="toggle" type="checkbox"
              :checked="todo.completed"
              @click="switchComplete(todo)">
            <label @dblclick="editTodo(todo)">
              {{todo.title}}
            </label>
            <button class="destroy"
              @click="removeTodo(todo)">
            </button>
          </div>
          <input class="edit" type="text"
            v-model="edit"
            v-if="todo == editing"
            v-focus
            @blur="doneEdit(todo)"
            @keyup.enter="doneEdit(todo)"
            @keyup.esc="cancelEdit(todo)">
        </li>
      </ul>
    </section>
  `,
  data: function () {
    return {
      editing: null
    }
  },
  computed: {
    filteredTodos: function () {
      return this.$store.getters.filteredTodos
    },

    // allDone:function(){
    //   return this.$store.getters.allDone
    // }
    allDone: {
      get: function () {
        return this.$store.getters.allDone
      },
      set: function (val) {
        this.$store.commit('allDone', val)
      }
    },
    edit:{
      get:function(){
        return this.editing.title
      },
      set:function(val){
        this.$store.commit('editTitle',{
          target:this.editing,
          value:val
        })
      }
    }
  },
  methods: {
    switchComplete: function (todo) {
      this.$store.commit('switchComplete', todo)
    },
    updateTodo: function (todo) {
      this.$store.commit('update', todo)
    },
    removeTodo: function (todo) {
      this.$store.commit('remove', todo)
    },
    editTodo: function (todo) {
      this.cache = todo.title
      this.editing = todo
    },
    doneEdit: function (todo) {
      if (!this.editing) {
        return
      }
      this.editing = null
      // todo.title = todo.title.trim()
      if (!todo.title) {
        this.removeTodo(todo)
      }
    },
    cancelEdit: function (todo) {
      this.$store.commit('editTitle',{
          target:this.editing,
          value:this.cache
        })
      this.editing = null
    }
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  }
})

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'			// node module 預設回連該 folder 的 index.js
new Vue({
  el: '#app',
  render: h => h(App),
  store
})

store.js

var filters = {
  all: function (todos) {
    return todos
  },
  active: function (todos) {
    return todos.filter(function (todo) {
      return !todo.completed
    });
  },
  completed: function (todos) {
    return todos.filter(function (todo) {
      return todo.completed
    })
  }
}

var localStore = {
  get:function(name){
    return JSON.parse(window.localStorage.getItem(name))
  },
  set:function(name,val){
    window.localStorage.setItem(name,JSON.stringify(val))

  }
}

var store = new Vuex.Store({
  strict: true,
  state: {
    todos:null,
    visibility:undefined
  },
  getters: {
    filteredTodos: function(state) {
      return filters[state.visibility](state.todos)
    },
    remaining: function(state) {
      return filters['active'](state.todos).length
    },
    allDone: function(state){
      return store.getters.remaining === 0
    }
  },
  mutations:{
    init:function(state){
      state.todos = localStore.get('todos') || []
      localStore.set('todos',state.todos)
    },
    allDone: function(state,val){
      state.todos.forEach(function (todo) {
        todo.completed = val
      })
      localStore.set('todos',state.todos)
    },
    add:function(state,data){
      state.todos.push({title:data,completed:false})
      localStore.set('todos',state.todos)
    },
    switchComplete:function(state,data){
      var index = state.todos.indexOf(data)
      state.todos[index].completed = !state.todos[index].completed
      localStore.set('todos',state.todos)
    },
    // update:function(state,data){

    // },
    editTitle:function(state,data){
      var index = state.todos.indexOf(data.target)
      state.todos[index].title = data.value
      localStore.set('todos',state.todos)
    },
    remove:function(state,data){
      var index = state.todos.indexOf(data)
      state.todos.splice(index,1)
      localStore.set('todos',state.todos)
    },
    removeCompleted:function(state){
      state.todos = filters.active(state.todos)
      localStore.set('todos',state.todos)
    },
    filter:function(state,data){
      state.visibility = data
    },
  }
})

WelcomeComponent.html

<!-- ./components/WelcomeComponent.vue  -->

<template>
	<h1>{{ msg }}</h1>
</template>

<script>
	//	import {} from 'vuex' 表示只載入 Vuex 的其中一個 function
	import { mapState } from 'vuex'
	export default {
	  name: 'welcome',	//	建議幫每個 component 都命名
	  computed: {
	    ...mapState({
	      msg: state => state.welcome.msg
	    })
	  }
	}

</script>
<!-- scoped 加上去後，這裡面寫的 CSS 只會限制在這個 component 中 -->
<style scoped>
  h1 {
    font-weight: bolder;
  }
</style>

[Node 安裝]

Node 的安裝建議用 nvm，不要用 node 網站上的安裝包使用。

• nvm for MAC
• nvm for Windows

伺服器也建議安裝 nvm 方便版本更新

[vue cli]

vue init webpack-simple: webpack-simple 是安裝的樣板，如果想要將樣版安裝在新增的資料夾，可以打 vue init webpack-simple <folder>

npm install -g vue-cli
vue init webpack-simple

觀念

• 一個 component 就是一個 .vue

產生的檔案

• /src/main.js 是核心，就是 root，主要 handle render 的動作

Vue 檔的基本樣式：

<template lang=></template>
<script></script>
<style scoped></style>

強化自己的模板

• npm i -S vue-router vuex
• npm i -D babel-preset-stage-2

安裝好後修改 .babelrc 檔案，加上 stage-2

{
  "presets": [
    ["latest", {
      "es2015": { "modules": false }
    }],
    stage-2
  ]
}