随笔分类 - VUE基础
摘要:在执行 npm run dev 的时候 根据script/config.js 文件中的配置 可知入口文件为 'web/entry-runtime-with-compiler.js',最终输出为'dist/vue.js', 有一个umd 模块,模块的类型总共有(iife amd cmd cjs umd
阅读全文
摘要:一,Vue.js 的源码都是在src 目录下,其目录结构如下。 1.compiler 目录包含Vue.js 所有编译相关的代码。它包括把所有模板解析成ast 语法树, ast 语法树优化等功能。 2.core 目录 包含了Vue.js 的核心代码,包括内置组件,全局API封装,Vue 实例化,观察者
阅读全文
摘要:全局配置 silent 设置日志与警告 optionMergeStrategies 合并策略 devtools 配置是否允许vue-devtools errorHandler 错误追踪 ignoredElements 忽略在Vue 之外的自定义元素。 keyCodes 自定义键位别名 perform
阅读全文
摘要:组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用。 例子: 例子:自定义事件
阅读全文
摘要:组件模板: 之前: 现在: 必须有根元素,包裹住所有的代码 例如: 生命周期: 之前: init created beforeCompile compiled ready √ -> mounted beforeDestroy Destroyed 现在: beforeCreate 组件实例刚刚被创建,
阅读全文
摘要:安装 直接下载CDN 引用 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.use() 来安装Vuex。 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) Vuex 是一个
阅读全文
摘要:十一,深入响应式原理 声明响应式属性 由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例钱声明根级响应式属性,哪怕只有一个空值。 如果你在data 选项中未声明 message,Vue 将警告你渲染函数早试图访问的属性不存在。 异步更新队列 在组件内使用 vm.$nextTick() 实
阅读全文
摘要:十,组件 使用组件 注册 可以通过以下这种方式创建一个Vue实例 注册一个全局组件,你可以使用Vue.component(tagName,options) Vue.component('my-component',{ }) 在父实例的模块中以自定义元素 <my-component></my-comp
阅读全文
摘要:八,事件处理器 监听事件 可以用v-on 指令监听DOM 事件来触发一些javaScript 方法事件处理器 v-on 可以接收一个定义的方法来调用 内联事件处理方法 可以内联JavaScript语句 有时候也需要内联语句处理器中访问原生DOM事件 可以用特殊变了$event 把它传入方法: 事件修
阅读全文
摘要:六,条件渲染 v-if 添加一个条件块 <h1 v-if=“ok”>Yes</h1> 也可以用v-else 添加else 块 <template> 中 v-if条件组 因为v-if 是一个指令,需要将它添加到一个元素上,但是如果我们想切换多个元素呢可以把一个<template> 元素当做包装元素,并
阅读全文
摘要:五,Class 与 Style 绑定 绑定HTML class 对象语法 我们可以传给v-bind:class 一个对象,以动态的切换class 上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真 。 渲染为: <div class=’static activ
阅读全文
摘要:四,计算属性 基础例子 声明了一个计算属性 reversedMessage 。我们提供的函数将用作属性 vm.reversedMessage 的 getter 计算缓存 注意到我们可以通过调用表达式中的method来达到同样的效果: 计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才
阅读全文
摘要:三,模板语法 Vue将模板编译成虚拟DOM渲染函数,结合响应系统,在应用状态改变时,vue能够智能地计算出重新渲染组件的最小代价并DOM操作上。 插值,文本 数据绑定常见的形式就是使用“Mustache”语法(双大括号)的文本插值: 通过使用v-once 指令执行一次性的插入值,当数据改变时,插值处
阅读全文
摘要:二,起步 引用方式可以使用 vue-cli 声明式渲染 在DOM元素上绑定属性 v-bind 属性被称为指令,指令带有前缀 v-,以表示他们是Vue.js 提供的特殊属性。 条件与循环 控制切换一个元素的显示也相当简单: 绑定数据到数组来渲染一个列表 处理用户输入 用v-on 指令绑定一个监听事件用
阅读全文
摘要:一,安装 Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。 npm 在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Web
阅读全文
摘要:目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js
阅读全文