vue学习经验项目目录

目录一.Vue的介绍1.为什么使用框架2.框架和库的区别3.vue是什么4.组件之间的传值10. import 和 export11.源码目录12.name 的使用15.computed 计算属性的使用16.vue插件大全http://tangjiusheng.com/vue/155.html17.传递事件用$event18.vue的默认打...

青柠知秋

5805人浏览 · 2018-05-24 14:03:04

青柠知秋 · 2018-05-24 14:03:04 发布

16.vue插件大全 http://tangjiusheng.com/vue/155.html

21.vue引用静态文件中的css文件，并只给某个组件使用

22.vue监听对象属性

23.vue 中 window.onresize的使用

24.打包路径配置

25.路由route的参数信息

26. vue强制更新iframe

27. url中 localhost 改成 ip

一.Vue的介绍

0.安装

1.为什么使用框架

(1).企业中，使用框架，能提高开发效率

(2).提升效率发展历程：① 原生JS（要考虑各个浏览器的兼容性）→

② JQuery之类的类库（解决了兼容性问题，） →

③ 前端模板引擎（需要重绘、重排）？ https://www.cnblogs.com/jingwhale/p/5811800.html →

④ vue.js /Angular.js （能够帮助减少不必要的DOM操作，提高渲染效率；双向数据绑定的概念【通过框架提供的指令，只需关心数据的业务逻辑，不再关心DOM是如何渲染的了。】）

2.框架和库的区别

3.vue是什么

官网解释如下

https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe8a5c72aaa98c11bf6fc57ae1b6c0&source=41#wechat_redirect

4.vue的核心应用

vue有几大核心用法：指令、组件、数据、生命周期

指令：

vue不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。

此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

另外，vue也可提供事件交互功能。

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<span> {{ message }} </span>

<ul>

</ul>

<p>{{ message3 }}</p>

</div>

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!',

message2: '页面加载于 ' + new Date().toLocaleString()，

message3: 'Hello Vue!'

seen: true,

todos: [

{ text: '学习 JavaScript' },

{ text: '学习 Vue' },

{ text: '整个牛项目' }

]

}，

methods: {

reverseMessage: function () { this.message = this.message.split('').reverse().join('') }

}

})

组件：

5.数据与方法

还有一种是用指令，v-once

6.生命周期

生命周期中，如果用this，少用箭头函数，除非在函数外部先把this赋给别的值了

可以这样，_this = this , val=>_this.myMethod()

7.异步更新列队

当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。

写的乱。。。

✿ vue用2个{{}}是不是为了块级作用域？

✿ 停止项目 WebStorm 在Terminal中Ctrl + c

✿ 从新加载表格或图形时，要先清一遍数据，切记。

✿ 谷歌浏览器有个很好的插件 vue devtools 安装完项目在debug模式下运行。

vue的data return是不是就相当于定义变量？

prop就是上级传下来的变量。

用到哪个组件的组件，也要一起input进来吗？

$refs是相当于id吗 this.$refs.bldDataTable.clearSelection(); →this.$refs.组件绑定的ref名.组件的方法

✿ vue 在方法中使用data return定义的参数要在前面加this.

✿ watch监听：默认第一次加载不执行，当值变化才会执行。可是把监听的对象定义成对象，设置属性，让它执行。

https://blog.csdn.net/wandoumm/article/details/80259908

watch制度里，应该是1秒一执行，一些执行类的，不要放在这里，只放参数变化就好。

在methods中，绑定的点击方法，有属性需要在watch里变化的，会有时间差，需要用个定时器，让watch中参数变完，在往下执行。

1.App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

router-view : https://github.com/vuejs/vue-router/blob/1.0/docs/zh-cn/nested.md

2.main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.components中的vue

✿ 渲染css时用到 <style scoped></style>

在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块。慎用！ http://www.jb51.net/article/129228.htm

✿ 报错Component template should contain exactly one root element

写vue时，template中根目录下只能包含一个,应该全部写入根目录(<div>)里

✿v-model 双向绑定 https://segmentfault.com/a/1190000007662815

✿v-bind 绑定html属性 https://www.jianshu.com/p/98dfa4c6389c

✿:class 动态绑定 https://www.cnblogs.com/cina33blogs/p/6738038.html

✿.split('')分割每个字符 .reverse()倒序排列 .join('')组合每个字符

https://blog.csdn.net/hehaoyang666/article/details/39137553

