山东大学项目实训（三）——vue学习之常规语法

在前段时间的学习中，我主要学习了vue这一框架的思维和好处，同时落于实处，完成了vue的安装，准备工作准备就绪。在此之后，需要进一步的学习vue相关的语法知识。

1. Vue 实例

每个 Vue 应用程序都是通过创建一个 Vue 实例开始的。Vue 实例的创建语法如下：

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

2. 模板语法

2.1 插值

Vue 提供了简洁的模板语法，使用双花括号 {{}} 进行插值操作：

<div id="app">
  {{ message }}
</div>
简写形式：

<div :title="message">
  鼠标悬停几秒钟查看此处动态绑定的提示信息！
</div>

3. 指令

指令（Directives）是带有 v- 前缀的特殊属性，用于在模板中声明响应式行为。

3.1 条件渲染

使用 v-if 指令：

<p v-if="seen">现在你看到我了</p>
使用 v-else 指令：

<p v-if="seen">现在你看到我了</p>
<p v-else>现在你看不到我了</p>

3.2 列表渲染

使用 v-for 指令渲染一个列表：

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

3.3 事件处理

使用 v-on 指令监听 DOM 事件：

<button v-on:click="doSomething">点击我</button>
简写形式：

<button @click="doSomething">点击我</button>

4. 计算属性和侦听器

4.1 计算属性

计算属性是基于它们的依赖进行缓存的。只有相关依赖发生变化时，才会重新计算：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
});

4.2 侦听器

侦听器用于在数据变化时执行异步或开销较大的操作：

var app = new Vue({
  el: '#app',
  data: {
    question: '',
    answer: '我无法回答你的问题，直到你提出问题！'
  },
  watch: {
    question: function (newQuestion, oldQuestion) {
      this.answer = '正在等待你停止输入...'
      this.getAnswer()
    }
  },
  methods: {
    getAnswer: _.debounce(function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = '问题通常包含一个问号。'
        return
      }
      this.answer = '思考中...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }, 500)
  }
})

5. 组件

组件是 Vue.js 最强大的功能之一。它们扩展了 HTML 元素，封装可重用的代码。

5.1 定义组件

全局注册组件：

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});
局部注册组件：

var Child = {
  template: '<div>A custom component!</div>'
}

new Vue({
  components: {
    'my-component': Child
  }
})

5.2 使用组件

在模板中使用已注册的组件：

<ol>
  <todo-item v-for="item in groceryList" :todo="item" :key="item.id"></todo-item>
</ol>

6. 父子组件通信

6.1 父组件向子组件传递数据

通过 props 向子组件传递数据：

Vue.component('child', {
  props: ['message'],
  template: '<span>{{ message }}</span>'
});

6.2 子组件向父组件发送消息

通过 $emit 触发自定义事件向父组件发送消息：

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="incrementCounter">{{ count }}</button>',
  methods: {
    incrementCounter: function () {
      this.count += 1
      this.$emit('increment')
    }
  }
});

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
});
HTML 部分：

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
 

7. Vue Router

Vue Router 是 Vue.js 官方的路由管理器，适用于构建单页面应用。

7.1 安装 Vue Router

npm install vue-router

7.2 定义路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
 

7.3 使用路由

在模板中使用 router-link 和 router-view：

<div id="app">
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view></router-view>
</div>

8. Vuex

Vuex 是 Vue.js 应用的状态管理模式，适用于管理共享状态。

8.1 安装 Vuex

npm install vuex

8.2 定义状态管理器

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

8.3 使用状态管理器

在组件中访问和修改状态：

export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    }
  }
}
在模板中使用：

<div>{{ count }}</div>
<button @click="increment">Increment</button>