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处理解析为模块依赖,只支持相对路径形式。例如,在 和 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

你可能感兴趣的:(Vue.js总结学习)