Vue 2.0 基础详细

目录
  • 1、特点
  • 2、实例
  • 3、选项 Options
  • 4、基本语法
  • 5、生命周期
  • 6、路由管理Vue-Router
    • 6.1 路由配置
    • 6.2 路由跳转
    • 6.3 路由守卫
  • 7、状态管理器Vuex
    • 7.1 配置
  • 8、五大核心属性
  • 9、Http请求库Axios

1、特点

是一个MVVM框架

由MVC架构衍生,分为View(视图层)、ViewModel(数据视图层)、Model(数据层),MVVM 最标志性的特性就是 数据绑定,实现数据驱动视图,视图同步数据。

数据也是单向的,称之为单向数据流

数据总是从父组件传递到子组件中,子组件无权(不建议)直接修改父组件中的数据。

不兼容ie8及其以下浏览器

响应式原理式利用了es5的Object.defineProperty,而该API不支持IE8

2、实例

// Vue单页面实例
<template>
    标签...
</template>
<script>
    export default {
      data () {},
      methods: {},
      computed: {},
      watch: {}
    }
</script>
<style>
    样式...
</style>

3、选项 Options

data

函数,用于定义页面的数据

data() {
    return {
        count: 2
        copyCount: 1
    }
}

// 使用
this.count // 2

computed

对象,计算属性,用于简化复杂逻辑处理

// 计算属性不接受参数,会缓存依赖数据,必须要有return
computed:{
    doubleCount: function () {
      return this.count *= 2
    },
}

// 使用
this.doubleCount // 4

methods

对象,用于定义页面的函数

methods: {
    cLog(msg) {
        console.log(msg)
    }
}

// 使用
this.cLog('调用了函数') // 控制台输出:调用了函数

watch

对象,属性侦听,用来监听某数据的改变并做出对应操作

watch: {
    count(value, [oldValue]) {
        // value:改变后的值
        this.copyCount = value + 1
    }
}

// 当count发生改变时自动触发
this.count = 2
this.copyCount // 3

components

对象,注册组件到页面

import UploadImg from 'xxxx'

components: { UploadImg }

// template
<upload-img>

4、基本语法

常用指令

v-html:渲染HTML

v-if:判断语法,控制显示/隐藏,通过是否渲染DOM来控制

v-show:控制显示/隐藏,与v-if类似,但v-show是通过display属性控制

v-model:双向数据绑定,一般用于表单,默认绑定value属性

v-bind

  • 简写 :class
  • 用于动态属性绑定

v-on

  • 简写 @click
  • 用于事件绑定

v-for:遍历语法,支持数组、对象及字符串

5、生命周期

beforeCreated:创建Vue对象

created:data初始化,此时可以对实例做些预操作

beforeMounted:el和data初始化

mounted:挂载el和data,此时可以调用http请求

beforeUpdated:更新DOM前,此时可以进一步地更改状态,不会触发重渲染过程

updated:更新修改后的虚拟DOM到页面,此时应避免改动操作,以免造成无限循环更新

beforeDestory:页面销毁前,此时可以做一些重置操作,比如清除定时器 和 dom事件等

destoryed:页面销毁,此时Vue实例已被删除,所有操作均无效

6、路由管理Vue-Router

官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

6.1 路由配置

// NPM下载
npm install vue-router
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 定义页面路由(路径、组件)
export default new Router({
    { path: '/foo', component: () => import('/pages/foo') }, // 路由组件懒加载
    { path: '/bar', component: '/pages/bar'}
})
// main.js
import router from './router.js'
new Vue({
  el: '#app',
  router, // 挂载路由到Vue实例
  render: h => h(App)
})

// page.vue
<!-- 要重点区分开两者的关系 -->
this.$router // 访问路由器,内置push、replace的路由方法
this.$route // 访问当前路由,内置path、query等路由属性
// app.vue
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

6.2 路由跳转

申明式路由

<router-link :to="...">
<router-link :to="..." replace>

编程式路由

this.$router.push({ path: 'register', query: { plan: 'private' }})
this.$router.replace(...)   // 与push区别在不插入history记录
this.$router.go( [Number] n )   // 在 history 记录中向前或者后退多少步

// 路由传参携带中文时建议先使用encodeURLComponent转码,以免显示乱码。

6.3 路由守卫

全局守卫

对配置的所有路由均生效,但优先级低与内部路由。

全局前置守卫(常用)

// 用户未能验证身份时重定向到 /login
router.beforeEach((to, from, next) => {
  // to 即将要进入的路由对象,from 来源路由,next 钩子函数,是否放行
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

全局解析守卫(了解)

router.beforeResolve((to, from, next) => {
  // ...
})

全局后置钩子(了解)

router.afterEach((to, from) => {
  // 该路由守卫不接受 next 钩子函数
  // ...
})

路由独享守卫(了解)

该守卫仅对配置的路由生效,这些守卫与全局前置守卫的方法参数是一样的。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内部守卫(了解)

可以在路由组件内直接定义以下路由导航守卫,仅对当前组件生效。

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

组件内的守卫 | Vue-Router官方文档

7、状态管理器Vuex

7.1 配置

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
...

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules
})
// main.js
import store from './store'

