![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
苍穹尘
文能提笔安天下,武能上"码"定乾坤。
展开
-
Node.js安装
1、下载Node.js。https://nodejs.org/en/download/2、下载完成后,双击“node-v6.9.2-x64.msi”,开始安装Node.js3、环境配置 说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数...原创 2019-05-09 15:53:24 · 115 阅读 · 0 评论 -
Vue系列七:事件处理
绑定监听:v-on:xxx=“fun”@xxx=“fun”@xxx=“fun(参数)”默认事件形参: event隐含属性对象: $event事件修饰符:.prevent : 阻止事件的默认行为 event.preventDefault().stop : 停止事件冒泡 event.stopPropagation()按键修饰符.keycode : 操作的是某个keycode值的健...原创 2019-05-18 13:28:51 · 185 阅读 · 0 评论 -
Vue系列八:表单输入绑定
使用v-model(双向数据绑定)自动收集数据text/textareacheckboxradioselect<body><div id="demo"> <form action="/xxx" @submit.prevent="handleSubmit"> <span>用户名: </span> <...原创 2019-05-18 13:32:22 · 307 阅读 · 0 评论 -
Vue系列九:生命周期
vue对象的生命周期1). 初始化显示beforeCreate()created()beforeMount()mounted()2). 更新状态beforeUpdate()updated()3). 销毁vue实例: vm.$destory()beforeDestory()destoryed()常用的生命周期方法created()/mounted(): 发送ajax...原创 2019-05-18 13:36:18 · 259 阅读 · 0 评论 -
Vue系列十:过渡与动画
vue动画的理解操作css的trasition或animationvue会给目标元素添加/移除特定的class基本过渡动画的编码1). 在目标元素外包裹2). 定义class样式1>. 指定过渡样式: transition2>. 指定隐藏时的样式: opacity/其它过渡的类名xxx-enter-active: 指定显示的transitionxxx-leave-...原创 2019-05-18 13:41:35 · 193 阅读 · 0 评论 -
Vue系列十一:过滤器
理解过滤器功能: 对要显示的数据进行特定格式化后再显示注意: 并没有改变原本的数据, 可是产生新的对应的数据编码1). 定义过滤器Vue.filter(filterName, function(value[,arg1,arg2,…]){// 进行一定的数据处理return newValue})2). 使用过滤器 {{myData | filterName}} {{myData...原创 2019-05-18 13:45:52 · 270 阅读 · 0 评论 -
Vue系列十二:指令
一、内置指令 v:text : 更新元素的 textContent v-html : 更新元素的 innerHTML v-if : 如果为true, 当前标签才会输出到页面 v-else: 如果为false, 当前标签才会输出到页面 v-show : 通过控制display样式来控制显示/隐藏 v-for : 遍历数组/对象 v-on : 绑定事件监听, 一般简写为@ v-bind...原创 2019-05-18 13:54:25 · 314 阅读 · 0 评论 -
Vue系列十三:插件
一、自定义插件Vue 插件是一个包含 install 方法的对象通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等(function (window) { const MyPlugin = {} MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlo...原创 2019-05-18 14:00:15 · 413 阅读 · 0 评论 -
Vue系列十四:创建vue项目
一、说明vue-cli 是 vue 官方提供的脚手架工具github:https://github.com/vuejs/vue-cli作用: 从 https://github.com/vuejs-templates 下载模板项目二、创建 vue 项目1、npm包管理器是集成在node中的,所以直接输入npm -v就能查看到版本信息。2、输入npm install -g cnpm ...原创 2019-05-18 14:22:38 · 234 阅读 · 0 评论 -
Vue系列十五:eslint检查
一、说明ESLint 是一个代码规范检查工具它定义了很多特定的规则, 一旦你的代码违背了某一规则,eslint会作出非常有用的提示官网:http://eslint.org/基本已替代以前的 JSLint二、ESLint 提供以下支持ESJSXstyle 检查自定义错误和提示三、ESLint 提供以下几种校验语法错误校验不重要或丢失的标点符号,如分号没法运行到的代...原创 2019-05-18 14:45:52 · 1031 阅读 · 0 评论 -
Vue系列十六:vue组件
一、组件由三个部分组成1、模板页面<template> </template> 2、 JS 模块对象<script> export default{ data(){ return{} }, methods:{}, computed:{}, components:{} } </script> 3、样式&l...原创 2019-05-18 14:58:15 · 193 阅读 · 0 评论 -
Vue系列十七:组件间通信
组件间通信1、组件间通信基本原则:(1)、不要在子组件中直接修改父组件的状态数据(2)、数据在哪, 更新数据的行为(函数)就应该定义在哪2、vue 组件间通信的五种方式:(1)、props(2)、vue 的自定义事件(3)、消息订阅与发布(如:pubsub 库)(4)、slot(5)、vuex一、 组件间通信方式一:props1、使用组件标签 <my-componen...原创 2019-05-18 17:11:38 · 232 阅读 · 0 评论 -
Vue系列十八:存储数据
一、localStorage简介 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。二、localStorage的优势与局限1、localStora...原创 2019-05-18 18:16:55 · 1213 阅读 · 0 评论 -
Vue系列十九:ajax请求
一、vue-resourcevue 插件,非官方库,vue1.x 使用广泛。返回的是一个Promise。文档:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md下载:npm install vue-resource --save1、在main.js中声明使用vue-resourceimport VueReso...原创 2019-05-18 19:26:51 · 213 阅读 · 0 评论 -
Vue系列六:列表渲染
<body><!--1. 列表显示 数组: v-for / index 对象: v-for / key2. 列表的更新显示 删除item 替换item--><div id="demo"> <h2>测试: v-for 遍历数组</h2> <ul> <li v-for="(p, in...原创 2019-05-18 13:25:31 · 231 阅读 · 0 评论 -
Vue系列五:条件渲染
条件渲染指令v-ifv-elsev-show比较v-if与v-show如果需要频繁切换 v-show 较好<body><div id="demo"> <p v-if="ok">表白成功</p> <p v-else>表白失败</p> <hr> <p v-show="ok">...原创 2019-05-18 13:06:33 · 303 阅读 · 0 评论 -
Vue系列二十:router路由
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。一、说明 官方提供的用来实现 SPA 的 vue 插件 github:htt...原创 2019-05-19 12:12:33 · 207 阅读 · 0 评论 -
Vue系列二十一:源码解析
1、[].slice.call(lis): 将伪数组转换为真数组2、node.nodeType: 得到节点类型3、Object.defineProperty(obj, propertyName, {}): 给对象添加/修改属性(指定描述符) configurable: true/false 是否可以重新define enumerable: true/false 是否可以枚举(for…in...原创 2019-05-19 12:28:01 · 467 阅读 · 0 评论 -
Vue系列二十二:源码解析-数据代理
数据代理(MVVM.js)1、通过一个对象代理对另一个对象中属性的操作(读/写)2、通过vm对象来代理data对象中所有属性的操作3、好处: 更方便的操作data中的数据4、基本实现流程(1)、通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符(2)、所有添加的属性都包含getter/setter(3)、在getter/setter内部去...原创 2019-05-19 12:31:12 · 210 阅读 · 0 评论 -
Vue系列二十三:源码解析-模板解析
模板解析(compile.js)1、模板解析的关键对象:compile对象2、模板解析的基本流程:(1)、将el的所有子节点取出, 添加到一个新建的文档fragment对象中(2)、对fragment中的所有层次子节点递归进行编译解析处理 对表达式文本节点进行解析 对元素节点的指令属性进行解析 事件指令解析 一般指令解析(3)、 将解析后的fragment添加到el中显示...原创 2019-05-19 12:39:25 · 563 阅读 · 0 评论 -
Vue系列二十四:源码解析-数据绑定
数据劫持与数据绑定1、数据绑定(model==>View):(1)、一旦更新了data中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会更新(更新)。2、数据劫持(1)、数据劫持是vue中用来实现数据绑定的一种技术。(2)、基本思想: 通过defineProperty()来监视data中所有属性(任意层次)数据的变化, 一旦变化就去更新界面。3、四个重要对象(1...原创 2019-05-19 12:54:57 · 261 阅读 · 0 评论 -
Vue系列二十五:vuex-简介
一、简介 github 站点:https://github.com/vuejs/vuex 在线文档:https://vuex.vuejs.org/zh-cn/ 简单来说:对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)。二、状态自管理应用 state: 驱动应用的数据源。 view: 以声明方式将 state 映射到视图。 actions: 响应在 view 上的用户输...原创 2019-05-19 13:53:56 · 194 阅读 · 0 评论 -
Vue系列二十六:vuex-案例
1、映射 store。main.jsimport Vue from 'vue'import App from './components/App.vue'import store from './store'new Vue({ el: '#app', render: h => h(App), //渲染函数 store})2、状态对象。state.js//状态对...原创 2019-05-19 14:17:10 · 227 阅读 · 0 评论 -
Vue系列一:基本使用
一、简介1、官网 英文官网:https://vuejs.org/ 中文官网:https://cn.vuejs.org/2、介绍描述 渐进式 JavaScript 框架 作者: 尤雨溪(一位华裔前 Google 工程师) 作用: 动态构建用户界面3、Vue 的特点 遵循 MVVM 模式 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发 它本身只关注 UI, 可以轻松引...原创 2019-05-18 12:17:03 · 207 阅读 · 0 评论 -
Vue系列二:模板语法
模板的理解:动态的html页面包含了一些JS语法代码大括号表达式指令(以v-开头的自定义标签属性)双大括号表达式语法: {{exp}} 或 {{{exp}}}功能: 向页面输出数据可以调用对象的方法指令一: 强制数据绑定功能: 指定变化的属性值完整写法:v-bind:xxx=‘yyy’ //yyy会作为表达式解析执行简洁写法::xxx=‘yyy’指令二: 绑定事件...原创 2019-05-18 12:30:03 · 262 阅读 · 0 评论 -
Vue系列三:计算属性
计算属性:在computed属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果监视属性:通过通过vm对象的$watch()或watch配置来监视指定的属性当属性变化时, 回调函数自动调用, 在函数内部进行计算计算属性高级:通过getter/setter实现对属性数据的显示和监视计算属性存在缓存, 多次读取只执行一次getter计算<body>...原创 2019-05-18 12:40:04 · 556 阅读 · 1 评论 -
Vue系列四:class与style绑定
理解在应用界面中, 某个(些)元素的样式是变化的class/style绑定就是专门用来实现动态样式效果的技术class绑定: :class=‘xxx’xxx是字符串xxx是对象xxx是数组style绑定:style="{ color: activeColor, fontSize: fontSize + ‘px’ }"其中activeColor和fontSize是data属性...原创 2019-05-18 13:03:17 · 500 阅读 · 0 评论 -
Vue图片预览插件viewerjs
GitHub地址:https://github.com/fengyuanchen/viewerjs 。1、安装:npm install v-viewer --save2、在vue中引用import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'3、vue注册调用,再调用setDefaults方法自定义配置。Vue.use...原创 2019-07-05 16:39:49 · 14073 阅读 · 2 评论