vue
关注
分享
扫一扫
爱编程的 小李
这个作者很懒，什么都没留下…
展开
-
Vue中安装element-ui失败
1、将项目里的“node_modules”文件夹删除2、执行npm install3、执行npm install element-ui -s4、npm run dev原创 2020-11-29 21:43:43 · 1715 阅读 · 2 评论 -
vue-router下载和简单使用
官方提供的用来实现 SPA 的 vue 插件开发文档下载npm install vue-router --save相关 API 说明(1) VueRouter(): 用于创建路由器的构建函数new VueRouter({ // 多个配置项 })(2) 路由配置routes: [ { // 一般路由 path: '/about', component: About }, { // 自动跳转路由 path: '/', redirect: '/about原创 2020-08-12 16:53:33 · 4777 阅读 · 0 评论 -
vue UI组件库
vue常用的UI组件库有Mint UI和Elment下载Mint UInpm install --save mint-ui实现按需打包1、下载npm install --save-dev babel-plugin-component2、修改 babel 配置<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" conten原创 2020-08-12 16:39:10 · 332 阅读 · 0 评论 -
vue与后台通讯ajax下载和简单使用
vue-resource下载npm install vue-resource --savevue-resource使用初始化在main.js中使用案例mounted () { // 发ajax请求 const url = `https://api.github.com/search/repositories?q=v&sort=stars` this.$http.get(url).then( response => {原创 2020-08-12 10:00:51 · 385 阅读 · 0 评论 -
vue占位控件solt
solt是占位控件父组件<templateSlotNamed> <h1 slot="footer">footer</h1> <h1 slot="header">header</h1> <h1>Default content</h1></templateSlotNamed>子组件<div> <slot name="header"></slot> <sl原创 2020-08-12 09:04:05 · 480 阅读 · 0 评论 -
PubSub简单使用
PubSub分为订阅与发布，分别对应函数的定义与调用订阅部分PubSub.subscribe('名字', (msg, index) => { this.名字(index)})发布部分PubSub.publish('名字', index)原创 2020-08-12 07:47:47 · 3700 阅读 · 0 评论 -
下载PubSubJS库
1、下载，命令行输入npm install --save pubsub-js2、查验信息npm info pubsub-js原创 2020-08-12 07:15:23 · 764 阅读 · 0 评论 -
vue export default模块
最近学了vue，但是总是对几种数据类型以及数据在传输过程中data和props中指定类型比较模糊，想在webstorm做一个关于vue export default的通用模板，默认注释，使用释放datadata主要是关于数据方面的，其中包含的类型有Number, String, Boolean, Array, Function, Object，也是js中的数据类型export default { name: 'app', data () { return { messag原创 2020-07-30 11:24:37 · 1628 阅读 · 0 评论 -
运行vue项目
1、在cmd中切换到vue项目目录下2、输入npm run dev并运行原创 2020-07-30 10:51:36 · 120 阅读 · 0 评论 -
‘serve‘不是内部或外部命令，也不是可运行的程序或批处理文件
vue打包发布项目使用serve dist，发现serve没有配置好，下载servenpm install -g serve原创 2020-07-27 07:36:09 · 1126 阅读 · 0 评论 -
使用vue脚手架创建vue项目
验证node版本和npm版本，如果没安装没安装，请查看安装教程node -vnpm -v一般npm太慢所以使用npm下载cnpm,安装完验证一下(cnpm或cnpm -v)npm install -g cnpm --registry=https://registry.npm.taobao.org安装vue-cli，首选第一个，因为快，也可能会出错，之前就遇到过，出错时就只能选第二个了cnpm install -g @vue/cli或npm install -g @vue/cli搭建转载 2020-07-26 17:17:52 · 286 阅读 · 0 评论 -
vue指令
v-text: 更新元素的 textContentv-html: 更新元素的 innerHTMLv-if: 如果为 true, 当前标签才会输出到页面v-else: 如果为 false, 当前标签才会输出到页面v-show: 通过控制 display 样式来控制显示/隐藏v-for: 遍历数组/对象v-on: 绑定事件监听, 一般简写为@v-bind: 强制绑定解析表达式, 可以省略 v-bindv-model: 双向数据绑定ref: 指定唯一标识,vue 对象通过$els 属性访问这个元原创 2020-07-26 16:39:31 · 133 阅读 · 0 评论 -
vue过滤器
理解过滤器功能: 对要显示的数据进行特定格式化后再显示注意: 并没有改变原本的数据, 可是产生新的对应的数据编码1). 定义过滤器 Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return newValue })2). 使用过滤器 <div>{{myData | filterName}}</div> <div>{.原创 2020-07-26 16:17:19 · 108 阅读 · 0 评论 -
vue引入moment.js(网络)
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>原创 2020-07-26 16:07:03 · 710 阅读 · 0 评论 -
vue基本过渡动画
操作css的trasition或animation，vue会给目标元素添加/移除特定的class基本过渡动画的编码1). 在目标元素外包裹2). 定义class样式1>. 指定过渡样式: transition2>. 指定隐藏时的样式: opacity/其它过渡的类名xxx-enter-active: 指定显示的transitionxxx-leave-active: 指定隐藏的transitionxxx-enter: 指定隐藏时的样式实例1<!DOCTYPE html原创 2020-07-26 09:44:36 · 184 阅读 · 0 评论 -
直接引入vue.js(网络)
<script type="text/javascript" src="../js/vue.js"></script>原创 2020-07-26 08:48:02 · 1192 阅读 · 0 评论 -
vue生命周期
vue有三个阶段：初始化、更新、死亡，以Mounted为分界线，Mounted之前为初始化阶段，Mounted之后为死亡阶段。在不同阶段完成不同的操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>09_Vue实例_生命周期</title></head><body><!--1. vue对象的生命原创 2020-07-26 08:44:12 · 111 阅读 · 0 评论 -
vue表单输入绑定(实例)
使用v-model(双向数据绑定)自动收集数据text/textarea、checkbox、radio、select<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单输入绑定</title></head><body><div id="demo"> <form acti原创 2020-07-26 08:33:05 · 218 阅读 · 0 评论 -
vue事件处理
绑定监听vue可以通过@click绑定方法，默认参数是event，在方法中如果指明了形参event可以获取控件的属性值，如果没有指明形参event也使用event也不会报错，但是会有奇奇怪怪颜色的东西，如果有形参必须传event,此时通过$event指明实参event<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件处理</title&g原创 2020-07-26 08:21:00 · 311 阅读 · 0 评论 -
vue列表的搜索和排序
根据filter和lambda表达式筛选出满足条件的元素，并通过sort方法对结果进行排序，显示在列表中，但是排序只是对中间结果进行排序并不影响原本数据，当显示原有数据就可以不通过排序直接返回<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>06_列表渲染_过滤与排序</title></head><body>原创 2020-07-26 07:56:38 · 534 阅读 · 0 评论 -
vue列表渲染
相关方法push()在尾部添加pop()在尾部删除shift()在头部删除unshift()在尾部添加splice()可以实现增删改功能sort()排序reverse()反转v-for变量遍历列表，将列表的所有数据取出并显示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表渲染</title></he原创 2020-07-26 07:33:11 · 97 阅读 · 0 评论 -
vue条件渲染指令
v-if,v-else,v-showv-if和v-else，当v-if为真时，v-if创建，v-else移除，当v-if为假时，v-if移除，v-else创建当v-show为真时，v-show显示,当v-show为假时，v-show隐藏v-if、v-else和v-show区别v-if、v-else是两个中一个创建、一个移除，而v-show的属性值为假时隐藏，为真时显示，区别就是v-show为假是存在但不显示，而v-if、v-else一个存在并显示，一个不存在。当进行频繁的切换操作时，选择v-show原创 2020-07-25 20:42:52 · 276 阅读 · 0 评论 -
vue class与style绑定
页面的样式可能会经常改变，这是采用class绑定和style绑定可以满足这些需求class绑定class绑定可以绑定字符串、对象、数组三种绑定方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04_class与style绑定</title> <style> .classA {原创 2020-07-25 20:29:38 · 124 阅读 · 0 评论 -
vue属性计算和监听
1、计算属性计算属性是属性之间的关系，例如性是一个属性，名是一个属性，姓名也是一个属性，姓名就是与性和名组成的通过computed属性定义函数，将拼接的结果返回<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>03_计算属性和监视</title></head><body><div id="demo"原创 2020-07-22 17:06:43 · 183 阅读 · 0 评论 -
vue模板语法
1、双大括号表达式v-text与v-html区别是v-text的属性值是文本，而v-html的属性值是标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01_HelloWorld</title></head><body><!--模板--><div id="app">原创 2020-07-22 15:44:14 · 93 阅读 · 0 评论 -
vue调试工具vue.js devtools
添加成扩展程序1、谷歌商店下载在谷歌商店搜索vue.js devtools，加入到扩展程序2、本地打包1、vue.js devtools下载提取码:00002、解压缩3、打开扩展工具页面4、将解压好的vue.js devtools拖进页面打包成扩展程序使用打开调试页面就会发现vue了，如下图最后一个我刚开始使用的是第二种方法，但是因为没有在调试工具找到vue，就以为失败了，就移除又从商店下载了一次，在使用过程中遇到一个问题vue.js not detected，打开调试没有找到，我使原创 2020-07-22 12:54:36 · 377 阅读 · 0 评论 -
vue.js引入
Vue引入vue引入有两种方式，一种直接通过网络，一直本地，我主要使用本地1、vue.js文件下载提取码：00002、与html文件建立链接其中src是vue.js的地址<script type="text/javascript" src="../js/vue.js"></script>3、一个简单的例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF原创 2020-07-22 12:22:46 · 286 阅读 · 0 评论