Vue.js总结学习
1、Vue.use()
vue官网有给出明确的文档 vue插件开发 ,我们需要有一个公开方法install,里面来包含我们要处理的业务。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:
// plug.js
const plug = {// 定义一个对象
install (Vue, options) {// 需要拥有一个 install 方法
}
}
// 导出这个对象
export default plug
那么此时我们就可以通过 use的方式来使用
import plug from 'plug'
Vue.use(plug)
注:插件开发的顺序:声明(install)---注册(use)---写插件---使用
第一种,可以通过Vue.use(plug)全局方法进行调用。
进行 Vue 的大型项目开发时,如果用vue-cli生成项目目录结构,Vue.use()方法一般在 main.js 中调用。
第二种实际上是插件本身帮你完成了Vue.use()的调用。
这种情况下,插件会去检测是否存在 Vue 全局变量,如果存在,就自动调用Vue.use()。所以,如果你的项目中是使用 script 方式引入的 Vue.js(这种情况下 Vue 才会作为一个全局变量存在),在使用比如vue-router、axios之类的插件时就可以直接引入然后使用,不用再调用Vue.use()。
2、Vue中的$符号
Vue 实例暴露了一些有用的实例属性与方法,它们都有前缀 $。
(1)通过Vue.set方法设置data属性,如 Vue.set(data,'sex', '男')
(2)var vm =new Vue({el:'#example', data: data}) //创建实例
使用 vm.$set实例方法,这也是全局 Vue.set方法的别名
3、Vue组件中的data为什么用function返回对象,而不是直接使用对象data:{}
如果不用function return ,每个组件的data都是内存的同一个地址,那一个数据改变其他也改变了,这当然就不是我们想要的。 用function return 其实就相当于申明了新的变量,相互独立,自然就不会有这样的问题。
上面两个ComponentA的实例中的data将同时为组件定义时data对应的对象,即相当于两个实例的data相互影响了。也就是第一个实例的data和第二个我们并不想改变的实例的data也会发生改变。4、vue.config.productiontip = fals的作用
2.2.0 新增;类型: boolean;默认值: true
用法:设置为 false 以阻止 vue 在启动时生成生产提示。
5、assets文件夹与static文件夹的区别
区别一:src下的assets文件,最后运行时需要进行打包,被webpack处理解析为模块依赖,只支持相对路径形式。例如,在 <img src="./logo.png">和 background: url(./logo.png)中,”./logo.png” 是相对的资源路径,将由Webpack解析为模块依赖。
static文件不需要打包就直接放在最终的文件中了,会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件/static/[filename]。
区别二:assets用来放置样式、静态图片,只要src下面的组件中用到的资源就放在assets中。
static用来放没有npm包的第三方插件,字体文件。
注:“../”表示上一级目录开始。
“./”表示当前同级目录开始。
“/”表示根目录开始。
6、vue引入公共的css及在对应的模板.vue文件中引入css的方法
(1)在main.js中通过ES6语法
(2)在对应的模板.vue文件中引入
7、axios跨域方法
一般通过代理的方式跨域
详见:https://blog.csdn.net/u012369271/article/details/72848102