vue
痴心的萝卜
这个作者很懒,什么都没留下…
展开
-
2.3 Vue Vuex的使用及设计思想
Vuex是什么Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则,保证状态以一种可预测的方式发生变化默认的五种基本对象:state:存储状态(变量)getters:对数据获取之前的再次编译,可以理解为state的计算属性。mutations:修改状态,并且是同步的。在组件中使用$store.commit('',param...原创 2020-03-17 09:44:47 · 644 阅读 · 0 评论 -
2.2 Vue 组件化的深入
组件化组件是Vue.js最强大的功能之一可以扩展HTML元素,封装可重用代码。在较高层面上是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下也可以是原生HTML元素的形式,以is特性扩展。组件创建调用 Vue.extend(),创建名为myComp的组件, template定义模板的标签,模板的内容需写在该标签下。var myComp = Vue.extend({...原创 2020-03-10 14:35:33 · 296 阅读 · 0 评论 -
2.1 Vue 初始Vue-cli
了解Vue-clivue-cli是vue.js的脚手架,是一个基于Vue.js进行快速开发的完整系统,用于自动生成vue.js + webpack的项目模板,分为两种:vue init webpack-simple项目名vue init webpack 项目名vue-cli可以快速构建单页应用,但涉及内容很多,如 webpack、npm、nodejs等。Vue CLI 系统包含...原创 2020-03-09 22:56:10 · 162 阅读 · 0 评论 -
1.10 Vue 自定义指令
为什么使用自定义指令在vue2中,代码复用和抽象的主要形式是组件。然而,有的情况下,我们仍然需要对普通DOM元素进行底层操作,这时候就会用到自定义指令除了内置指令(v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-text…), Vue. js也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为DOM行为。可以用v...原创 2020-02-11 09:30:35 · 176 阅读 · 0 评论 -
1.9 Vue 生命周期
钩子函数钩子函数(Hook)在Vue中是一种事件劫持机制。它会比定义的事件更早进行执行处理,而且可以让你自己去配置。钩子描述beforeCreate实例创建前状态 el与data都为 undefinedcreated创建完毕状态 el为undefined,data里面已经有数据beforeMount挂载前状态 el:undefined data里面已...原创 2020-02-10 08:58:46 · 125 阅读 · 0 评论 -
1.8 Vue 过滤及动画
Vue过渡动画Vue在插入、更新或者移除DOM时,提供多种不同方式的应用过渡效果。Vue提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。过渡时,会有6个类名在enter/leave的过渡中切换v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。v- enter-active:定义进入过渡的结束状态。在元素被插入时生效,在 transition/...原创 2020-02-10 07:51:51 · 195 阅读 · 0 评论 -
1.7 Vue 渲染函数及JSX语法
1. 渲染函数渲染函数(render函数)通过 createElement 函数来创建虚拟DoM(VirtualDom),这个虚拟DOM包含的信息会告诉Vue页面上需要渲染出什么元素。可以解决有些场景中用 template 实现起来代码冗长繁琐,而且有大量重复的问题。渲染函数解析render函数的返回值 VNode (即:虛拟节点),也就是我们要渲染的节点。render函数的参数...原创 2020-02-08 13:56:37 · 300 阅读 · 0 评论 -
1.6 Vue 组件
1. 组件基础为什么要使用组件组件(Component)是对数据和方法的简单封装。Vue组件可以扩展HTML元素,提高重用性的,让代码可复用。组件的使用组件命名 两种方式:1)使用kebab-case(短横线分隔命名)<my-component>2)使用PascalCase(首字母大写命名)<MyComponent>组件复用 可以将组件进行任意次数的复用,每...原创 2020-02-08 00:12:14 · 144 阅读 · 0 评论 -
搭建webpack +babel + vue项目以及编写单文件和自定义组件
搭建webpack +babel + vue项目的操作步骤1. 新建一个存放项目的文件夹我新建的文件名为demoVue2. 打开cmd,执行cd指令到该文件夹下3. 可执行npm init命令,自己配置一下,我这边直接执行npm init -y,使用默认配置可以看见文件夹下面生成了一个package.json3. 执行指令:cnpm i webpack webpack-cli vu...原创 2020-02-08 00:09:18 · 508 阅读 · 0 评论 -
1.5 Vue 表单处理
1. 基础用法文本输入绑定使用v-model和{{}}实现对表单元素的双向数据绑定单行文本<input v-model="message" placeholder="输入">多行文本<textarea v-model="message" placeholder="输入"></textarea>2. 绑定值选择性框输入绑定值需要动态数据时...原创 2020-02-05 23:45:32 · 152 阅读 · 0 评论 -
1.4 Vue 条件渲染和列表渲染
1. 条件渲染v-if、v-else-if、v-else / v-showv-if、v-else-if、v-else与 JavaScript的条件语句if、else、else if类似,Vue.js的条件指令可以根据表达式的值,在DOM中渲染或销毁元素/组件;v-show 不管初始条件 是什么,元素总是会被渲染,并且只是简单地 基于CSS进行显示隐藏切换。注意:v-else-if要紧跟...原创 2020-02-05 18:52:44 · 224 阅读 · 0 评论 -
1.3 Vue 计算属性及watch
1. 计算属性的作用及使用计算属性(Computed)的作用当模板內的JS表达式复杂到让我们难以维护时,我们应当要引入计算属性。<div id="app"> {{text.split('').reverse().join('')}}</div>对于任何复杂逻辑,都应当使用计算属性。在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返...原创 2020-02-04 21:32:03 · 265 阅读 · 0 评论 -
1.2 Vue 模块语法,常用指令,事件绑定
1. 前置准备使用npm方式创建一个vue项目开发工具:Visual Studio Code手动创建package.json创建一个文件夹,用来放这个项目,在该文件夹中创建一个index.html文件有终端的跳过该步骤点击插件,搜索terminal,点击install安装右击index.html文件选中终端进入命令行终端输入命令npm init创建的步骤还有一种快捷的...原创 2020-02-04 21:31:28 · 418 阅读 · 0 评论 -
1.1 初始vue
什么是VueVue(读音类似view)是一个构建数据驱动的web界面的渐进式框架,它是用来快速构建前端应用的Vue简史2013年7月28日作者尤雨溪( Evan you)首次提交代码到 github名为 Element随后更改为 Seed. js2014年2月1日新版本0.6.0正式改名为 Vue.js2015年10月26日Vue1.0.0发布2016年10月1日Vue2...原创 2020-02-04 21:31:06 · 238 阅读 · 0 评论 -
vue run build 错误 CssSyntaxError错误
原文链接:https://blog.csdn.net/weixin_44023519/article/details/97103637vue打包出现的错误,记录一下错误代码Error processing file: static/css/app.4ce01a6050060bff9b33c64750b6bd11.css(node:6544) UnhandledPromiseRejectio...转载 2019-10-28 08:40:55 · 2149 阅读 · 0 评论 -
vue项目打包上传服务器
vue项目打包上传服务器PS:因为我现在还是个学生,所以服务器是自己去阿里云上租了两年的服务器,挺便宜的,上传之前要准备好Xshell 5第一步 Xshell 5创建会话属性名称就是起的一个你能记住的名字就行了,主机就是你服务器的IP地址,端口号不用改,默认都是22,填完后点击左边的用户身份验证这个用户名和密码就是服务器上的用户名密码,我用的阿里云的用户名直接就是root,密码是当时自...原创 2019-09-23 10:23:07 · 1415 阅读 · 0 评论 -
vue实现websocket断线重连
vue实现websocket断线重连下面是自己写的demo和注释,为了以后再用websocket,看起来方便一点=-=<template> <div> <button @click="sendDevName('xxxxxxxx')">发送</button> {{data}} </div></templa...原创 2019-10-11 20:23:52 · 3406 阅读 · 0 评论 -
vue router 报错: Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"...
vue报错: Uncaught (in promise) NavigationDuplicated {_name:"“NavigationDuplicated”…参考博客地址:https://www.cnblogs.com/webdragon/p/11355080.html方法一据大佬所说,可能是在重新下载依赖包时,安装的vue-router还是之前出错的那个版本, 解决方法也很简单,在项...原创 2019-10-11 11:31:53 · 252 阅读 · 0 评论 -
vue项目使用echarts及可视化图表可实时自适应
vue项目使用echarts及可视化图表可实时自适应使用vue-cli脚手架搭建,自己做个笔记第一步 安装echarts依赖npm install echarts -S上面这个方法下载速度有点慢,可以用一下国内的淘宝镜像,用cnpm下载:npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install...原创 2019-10-09 10:12:04 · 937 阅读 · 0 评论 -
点击输入文本框时自动提示邮箱后缀(vue项目)
点击输入邮箱有提示(vue项目) <el-input v-model="inputEmail" placeholder="请输入邮箱账号" clearable prefix-icon="el-icon-user"></el-input> <div class="hintBox"> <div @...原创 2019-10-05 18:24:55 · 4541 阅读 · 0 评论