Vue快速入门教程

Vue快速入门教程目录Vue快速入门教程目录Vue是什么及其特点实例的生命周期vue的响应式原理网络请求axios路由router状态管理vuexVue在2017年人气一路上涨，越来越多的项目选用Vue.js进行开发，这与Vue本身的轻量、容易学习有很大的关系。并且可预测Vue这种的发展态势还将持续上涨。所以作为一个前端开发者来说，也应该学习学习

想要成为程序媛的DUDUfine

3133人浏览 · 2018-01-26 15:25:32

想要成为程序媛的DUDUfine · 2018-01-26 15:25:32 发布

Vue快速入门教程

Vue是什么及其特点

一、Vue.js是一套构建用户界面的渐进式框架，也就是说你可以根据需要引入，不会在初始化就引入很多内容，简单轻量。

二、 Vue是MVVM（Model，View，ViewModel）模型的框架。

三、Vue对应用使用组件化进行构建，组件小型，可复用，可以让我们的代码更加方便管理。

四、 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

实例的生命周期

每个vue实例在被创建前都需要经过一系列的初始化过程，例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
理解vue的生命周期可以帮助我们在实际中进行开发。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                },
                created:function(){
                    console.log('实例已经创建,msg变量还未渲染到模板')
                },
                mounted:function(){
                    console.log('已经挂载到模板上:msg变量渲染到模板')  
                },
                updated:function(){
                    console.log('实例更新啦')    
                },
                destroyed:function(){
                    console.log('销毁啦')  
                }
            });
        }
    </script>
</head>
<body> 
    <div id="box">
        <input type="text" v-model="msg"><br/>
        {{msg}}
    </div>
</body>
</html>

vue的响应式原理

响应原理图
说到Vue的特性就不得不说它的响应式系统了。
数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以回避一些常见的问题。

如何追踪变化？

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

网络请求axios

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。在Vue中可以通过Axios进行网络请请求。
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

功能特性:　
-从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据-
- 客户端支持防御 XSRF

更详细的请右转->axios的使用及中文说明

路由router

为什么需要用到router(路由)呢?
在vue中，我们是通过组件来组成应用程序的，我们需要控制页面的跳转呢？这时候vue-router就发挥作用了。

当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

route的两个主要标签有2个：
默认会被渲染成一个 <a> 标签，所以我们可以用它来导航链接到哪个页面；
用于将页面(组件)渲染到标签里
如下：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <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. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

通过注入路由，我们可以用 this.$router 来访问它，router中记录了路径的跳转可以帮助我们进行页面跳转导航。

vue-router的官方文档

状态管理vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。
每一个 Vuex 应用的核心就是 store（仓库）

可以把它理解成类似一个全局的存储对象。但是，Vuex 和单纯的全局对象有以下两点不同：
1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
举个例子：

//-----main.js start--------
import vuex from 'vuex'
import store from './store'
···
Vue.use(vuex)
···

new Vue({
  el: '#app',
  router,
  store,//将store挂载到根节点,把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件,且子组件能通过 this.$store 访问到
  components: { App },
  template: '<App/>'
})
//-----main.js end--------

//-----store.js start--------
import Vue from 'vue'
import Vuex from 'vuex'
// import Axios from 'axios'

Vue.use(Vuex)
const store = new Vuex.Store({
    //state对象存放全部的应用层级状态
  state: {
    unreadNews: []
  },
  //用来从 store 获取 Vue 组件数据
  getters: {
    unreadNews: state => state.unreadNews
  },
  //Mutators:事件处理器用来驱动状态的变化， mutation处理同步事务
  mutations: {
    addunreadNews (state, newData) {
      state.unreadNews.push(newData)
    },
    clearunreadNew (state) {
      state.unreadNews = [];
      console.log('清除数据clearunreadNew' + state.unreadNews)
    }
  }
  //action用于执行异步操作
  actions: {

  }
})
export default store
//-----store.js  end--------

//在组件中可以通过使用this.$store.state中获取应用的状态
<span class="newNum">[{{this.$store.state.unreadNews.length}}]</span>

//在组件中可以调用store.commit 方法，通过this.$store.commit('functionname',arg)修改store中的state，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新
methods:{
        changeUnReadyNews(){
          console.log('清除数据'+JSON.stringify(this.newmovicelist))
          this.$store.commit('clearunreadNew')
        }
      }

参考资料汇总：
vue中文文档
 vuex中文文档
 vue-router中文文档
 Axios中文说明
 vue2.0源码分析之理解响应式架构

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^