Vue.prototype.$store = store

8、五大核心属性

state

数据源,不要直接修改state状态

// store.js
const state = {
    name: 'zzz'
}

<!--page.vue-->
// 1.直接调用
this.$store.state.name // 'zzz'
// 2.辅助函数映射
computed: {
    ...mapState(['name'])
}
this.name // 'zzz'

mutations

改变state状态的唯一途径

const mutations = {
    updateName(state, newName) {
        state.name = newName
    }
}

<!--page.vue-->
// 1.直接调用
this.$store.commit(updateName, 'zzh') // state.name: 'zzh'
// 2.辅助函数映射
methods: {
    ...mapMutations(['updateName'])
}
this.updateName('zzh') // state.name: 'zzh'

actions

存放异步操作,异步触发mutation改变state

const actions = {
    asyncUpdateName(context) {
        // 异步操作,例如发起http请求去获取更新后的name,假设name=xxx
        ...
        context.commit('updateName', res.name) // state.name: 'xxx'
    }
}

<!--page.vue-->
// 1.直接调用
this.$store.dispatch(asyncUpdateName)
// 2.辅助函数映射
methods: {
    ...mapActions(['asyncUpdateName'])
}
this.asyncUpdateName()

getters

数据源处理,类似计算属性

const getter = {
    formatName(state) {
        return state.name + '2021'
    }
}

<!--page.vue-->
// 1.直接调用
this.$store.getter.formatName() // 'xxx2021'
// 2.辅助函数映射
computed: {
    ...mapGetters(['formatName'])
}
this.formatName() //  // 'xxx2021'

modules

模块化,让每个模块单独管理一套自己的state、mutations、actions和getters。

// 模块内部
this.$store.state.name  // 内部访问无须使用命名空间
// 模块外部
this.$store.state.login.name  // login是模块命名空间
...
其他属性类似

modules|Vuex官方文档

9、Http请求库Axios

基于 promise 封装的Http请求库,官方推荐

<!-- api.js -->
import axios from 'axios'

// 创建并配置实例
axios.create({
    baseURL: 'http://www.baidu.com',    // 请求基准地址
    timeout: 1000   // 请求超时时间
    ...
})

// 请求拦截器
axios.interceptors.request.use(request => {
    request.headers['Content-Type'] = 'application/json'
    ...
})
// 响应拦截器
axios.interceptors.response.use(response => {
    ...
    return response.data
})
// 配置请求
export default {
    getId: () => axios.get('/getId'),
    getNameById: id => axios.post('/getNameById', id)
}

<!-- main.js -->
import api from './api.js'

Vue.prototype.$api = api
<!-- page.vue -->
this.$api.getId().then(res => {
    ...
}).catch()

