Vue.js | 易学教程

CodeMirror的使用方法

阅读更多关于 CodeMirror的使用方法

这里是利用vue来开发项目： 1 、利用textare生成编辑器 <textarea ref="textarea"></textarea> 2 、创建编辑器对象 let editJson = CodeMirror.fromTextArea( this .$refs.textarea, { mode: 'application/json', // json数据高亮 lineNumbers: true , // 显示行号 theme: 'eclipse', // 设置主题 lineWrapping: 'wrap', // 文字过长时，是换行(wrap)还是滚动(scroll),默认是滚动 showCursorWhenSelecting: true , // 文本选中时显示光标 cursorHeight: 0.85, // 光标高度，默认是1 // 代码折叠 lineWrapping: true , foldGutter: true , gutters: [ "CodeMirror-linenumbers", "CodeMirror-foldgutter" ], matchBrackets: true , // 括号匹配 smartIndent: true , // 智能缩进 // 智能提示 extraKeys：{ "Alt-/": "autocomplete", "F11":

Vuexfire bindFirebaseRef with pagination infinite scroll

阅读更多关于 Vuexfire bindFirebaseRef with pagination infinite scroll

问题 Question : How can I add pagination (infinite scroll) to my binded Firestore VuexFire reference without re-querying previously retrieved (and binded) results? Background : I am currently using VuexFire firestore binding to fill a timeline for most upvoted posts, as an action, in my Vuex store like this: fillTimeLine: firebaseAction( ({ bindFirebaseRef }) => { bindFirebaseRef( 'timelineResults', db .collection('POSTS') .orderBy('combined_vote_score', 'desc') .limit(30) ) }) This will retrieve

uni-app学习记录03-路由跳转

阅读更多关于 uni-app学习记录03-路由跳转

<template> <view class="content">  <view v-show="false"></view>  <view v- if ="false"></view> <view>我是文本</view> <button type="primary" @click="toPath">跳转注册页面</button> <button type="primary" @click="toPath1">跳转未注册页面</button> <button type="primary" @click="toPath2">关闭当前页面再跳转</button> <button type="primary" @click="toPath3">可以返回几层页面默认为一层</button> </view> </template> <script> import test from "../../components/test.vue" export default { data() { return { msg: "小白" , } }, methods: { toPath() { // 这个用于跳转到Tab注册过的页面 uni.switchTab({ url: "../shezhi

Webpack and VueJs CLI v3 – Need relative path for images and web-fonts

阅读更多关于 Webpack and VueJs CLI v3 – Need relative path for images and web-fonts

问题 Using: Vue CLI 3.0.0-rc.3 How can I config my app, that it is loading the A) css itself , B) the fonts loaded in css and C) the images from a relative path depending to the parent-folder the app is located? My complete vue app is currently running without extra webpack config file. I already know, I would need to create a webpack.config.js, but I don't know what plugins or configuration is necessary. The app is full functional under absolute path http:whatever.local/ of course. But I need to

Laravel Vue Non SPA - How to split the files for every page for its vue js components?

阅读更多关于 Laravel Vue Non SPA - How to split the files for every page for its vue js components?

问题 My application is using laravel vue but not SPA,.. so im still using laravel blades to separate the pages. Every page are importing app.js. My App.js is compiled by webpack and all my vue components are compiled on that file. so the problem is the app.js getting MB size and the every page will slow to load that file. Is their way to split the code of vuejs or separate the file for every pages using webpack? this is my webpack.js in my web application. const mix = require('laravel-mix'); /* |-

Laravel Vue Non SPA - How to split the files for every page for its vue js components?

阅读更多关于 Laravel Vue Non SPA - How to split the files for every page for its vue js components?

PWA doesn't load when router is in history mode (Vue CLI 3 based project)

阅读更多关于 PWA doesn't load when router is in history mode (Vue CLI 3 based project)

问题 I have a Vue CLI 3 based app which I would like to function as a PWA. I need it to work in history mode, because the hash intervenes in redirects that I'm doing as part of an OAuth based authentication process. When the routing is in hash mode, the manages to load fine as PWA. Once I change the mode to 'history', the PWA I installed won't load anymore - I'm getting a white screen instead. I checked the browser version and it still works fine (I configured the fallback in my NGINX server to

PWA doesn't load when router is in history mode (Vue CLI 3 based project)

阅读更多关于 PWA doesn't load when router is in history mode (Vue CLI 3 based project)

How to display mysql blob image in html using Vuejs?

阅读更多关于 How to display mysql blob image in html using Vuejs?

问题 I have a vue file like this, export default { data(){ return{ info: { name: '', image: '', }, errors: [] } }, created: function(){ this.getInfo(); }, methods: { getInfo: function(){ this.info.name = response.data.results[0].name; this.info.image = response.data.results[0].image; } } } I am passing data from this file into a child Vue component. The child component is as follows, <template> <div class="ui items"> <div class="item"> <div class="ui small image"> {{info.image}} </div> </div> <

用vuex实现购物车功能

阅读更多关于用vuex实现购物车功能

效果图　　　　　　展示目录结构 product组件（纯静态代码） cart组件（纯静态代码） info组件（纯静态代码）完成以上的三个组件，现在要开始调用这些组件，在App.vue中调用　　　　如果你的姿势正确的话，会出现这个画面解释这里为什么要分开组件的编写，vuex是就是存储的数据的中心的，每个组件都是拿到数据，这样才能vuex的价值 store/index.js modules/cart.js 搭建问vuex的我们现在要使用vuex的，在main.js中使用到这步，vuex的模板基本，但是没有效果怎么办，现在开始修改的product.vue中data中的shoplist剪切到cart.js中的state中，这里解释一下，state和组件中大data作用是一样，都是的设置假数据的和变量，查看文档的 state 修改cart.js的state 既然state和data的作用是一样的，那么我们在组件中拿到state中的shop_list的数据呢？这是需要getters的处理哦组件中怎么拿到这个shoplist数据呢？查看文档 getters 中的mapGetters辅助函数的方法这个数据是从product组件剪切走的，现在还回去，是这样秀的以上商品列表功能完成接下来是添加商品进购物车功能现在编写addToCart的方法，我们会到cart,js