.class1{
background: #444;
color: #eee;

}

<body>

</div>

{{5+5}}<br/>
{{ok?'YES':'NO'}}<br/>
{{message.split('').reverse().join('')}}

</div>
<script>
new Vue({
el: '#app',
data:{
class1: false
}
});
</script>

</body>

理解下这段代码，默认class1是false ，v-model=class1=false , 点击input v-model改变状态为true ，class1=true ，

：class={class1=false}时，class未绑定：class={class1=true}时，class绑定class1。v-bind将class=class1绑定到div上。

✿vue.set vue不会自动更新改变，需要数据动态响应 https://www.cnblogs.com/null11/p/7016482.html

✿v-if https://www.cnblogs.com/dyfbk/p/6861255.html

✿v-for http://www.runoob.com/vue2/vue-loop.html

✿watch 监听属性 http://www.runoob.com/vue2/vue-watch.html

输入的参数是kilometers的值，同时，它是newValue，再输入时，它就变成旧值了，新输入的值为新值。

watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}

// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;

✿ Mustache (双大括号写法)不能在 HTML 属性中使用，应使用 v-bind 指令

✿<router-view/> router-link相当于<a> ? 在vue-router/dist/vue-router.js里有定义（源码）

https://blog.csdn.net/u010881899/article/details/77919464

4.组件之间的传值

https://www.cnblogs.com/LoveAndPeace/p/7273648.html

父 → 子

子组件需要接受的参数写在props:{}中比如需要得到参数a

父组件需要绑定v-bind(简写：)参数a 并定义a的参数a=b 在date中return定义b的值 b=c 同时，引用子组件。

子 → 父

子组件需要执行函数e（函数在methods或watch中定义都可以），e函数中需要执行$emit("自定义名k",可选参数m)

$emit() 作用就是触发自定义函数，传递参数。

Event.$emit('msg',this.msg);　发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，

第二个参数是这个数据现在的位置；

