Skip to content

Vue.js

Vue.js > Javascript Vue.js > browser

Vue/cli#

install#

https://cli.vuejs.org/zh/guide/installation.html

resolve Error: EACCES#

https://stackoverflow.com/questions/48910876/error-eacces-permission-denied-access-usr-local-lib-node-modules-react The following line changes the ownership, so it is not as good. ~~sudo chown -R pablo:admin /usr/local/lib/node_modules~~ Should go the second answer https://stackoverflow.com/a/55274930

syntax#

file path#

src directory：~@, or @ from https://segmentfault.com/a/1190000016120011 #TOLEARN: webpack vuex orm vuetify quasar

dynamic style#

(Vue pass var to CSS/ CSS access Vue)

1
2
3
:style=SOME_OBJ_VAR
// or
document.documentElement.style.setProperty('--var-name', 'val');`

source1 source2

include .JS file from CDN#

use NPM

Components#

  • inherit Attributes inheritAttrs default on, will pass attributes to the template root element.
  • show modal : https://cn.vuejs.org/v2/examples/modal.html
  • Add external JS
  • passing var Vue -> Stylus is not possible

before 2019 (non - cli)#

WEB#Vue.js 学习笔记和问题 1 本文 从 HTML5 学习笔记独立出，沿用习惯用语 2 VUEX https://scrimba.com/g/gvuex 也讲了 VueX 的 logger-plugnin（在 Share code between Vue apps with Vuex Plugins 中） Namespace 默认是 false。当 a 不开启时，用 a/increment 会报错。如果两层 submodule 同时开启，需要 sub1/sub2/fun. 如果只开启 2（1 默认不开启），则只需要 sub2/fun Strict 默认是关闭的，开启相当于 use strict; mapActions 时，如果用 ES6 写法 mapAction(['some/nested/module/foo'])，调用的时候要 this['some/nested/module/foo']。或者直接 mapActions('path',['fun1','fun2']) 调用时不用写 path，直接 this.foo

Getters 里的函数，第一个变量是 state。第二个变量是 getters?。 不能调用 this.getters。

要调用 getters 中的函数，需要 this.$store.getters.prop 或mapGetters Mutations中的函数，第一个变量是state，第二个有可能会传$event。启用 namespace 时，要用 store.getters["b/submodule/fun"]。第三、四个变量是 rootState,rootGetters.问题：如果传 event+数据怎么办？ 要调用 mutations 中的函数，需要 this.$store.commit("fun",var,{root:true//到根目录找}).或mapMutations 启用namespace时，引用需要a/increment Actions的第一个参数是context=$store 要调用 actions 中的函数，需要 this.$store.dispatch("fun").

3 实践经验 3.1 VUE.COMPONENT 支持自定义传参（props） 2019-11-13 02:34:24

3.2 SETDATA({}) 单次设置的数据不能超过 1024kB 3.2.1 只改变部分值： key 还可以数据路径的形式给出，如'objdata.objkey.nestedobjkey' = keyvalue 3.2.2 改变的值对应键名中有变量： 用一个空对象暂存 var data = {} data[key] = value // key 可以是任何字符串 this.setData(data) ES6 this.setData({ [key]: value })

4 踩过的坑 4.1 变量命名 2019 年 5 月 27 日 19:54:36 v-bind:class 中，class 名不能包含该字符（见下一行）：

2019-5-30 03:35:28 实际上是因为没有用引号括起来。以后记得加引号。

4.2 COMPUTED 和 箭头函数 2019-5-30 01:25:07 Computed 属性中，不能用箭头函数，没效果，换成不箭头的就行。 2019-6-7 11:05:12 原因疑似： 箭头函数会导致作用域穿透

4.3 COMPONENT 中的 PROPS 不能用 camelCase 因为在 component 传参时候会把变量名全变成小写。 用 kebab-case 也不好，因为在调用变量时，vue 会把横线识别（解析）成减号

Span 或 div 中间的空格：是因为标签之间的换行。如

a
b
c

Ab之间没有空格，bc之间有。