欢迎光临
我的个人博客网站

Vue 2.0 基础


Vue 2.0 基础

知识点

  1. 特点
  2. 实例
  3. 基本语法
  4. 生命周期
  5. 路由管理Vue-Router
  6. 状态管理Vuex
  7. Http请求库Axios

特点

1.是一个MVVM框架

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

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

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

3.不兼容ie8及其以下浏览器

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


实例

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

选项 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> 

基本语法

常用指令

v-html

渲染HTML

v-if

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

v-show

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

v-model

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

v-bind

简写 :class

用于动态属性绑定

v-on

简写 @click

用于事件绑定

v-for

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

生命周期

beforeCreated

创建Vue对象

created

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

beforeMounted

el和data初始化

mounted

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

beforeUpdated

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

updated

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

beforeDestory

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

destoryed

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


路由管理Vue-Router

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

路由配置

// 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> 

路由跳转

申明式路由

<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转码,以免显示乱码。 

路由守卫

导航守卫|Vue-Router官方文档

全局守卫

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

全局前置守卫(常用)

// 用户未能验证身份时重定向到 /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官方文档


未完待续…

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue 2.0 基础
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