　　 Event.$on('msg',function(msg){　接收数据，第一个参数是数据的名字，与发送时的名字对应，

第二个参数是一个方法，要对数据的操作

父组件需要v-on绑定k 并给k定义处理数据的方法n （v-on:k="n"）在方法中，定义方法n(参数){}处理子组件传来的参数。

(n就是msg同名)

5.package.json http://javascript.ruanyifeng.com/nodejs/packagejson.html （待验证）

定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）

"dependencies":{指定了项目运行所依赖的模块。包含打包时，生产机用到的组件}

"devDependencies":{指定项目开发所需要的模块。包含开发机用到的组件，比如babel-loader，这个转码工具把代码在开发机转码后传到生产机，就不需要再转码了，所以生产机不需要用这个工具。}

6.vue中jsonp谁知道怎么使用（待验证）

7.vue的生命周期 https://segmentfault.com/a/1190000008010666

https://segmentfault.com/a/1190000011381906

8.druid连接池溢出报错，改数据库的池大小就好了。

9.vue 的 computed https://cn.vuejs.org/v2/api/#computed

再执行 vm.a ，是返回2，因为aDouble是只读的。只有set能改变a的值。

10. import 和 export

如果组件import的是基类，就用extends引用；

(mixins 用于实现多继承，由于extends只能实现单继承，使用mixins就很方便的让我们从多个基类中继承方法。)

如果组件import的是组件，就用components挂载？作为子组件用。

export导出，也可导出基类或者导出组件

在父组件里import 子组件中 export

vue中，如果需要使用子组件的东西，子组件需要将内容导出。

① 在子组件写导出如果 export {变量标识符}

在父组件写 import {变量标识符} from 子组件（注：名字必须用大括号括起来,如果引入一个组件中的多个，用，隔开）

② 在子组件写导出如果 export default （注：一个组件只能写一个default）

使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

在父组件写 import 任意定义个标识符 from 子组件（注：随意写的标识符，不用大括号括起来）

但不能写default了，还是可以继续导出变量之类的。

注：我们经常习惯在组件里写default ，但现在知道这是为什么了。

https://www.cnblogs.com/dupd/p/5951311.html

https://blog.csdn.net/qq_38801354/article/details/78024680

a.js中

const a = "b";

export {a}

另一个b.js文件中，import a from './a' 再console.log(a) ，a是无法识别的，打印出undefined

如果想用，就要用import {a} from './a' 这样导出时{a}，导入的时候就要用 {a}

用默认导出就会跟方便。

导出 export default a ，在导入时，import xxx from './a' xxx可以用任意名，而且不同大括号，不会无法识别。

11.源码目录

如果学习源码推荐前辈的文章 https://www.imooc.com/u/6702342/articles

vue目录结构详解

12.name 的使用

已知作用，在用vue的调试工具中，显示名字

http://www.php.cn/js-tutorial-405852.html

13.vue在组件中选择自己本身，同jquery一起用。

$($(this)[0].$el)

14.在绑定style时如果用三步运算符

:style="{
left: json.edge.style?(json.edge.style.left +'px'):(10 +'px')
}"

15.computed 计算属性的使用

watch是监控data中的属性

computed会根据它依赖的属性，生成一个属性，让对象可以使用这个属性。

属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

https://www.cnblogs.com/gunelark/p/8492468.html

16.vue插件大全 http://tangjiusheng.com/vue/155.html

17.传递事件用$event

@click="preventE($event)"

methods:{ preventE(e){

e.stopPropagation();
e.preventDefault();

}

18.vue的默认打开

(1). 在路由时，当写的component的是文件目录时，会自动找它下面的index.vue文件

相当于 component :"./layouts/index"

(2). 在import时，引用my文件夹下index.vue 等于引用 my.vue，可以用my.vue代替 my/index.vue

import my from '../components/my/index.vue' = import my from '../components/my.vue'

19.vue获取组件自己的宽度

组件自己绑定个class，这个class设定最好是唯一的。

写的乱，意会下，Ha~

20.vue的keep-alive缓存

keep-alive只是一种长连接的设置，并不能保证http请求之外的页面保持这个时间

所以不能缓存iframe，如果想显示成缓存，通过添加多个iframe，并控制现隐的方式实现。

https://www.jianshu.com/p/b6461835e190

21.vue引用静态文件中的css文件，并只给某个组件使用

引用静态文件static下的文件，要用相对路径。

可以在script中引用，全局都可用，或者在style scoped中使用，只给当前组件使用。

https://www.cnblogs.com/huangqiao/p/7798887.html

22.vue监听对象属性

想要监听对象的属性，在data中，对象必须先有这个属性，如果开始没有这个属性，是后来加入的，监听不到。

23.vue 中 window.onresize的使用

一个页面只能用一个window.onresize，多了会出现覆盖，想多个组件都用这个功能，可以通过父子间传参，子传父，父传子等。

24.打包路径配置

https://www.cnblogs.com/luosiding/p/8268837.html

25.路由route的参数信息

https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7

当前页面应该是数组的最后一个值。

26. vue强制更新iframe

在页面内，如果iframe的界面里进程太多，导致更换了src，但界面还是没有刷新，这时用v-if来销毁重建这个iframe。

27.vue使用jQuery

一种是npm安装配置

另一种是在main.js中引入js文件使用

27. url中 localhost 改成 ip

打开package.json文件，添加 --host ip地址

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.0.114",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

4.vue-cli项目目录

https://www.jb51.net/article/111658.htm

https://www.cnblogs.com/zhangruiqi/p/9062005.html

参数详细：https://www.cnblogs.com/sxz2008/p/6699127.html

4.1. config文件夹

https://www.cnblogs.com/caideyipi/p/8187656.html

(1). index.js

config/index.js 等： https://www.cnblogs.com/whkl-m/p/6627864.html

在config下的index.js文件，保存着项目的主要配置，内部执行，

并不是在项目的index.html界面中使用，所以，在这个文件里写console.log（）在界面上是无法打印的。

（它是怎么被使用的？）

① require方法是用来加载模块的，先用它将node的path模块加载进来，我们需要用这个模块的一些方法来处理路径。

path 模块是 node 用于整理、转换、合并路径的核心模块，只要是路径问题，都可以交给它处理。

但它仅仅是处理路径字符串，而不会去坚持或处理文件。

require ：https://www.cnblogs.com/bigbrother1984/p/4174663.html

path模块：https://www.cnblogs.com/52cik/p/learn-node-path.html

（每个需要用到path模块的js文件都需要 require一遍 path，再使用，同import）

因为在config/index.js中打印不显示，在main.js加载path模块，并把它打印，可以看出，path是一个有很多属性方法的对象，

使用它时，按照使用对象属性的方法使用。

常用 path.join 拼接路径，用 path.resolve 拼接获取绝对路径。

当同一个项目部署到不同的环境（生产、测试）它的域名不同，地址路径不同，

这时候就需要拼接得到路径，不需要担心跨平台问题。

② module.exports

https://www.cnblogs.com/jone-chen/p/5070342.html

module.exports 的作用是类似新建个对象，并导出。

例如，在a.js中 module.exports个新对象，在其他js文件中， var c=require("./a.js") 就是把这个新对象引进来了，

之后就可以使用了。

③ 在module.exports的这个对象，有2个属性 build 和 dev

build是项目环境配置的一些参数 (生产，用于打包)

dev是开发环境配置的一些参数

如果想配置其他环境，也可以在这里配置，可以参考vue-element-admin的代码

https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%85%B6%E5%AE%83

④ __dirname

Node.js 中，__dirname是node.js的一个全局变量，用于指向当前执行脚本（index.js）所在的目录路径，而且是绝对路径。

所以当你在 /d1/config/index.js 文件中写了 __dirname，它的值就是 /d1/config。

但这个说法，好像不太对，在其他js文件中，比如在main.js中 console.log(__dirname)，打印出 / ，

router文件夹下的index.js中打印出的也是/。是不是说，__dirname就指项目的 /，不懂。

⑤ build 中：这个文件是用于打包的

assetsRoot：是打包到本地的文件路径，必须是本地文件系统上的绝对路径。应该指向包含应用程序的所有静态资产的根目录。

../ 就是当前项目的根目录下

打包完的位置，和dist 文件夹下的内容，这个文件夹是要传到服务器，让服务器运行的，界面和静态文件。

图片存到src/assets/下，是无法动态获取地址找到的，所以，这类静态文件要存到static文件夹下，通过绝对路径找到。

src中的文件会在打包时，都解析存到static文件夹中。

打包命令 npm run build 或 node build/build.js 这个命令在package.json文件夹下定义。

开始误会命令，执行 node build 这样写会导致一个报错，找不到build模块。

index: 是要打包到本地的index.html文件，必须是本地文件系统上的绝对路径。

assetsSubDirectory: 是打包静态文件的下级目录名

被webpack编译处理过的资源文件都会在这个build.assetsRoot目录下，

所以它不可以混有其它可能在build.assetsRoot里面有的文件。例如，假如build.assetsRoot参数是/path/to/dist，

build.assetsSubDirectory 参数是 static, 那么所以webpack资源会被编译到path/to/dist/static目录。

每次编译前，这个目录会被清空，所以这个只能放编译出来的资源文件。

static/目录的文件会直接被在构建过程中，直接拷贝到这个目录。

这意味着是如果你改变这个规则，所有你依赖于static/中文件的绝对地址，都需要改变。

assetsPublicPath: '/',

这个是通过http服务器运行的url路径。在大多数情况下，这个是根目录(/)。

如果你的后台框架对静态资源url前缀要求，你仅需要改变这个参数。

在内部，这个是被webpack当做output.publicPath来处理的。

后台有要求的话一般要加上./ 或者根据具体目录添加，不然引用不到静态资源

productionSourceMap：在构建生产环境版本时是否开启source map。

SourceMap 一个存储源代码与编译代码对应位置映射的信息文件 https://www.jianshu.com/p/ebf0ca8febb2

devtool webpack提供的用来方便调试的配置，它有四种模式，可以查看webpack文档了解更多

productionGzip: false , //前台开启压缩，这个优化方式需要后台配合，默认不打开开启gzip模式。

vue开启gzip性能优化主要分为两部分，成功开启后将大大优化vue首页加载时长。

https://blog.csdn.net/qq_19767623/article/details/83185132

productionGzipExtensions: ['js', 'css']： gzip模式下需要压缩的文件的扩展名

bundleAnalyzerReport: process.env.npm_config_report ：是否开启打包后的分析报告

⑥ dev 启动本地项目的一些配置

port ：dev-server监听的端口

⑦

二.常见错误

1.Unknown custom element: <right-menu> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

答：可能是import 进来了，但没有在components中引用

不懂

1.官网上 el 的这句话啥意思，为什么不能挂到body上。

2.扩展是怎么执行的

3.vue 懒加载？

path: '/about',
name: 'about',
component: () => import('./views/About.vue'),

4.@click.native.prevent

在封装好的组件上使用，所以要加上.native才能click

prevent就相当于..event.preventDefault()

所以@click.native.prevent是用来阻止默认行为的 ;

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...