到此这篇关于Vue 2.0 基础详细的文章就介绍到这了,更多相关Vue 2.0 基础内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue2.0实现简单分页及跳转效果

    用Vue2.0实现一个数据的分页及页数的跳转,代码如下: 数据绑定:{{...}}        <a v-on:click="btnClick(item)">{{item}}</a> 事件绑定:v-on        <a v-on:click="cur--,pageClick()">上一页</a> 判断:v-if                 <li v-if="cur==1">&

  • 手写Vue2.0 数据劫持的示例

    一:搭建webpack 简单的搭建一下webpack的配置.新建一个文件夹,然后init一下.之后新建一个webpack.config.js文件,这是webpack的配置文件.安装一下简单的依赖. npm install webpack webpack-cli webpack-dev-server -D 在同级目录下新建一个public/index.html和src/index.js,作为出口文件和入口文件. j简单配置一下webpack, 在webpack.config.js文件中: cons

  • vue2.0+SVG实现音乐播放圆形进度条组件

    vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果 需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-circle.vue源码: <template> <div class="progress-circle"> <svg :width="radius" :height="radius" viewBox="0 0 10

  • vue2.0实战之基础入门(1)

    最近公司的H5项目准备重构,部门老大说前端使用vue2.0来开发,所以就准备把整个项目的开发过程记录下来,一方面是为了记录开发过程中遇到的坑,另一方面也加强自己写作的能力. 什么是 Vue? 简要介绍一下vue,vue就是一个前端框架,特点是 数据双向绑定,比如说改变input输入框里的内容,就会自动同步更新到页面上绑定该输入框的组件的值. 看一下官方对vue的介绍: Vue.js,读音 /vjuː/,和view发音几乎一样,可见重心是在视图(view)层上的.Vue.js 的目标是通过尽可能简

  • vue2.0 获取从http接口中获取数据,组件开发,路由配置方式

    vue 2.0 从接口中获取数据 <template> <div id="admins"> <h1>I am a title.</h1> <a> written by {{ author }} </a> <div v-for="admin in users"> {{admin.name}}<br>{{admin.password}} </div> </d

  • Vue2.0 实现页面缓存和不缓存的方式

    1.在app中设置需要缓存的div <keep-alive>//缓存的页面 <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>//不缓存的页面 2.在路由router.js中设置.vue页面是

  • Vue 2.0 基础详细

    目录 1.特点 2.实例 3.选项 Options 4.基本语法 5.生命周期 6.路由管理Vue-Router 6.1 路由配置 6.2 路由跳转 6.3 路由守卫 7.状态管理器Vuex 7.1 配置 8.五大核心属性 9.Http请求库Axios 1.特点 是一个MVVM框架 由MVC架构衍生,分为View(视图层).ViewModel(数据视图层).Model(数据层),MVVM 最标志性的特性就是 数据绑定,实现数据驱动视图,视图同步数据. 数据也是单向的,称之为单向数据流 数据总是从

  • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)

    在上篇文章给大家介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一) 1. 引入路由工具vue-router,切换视图 # 安装vue-router cnpm install vue-router --save-dev 2. 使用vue-router main.js import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import routeConfig f

  • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)

    1. 根据官方指引,构建项目框架 # 安装vue $ cnpm install vue@2.1.6 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目my-project $ vue init webpack my-project # 进入项目目录 $ cd my-project # 安装依赖,走你 $ cnpm install # 运行项目 $ cnpm run dev 2. 运行项目之后,会看到以下界面

  • Vue 2.0入门基础知识之内部指令详解

    1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-

  • vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

    参考文档 https://cli.vuejs.org/zh/ 1.安装 npm install -g @vue/cli 2.检查安装 vue -V 3.创建项目 vue create project_name 出现下图信息 4.上图两种选择方式,第一种是默认的,第二种自己选择配置  这里一般选择第二种自己配置,点击回车键后出现下图信息 5.在上图中选择你需要的模块,上下移动,空格进行确定,下图是测试选择的 6.选好后,敲Enter键,接着选择 7.选择完毕后,一路Enter,到下图 8.模板创建

  • 0基础学习前端开发的一些建议

    以下纯属个人观点和建议,肯定是有局限性的,但是也希望能给你带来一些帮助. 我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一,所以多我们提出的要求也就越来越高了.所以我们需要的也就不仅仅只是掌握css.html.JavaScript了,但是这三大件一直都是前端的根本,这一点从未改变,而这三大件中JavaScript又是重中之重. 接下来我会结合我的一点经验,给出前端系统学习路线的一些具体建议以及入门前端时的一些困境. 入门前端时的一些困境 1.因一些基础算法.数据结构理论不扎实导致一些

  • Vue实现简单基础的图片裁剪功能

    目录 一.准备工作 二.基本结构 三.添加功能 onMouseDown onMouseMove onMouseUp onMouseLeave 四.总结 近日,在写公司项目的时候接到一个需求:对已加载的大图中可截取部分图片用来入库或者布控,说白了就是截图嘛,于是我使用了vue-cropper来完成.完成后因为前边也没自己实现过,所以就想看看是如何实现的.因此本文写的是最简易基础的实现方法用作学习,肯定有考虑不周的地方,还请大家谅解.工作中还是使用成熟的轮子为好. 一.准备工作 本文中我所使用的环境

  • vue日常开发基础Axios网络库封装

    目录 引言 axios使用 配置请求基本信息 设置请求拦截器 设置请求响应器 项目中使用 结尾 引言 首先Axios,一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 网络请求库无疑是项目开发中最基础的建设了,在这个前后端分离的时代,市面上有不少优秀的请求库,其中Axios就是优秀代表之一. 拦截请求和响应 转换请求数据和响应数据 自动转换 JSON 数据 客户端支持防御 XSRF 支持 PromiseAPI 以上是axios的优秀点 axios使用 本文是基于

  • Vue electron零基础使用教程

    需求:给vue项目加一个外壳(electron),顾名思义也就是使用electron应用程序运行vue项目,直接将写好上线的vue项目在线地址放入electron程序中即可 操作步骤: 1.构建:构建应用程序首先要先安装electron相关依赖包以及搭建框架.在这里就不详细赘述了,直接上官网看文档https://www.electronjs.org/zh/docs/latest/tutorial/quick-start 2.打包:此时就到了重要的时候,官方指定的是使用脚手架打包-----Elec

  • vue 2.0项目中如何引入element-ui详解

    前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧. 一.新建项目 1.查看 node和npm是不是已经安装好命令:node -v  npm -v (没有安装的先安装环境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)

随机推荐