Vue基础及工程化开发

开发环境

依赖库

• NodeJS
• Webpack
• vue-cli
• Vue.js

安装过程

$ cnpm install --global vue-cli
$ vue init webpack my-project
$ cd my-project
$ cnpm install
$ cnpm run dev

Vue模板语法

插值

• 文本 {{ msg }}
• 原始 HTML v-html="rawHtml"
• 特性 v-bind:id="dynamicId"
• 使用 JavaScript 表达式 {{ ok ? 'YES' : 'NO' }}

指令

指令(Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式.

• 参数 <a v-bind:href="url">...</a>
• 动态参数 <a v-bind:[attributeName]="url"> ... </a>
• 修饰符 <form v-on:submit.prevent="onSubmit">...</form>

缩写

• v-bind 缩写 :href
• v-on 缩写 @

计算属性和侦听器

计算属性

对于任何复杂逻辑都应当使用计算属性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。计算属性默认只有 getter ，不过在需要时可以提供 setter 。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

侦听器

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时最有用。

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  }
})
</script>

Vue组件

组件（Component）可以扩展 HTML 元素，封装可重用的代码。data 必须是一个函数。Prop 是在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。每个组件必须只有一个根元素。

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

Vue路由-Vue Router

使用 Vue.js 可以通过组合组件来组成应用程序。把 Vue Router 添加进来需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染。可以在任何组件内通过 this.$router 访问路由器。

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <router-view></router-view>
</div>

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

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

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
const app = new Vue({
  router
}).$mount('#app')


// 组件内通过 this.$router 访问路由器
export default {
  computed: {
    username () {
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

Vue状态管理-Vuex

Vuex 应用的核心就是 store（仓库）。“store” 包含着应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

• Vuex 的状态存储是响应式的
• 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation

//Vuex定义
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
//Vuex提交
store.commit('increment')
console.log(store.state.count) // -> 1