美文网首页
Vue.js总结学习

Vue.js总结学习

作者: DannyCloud | 来源:发表于2018-09-27 20:06 被阅读0次

    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

    相关文章

      网友评论

          本文标题:Vue.js总结学习

          本文链接:https://www.haomeiwen.com/subject/nrieoftx.html