Vue
qiphon3650
成功需要努力,知识源于分享!
展开
-
nuxt 需要修改的配置
nuxt 需要修改的配置css 抽离,便于 seo build: { // publicPath: '/static/', extractCSS: { allChunks: true } },静态数据的第一次渲染使用 asyncDataasyncData 中不能使用 thisasyncData 函数中提供了 context 相当于 thistype DefaultAsyncData<V> = ((this: V, context: Context) =>原创 2022-04-23 17:30:37 · 637 阅读 · 0 评论 -
vue vscode format 配置
vue vscode eslint format 配置解决自动格式化时单引号变双引号问题如果vscode单独安装了 prettier ,建议卸载掉"editor.codeActionsOnSave": { "source.fixAll": false, "source.fixAll.eslint": true }, "editor.formatOnSave": true, "vetur.format.defaultFormatterOptions原创 2020-10-11 17:42:30 · 611 阅读 · 0 评论 -
style scoped 中修改全局样式 (样式穿透)
style scoped 中修改全局样式 (样式穿透).imgWraper { /deep/ .el-upload{ width: 100px; height: 100px; line-height: 100px; }}原创 2020-01-16 11:21:35 · 1755 阅读 · 0 评论 -
vue 自定义组件实现 v-model
vue 自定义组件实现 v-model// 子组件<template> <el-radio-group @change="update" v-model="value"> <el-radio v-for="item in options.options" :name="item.value" :key="item.value" :label=...原创 2020-01-13 18:30:53 · 655 阅读 · 0 评论 -
vue笔记
读音: v-u-eviewvue到底是什么? 一个mvvm框架(库)、和angular类似 比较容易上手、小巧 官网:http://cn.vuejs.org/ 手册: http://cn.vuejs.org/api/ vue和angular区别? vue——简单、易学 指令以 v-xxx 一片html代码配合上原创 2017-12-31 22:56:23 · 243 阅读 · 0 评论 -
vue笔记-----简单的vue-resource动态获取数据
用vue模拟百度搜索,一部分代码<script src="./vue-1.0.28.js"></script> <script src="./js/vue-resource.min.js"></script> <style> .gray{ background:#ccc; } </style></head><body原创 2018-01-01 20:43:28 · 1721 阅读 · 0 评论 -
vue 简单的todolist
vue 用户名: 年龄:原创 2017-12-31 23:01:22 · 300 阅读 · 0 评论 -
关于vue DevTools不能使用的解决办法
最近使用vue发现vue DevTools 不能在本地使用,在网上找了找资料,没看到太满意的答案,于是自己就鼓捣起来了,进chrome扩展中心才发现问题出现在这里:进去之后你就会发现问题了,原来事情是如此的简单,原来就是人家默认监控的服务没有,所以自己加上就ok了,忘了还有一个事就是让它访问你的网址,这些就真的ok了好,到此我的vue DevTools就能用原创 2017-12-08 17:37:49 · 19819 阅读 · 13 评论 -
实例的生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:var vm = new Vue({ data: { a: 1转载 2017-06-27 10:19:43 · 842 阅读 · 0 评论 -
prop
使用 Prop 传递数据组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。子组件要显式地用 props 选项声明它期待获得的数据:Vue.component('child', { // 声明 props props: ['message'], // 就像 data原创 2017-06-27 17:31:52 · 436 阅读 · 0 评论 -
组件
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。要注册一个全局组件,你可以使用 Vue.component(tagName, options)。 例如:原创 2017-06-27 17:06:49 · 317 阅读 · 0 评论 -
vue笔记(二)
生存周期(具体内容看生存周期章节)1.0版1、created //实例被创建2、beforeCompile //编译之前3、compiled //编译之后4、ready //准备完毕 (一般刷新页面更新数据放在这个位置)5、beforeDestroy //销毁之前6、destroyed //销毁后<script src="./vue-1.0.28.js"></script原创 2018-01-01 22:40:42 · 201 阅读 · 0 评论 -
vue2 路由(笔记)
更多详细内容看官网https://router.vuejs.org/zh-cn/essentials/getting-started.html注意事项template 标签中必须有一个根元素首先引用是vue.js 之后引用 vue-router.js代码实例html lang="en">head> meta charset="UTF-8"> meta name原创 2018-01-31 17:24:23 · 280 阅读 · 0 评论 -
vue笔记(3)
父子组件,默认情况下父子组件之间数据不能直接使用,所以有一些新的方法、1、子组件获取父组件数据 —父组件调用子组件时//msg/msg2为父组件数据 —子组件内部声明 —–1、props:[‘m’,’y’] —–2.props:{ —-‘m‘:String//数据类型,如果从父级获取的数据不是该类型会报错原创 2018-01-10 21:45:12 · 318 阅读 · 0 评论 -
vue(笔记)2.0
vue2.x生命周期钩子 生命周期 之前: init created beforeCompile compiled ready -> mounted beforeDestroy destroyed 现在:原创 2018-01-23 23:41:13 · 346 阅读 · 0 评论 -
vue错误处理
vue-cli 生成的文件中assets文件夹中的图片不能使用vue中的data动态改变将图片放在static文件加下的路径就好了vue-cli build的文件相对路径问题在config文件夹下的index.js中找到上面的代码,改变assetsPublicPath的值即可...原创 2018-04-27 23:27:07 · 794 阅读 · 0 评论 -
vuex 笔记
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——...原创 2018-05-26 21:11:58 · 296 阅读 · 0 评论 -
vue 代码实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><div id="a原创 2018-07-05 19:42:27 · 5918 阅读 · 0 评论 -
@vue/cli 更换包管理工具 windows
@vue/cli 更换包管理工具 windows此文件如果是windows环境,则存在了 C:/user/administrator/ 下的 .vuerc打开这个文件,即可感谢网友saysmy的答案 https://www.cnblogs.com/saysmy/p/10064573.html...转载 2019-04-14 16:01:55 · 733 阅读 · 0 评论 -
服务器配置 react/vue 解决页面刷新404 问题
server { listen 80; server_name dd.t.com; root d:/Users/xiaositv/Desktop/2/dist/; location /cgi-bin { proxy_pass http://ddd.com:380/; ...转载 2018-12-14 21:34:11 · 701 阅读 · 0 评论 -
数组更新检测
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:push()pop()shift()unshift()splice()sort()reverse()你打开控制台,然后用前面例子的 items 数组调用变异方法:example1.items.push({ message: 'Baz' }) 。重塑数组变异方法(mutation原创 2017-06-25 17:30:16 · 572 阅读 · 0 评论 -
key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。这个默认的模式是有效的,但是只适用于不依赖子组件状态或临时 DOM 状态(例如:原创 2017-06-25 17:13:16 · 389 阅读 · 0 评论 -
v-for 和 v-if
v-for with v-if当它们处于同一节点, v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的 一些 项渲染节点时,这种优先级的机制会十分有用,如下: {{ todo }}上面的代码只传递了未complete的todos。而如果你的目的是有条件地跳过循环的执行,那么将 v-if 置于原创 2017-06-25 17:09:48 · 3885 阅读 · 0 评论 -
vue中的js类表达式
迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定, Vue.js 都提供了完全的 JavaScript 表达式支持。{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScrip原创 2017-06-24 16:28:46 · 2450 阅读 · 0 评论 -
v-text
更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。{{msg}}原创 2017-06-24 15:55:40 · 472 阅读 · 0 评论 -
v-html
双大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,你需要使用 v-html 指令:div v-html="rawHtml">div>更新元素的 innerHTML 。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。原创 2017-06-17 17:25:01 · 2841 阅读 · 0 评论 -
v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。This will never change: {{msg}} comment {{msg}} {{i}}原创 2017-06-17 17:17:10 · 2519 阅读 · 0 评论 -
Vue属性与方法
每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a: 1 }var vm = new Vue({ data: data})vm.a === data.a // -> true// 设置属性也会影响到原始数据vm.a = 2data.a // -> 2// ... 反之亦然data.a = 3vm.a // -> 3注意只有这原创 2017-06-17 17:02:00 · 1204 阅读 · 0 评论 -
组件化应用构建
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、自包含和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: vue 组件模板 v-bind 指令将待办项传到每一个重复的组件中 // window.onloa原创 2017-06-17 16:17:02 · 1398 阅读 · 0 评论 -
v-model 数据绑定
Vue 还提供了 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。 <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>vue</title> &原创 2017-06-17 15:02:01 · 7347 阅读 · 3 评论 -
v-on事件绑定
我们可以用 v-on 指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法: vue {{msg}} {{val.a}} 点我 // window.onload= function(){ var app2 = new Vue ({ e原创 2017-06-17 14:47:41 · 15104 阅读 · 0 评论 -
过滤器
Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示:{{ message | capitalize }}Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind 表达式(从 2.1.0 开始支持)中使用,因原创 2017-06-24 16:45:32 · 261 阅读 · 0 评论 -
属性计算
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如: {{ message.split('').reverse().join('') }}在这种情况下,模板不再简单和清晰。在意识到这是反向显示 message 之前,你不得不再次确认第二遍。当你想要在模板中多次反向显示 message 的时候,问题会变得更糟糕。原创 2017-06-24 17:37:00 · 454 阅读 · 0 评论 -
#计算属性-vs-Methods
method每调用一次就计算一次;computed只在msg更新时计算,计算结果存在缓存中。你可能已经注意到我们可以通过调用表达式中的 method 来达到同样的效果:Reversed message: "{{ reversedMessage() }}"我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是原创 2017-06-25 10:10:23 · 1447 阅读 · 0 评论 -
v-for 遍历
vue {{msg}} {{val.a}} // window.onload= function(){ var app2 = new Vue ({ el:"#test", data:{ msg:'润元装饰', msg1:"家装"+new Date(), m原创 2017-06-17 14:36:26 · 1010 阅读 · 0 评论 -
v-if 判断语句
这个例子演示了我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据。而且,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/删除元素时自动应用过渡效果 vue {{msg}} 鼠标悬停几秒钟查看此处动态绑定的提示信息!附加刷新的时间 --> v-if=原创 2017-06-17 14:12:30 · 76568 阅读 · 3 评论 -
v-show
类型: any用法:根据表达式之真假值,切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。h1 v-show="ok">Hello!h1>不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。注意, v-原创 2017-06-24 15:59:02 · 629 阅读 · 0 评论 -
v-bind style绑定
对象语法v-bind:style 的对象语法十分直观——看着非常像 CSS ,其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case):data: { activeColor: 'red', fontSize: 30}直接绑定到一个样式对象通常更好,让模板更清晰:data: {原创 2017-06-25 14:47:13 · 7807 阅读 · 0 评论 -
v-bind
缩写: :类型: any (with argument) | Object (without argument)参数: attrOrProp (optional)修饰符:.prop - 被用于绑定 DOM 属性。(what’s the difference?).camel - (2.1.0+) transform the kebab-case attri原创 2017-06-24 16:10:53 · 2235 阅读 · 0 评论 -
观察-Watchers
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。 Ask a yes/no question: {{ answer }} var watchExampleVM转载 2017-06-25 12:00:57 · 274 阅读 · 0 评论