vue-cli 开发 (vue 开发笔记)

vue-cli学习资料:

http://m.php.cn/article/394750.html  或

https://www.cnblogs.com/zhanglin123/p/9270051.html

vue-cli 实践案例 :  https://blog.csdn.net/yuanyuanispeak/article/details/73530523

1、组件的data必须是函数 :  vue官网规定的

2、es6拓展的对象功能:通过省略冒号与 function 关键字,将这个语法变得更简洁。

  a、对象 键值对的值必须是变量名且和键名相同才可以使用这种简写。

  b、函数都可以,因为对象中的函数要么是函数名,要么是匿名函数。

import FooterNav from '../../components/footer.vue'

export default {
    components:{
        FooterNav
    }
}

3、import OO from XX        参考: http://m.php.cn/article/394750.html

  a、import相当于var、let去声明一个变量OO(自定义,解构赋值都可以)

  b、from:引入哪个文件  

    .如果是自己定义的文件,一定要写相对路径‘./' (如果是用的自己配置的路径别名,就只能看build目录下的配置文件了。参考:https://blog.csdn.net/m0_37828249/article/details/80781370
    .如果引入node——modules下的文件不需要写

    

  import 变量 from ‘模块路径
  c、此时OO返回一个对象

  d、Vue中import from的来源  : https://blog.csdn.net/fyyyr/article/details/83657828 ( import后面的 路径 指向)

  4.如果希望对象中有内容,需要XX先暴露出对象,这样OO才能接收到并在当前文件使用。根据暴露对象的格式,决定接手变量的格式

export default {
    components:{
        FooterNav
    }
}

4、父组件传值到子组件:   https://www.cnblogs.com/daiwenru/p/6694530.html  或  https://www.jianshu.com/p/91416e11f012  ($ref 方法可以实现,但是不推荐 )

  父组件要把值传递给子组件,只能在使用子组件时,作为标签(自定义的组件标签)属性传递过去。

// 父组件
<
template> <div> <child message="hello"></child> // 这里的属性值同样可以使用vue的数据动态绑定,v-bind:message 或 :message </div> </template> <script> import child from '../../components/footer.vue' export default { components:{ child } } </script>

  子组件使用父组件传递过来的值必须使用 props去接收传来的数据。

// footer.vue 子组件
<
template> <div class="footer fixed"> <div>{{ message }}</div> </div> </template> <script> export default { props:['message'] } </script>

5、子组件传值到父组件:

  a、在子组件中创建一个按钮,给按钮绑定一个点击事件

  b、在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数

  c、在父组件中 对应子组件标签中 绑定 监听该自定义事件,并添加一个响应该事件的处理方法。(注意,必须在对应的子组件标签上绑定自定义的事件才有效)

  参考 : https://www.cnblogs.com/daiwenru/p/6694530.html

6、动态组件 :  https://www.cnblogs.com/xiaohuochai/p/7395694.html

<component :is="currentView"></component>

7、Vue2.0通过二级路由 (嵌套路由) 实现页面切换 : https://blog.csdn.net/Fabulous1111/article/details/78859203 或 http://www.php.cn/js-tutorial-401363.html

   二级路由 相对于 普通路由是解决什么问题的呢?

  注意:子路由 是嵌套路由,二级路由只能嵌套在一级路由中使用。

8、vue插件全局都用(toastc插件 示例):https://www.jb51.net/article/121120.htm  或  https://blog.csdn.net/qq_34802010/article/details/81668692(推荐,亲测有效)

    感悟:vue组件:在使用的地方 要 引入 这个vue 文件。 vue 插件:显示的ui放在一个vue文件中,vue插件需要一个js文件进行使用处理的。main.js只要加载这个js文件。

 9、<router-view> 组件的作用 :https://blog.csdn.net/webbingandkami/article/details/79331405

  说明:router-view 组件的作用    就是将每个路径映射到对应的组件(vue.js 教程的pdf文件中 对vue-router 的作用就是这样介绍的)

  体会:个人理解,就是解析  地址栏上的 url,将对应的组件放在 router-view 上渲染(这里多个router-view组件,就会多个进行渲染)。

     利用这个特性,可以 控制 需要 keep-alive 的组件进行, 区别 放在router-view 中。(github中的 vue2-elm项目就是这么处理的)

10、路由配置 中 meta字段(元数据)的作用:https://www.jianshu.com/p/33c9e7454028  或  http://m.hangge.com/news/cache/detail_2130.html

  简单理解,就是给对应的路由添加一些信息(状态),对应这个url地址的页面,可以是获取到这些信息的(状态)。

{
  path: '/msite',
  component: msite,
  meta: { keepAlive: true },
},
<router-view v-if="$route.meta.keepAlive"></router-view> <!-- 页面中获取路由 meta中keepAlive字段的信息 -->

11、vue的  组件、自定义事件名的 命名规范 : https://blog.csdn.net/qq_29185757/article/details/84963571(组件名) 或 https://blog.csdn.net/zgpeterliu/article/details/80363445

  留言:目前 单文件的组件中 没有出现过 因为没有严格按照命名规范出现的问题。暂时不管这个。

12、v-for循环列表中,还有一种    v-for="n in 10"   的循环用法。  n 由原来的 0 ~ 9 迭代变成 1 ~ 10 迭代。

 

 

 

 


 

1、后缀名为vue的文件的开发: https://www.jb51.net/article/123994.htm

2、路由 步骤:(注意路由中的组件 和 重复使用的组件的区别)

  a、组件页面开发好

  b、将这个组件配置到路由表中  src/router/index.js;   先引入  import。。。;     再放入路由表中。

  

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/test'

 Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld   
    },
    {
      path: '/test',    // 这个值决定访问该页面时url后面的hash值。如 : http://localhost:8080/#/test
      name: 'test',    //
      component: test   // 这个值是引入文件的变量即 import 后面的变量名
} ] })

3、路由与页面间导航  :  https://www.jianshu.com/p/bc923ec4d28b

  a、<router-link :to="{ name : 'explorer' }">  和 <router-link :to="/explorer"> 的区别是前一个是以路由的name作为参数,后一个是以path属性作为参数。

  b、动态路由: (需要好好研究下

4、vue同级可以有多个router-view视图  :  https://blog.csdn.net/qq_34664239/article/details/79639459

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

3、Vue.js中使用require,import   :   https://blog.csdn.net/Deft_MKJing/article/details/80388770

 说明:目前所有的引擎都还没有实现import,node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import 语法会被转码为require。所以目前来说import和require引入的结果是一样的。

    但是,import可以使用解构的方法导入,且只能在文件头部使用,而require可以在任何地方使用。

3、vue-cli 中 组件的使用(两种方式):

  a、在main.js文件中进行全局注册,在需要使用这个组件的地方,组件使用这个组件的标签就可以了。   注:  Switch.name  应该是这个组件 默认 的 标签名,可以设置成自定义的标签名。

// main.js 文件
import { Switch } from 'mint-ui'; Vue.component(Switch.name, Switch);

  b、main.js 中不动,直接在需要使用的地方,引入这个组件,在 components 选项中注入这个组件。  

//  需要使用这个组件的 .vue文件中
import { Switch } from 'mint-ui' export default { name: 'order', components: { mtSwitch: Switch } }

 

4、组件传值,参考上面的讲解

5、vue-cli 中 webpack的代理使用  : https://www.cnblogs.com/goloving/p/8901189.html  或 https://www.jb51.net/article/130509.htm (推荐)或  https://www.cnblogs.com/ye-hcj/p/7077796.html 

proxyTable选项是一个代理表(明确 代理服务器是后端的程序,修改 需要重启程序)。前端有理由表,后端有也有理由表,代理也有路由表(即代理表)。

路由表上的地址都是不写域名和端口的,一般服务器会自动把他们加上去的(严格的说也不是添加上去,前端中,访问这个网页,既然能够访问这个网页,自然域名端口是有的,后端也是一样。代理服务器更是这样,既然能够访问代理服务器,这个域名端口自然也是有的)
  proxyTable: {
    '/api': {     // 只要在接口中看到 ‘/api‘ 会自动变成我们设置的地址(个人觉得,这里应该是作为匹配请求的地址参数)  (理解:应该是自动把前面的协议、域名、端口变成我们设置的地址,而不是替换,所以下面会有一个重写 api 前缀的选项)
      target: 'http://localhost:3000',  (这里是代理接口的位置)
      changeOrigin: true,(允许跨域,如果这不写,调用接口接口时会有跨域错误说缺少请求头)
      pathRewrite: {
        '^/api': ''  // 因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'
      }   
    }
  }

 // (个人)注意:上面的看到
‘/api‘ 会自动变成我们设置的地址,这个api是绝对路径,服务器地址端口/api(如:http://localhost:9090/api,这点所有的教程里都没有明确的说出来)。
         即将 http://localhost:9090/api 变成 http://localhost:3000/api。这里只是将域名端口替换。下面的重写选项,将api再去掉,然后发送请求接口。
 

6、对组件的扩展 —插槽   slot : https://blog.csdn.net/zhouzuoluo/article/details/80536754

     通俗理解:   是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑

7、vue中的ref作用 :  可以实现DOM的联动操作   

  a、ref 加在普通的元素上,用this.$refs.name 获取到的是dom元素 ,减少获取dom节点的消耗     参考 : https://www.cnblogs.com/xueweijie/p/6907676.html

  b、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法    参考 : https://www.cnblogs.com/daiwenru/p/7910363.html

 

 

 

8、Vue.use  : https://www.jianshu.com/p/89a05706917a

9、vue插件:(如  vue-touch)  https://cn.vuejs.org/v2/guide/plugins.html

  a、开发插件  : Vue.js 的插件应当有一个公开方法 install

  b、使用插件  : 通过全局方法 Vue.use() 使用插件

       注:Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。这样的插件就不用 使用Vue.use()了。

10、使用 vue-cli + axios 配置代理进行跨域访问数据  :  https://blog.csdn.net/it_cgq/article/details/78781422

  

  注意:在vue-cli 中使用 axios,用多中方法,不好的使用方法会带来维护修改的麻烦。  推荐使用 链接中的第三种方法 https://www.cnblogs.com/rinzoo/p/7880525.html

   即把调 api接口的js都写在一个API文件夹中的js文件中。

11、vue实例中template: '<App/>',这样写是什么意思  :  https://segmentfault.com/q/1010000008863503

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'    //  template 的内容会替换 el 选项中对应的标签的。 可以参考 vue官网 https://cn.vuejs.org/v2/api/#template
 })

12、import { render }  和   import ReactDOM有何区别  :  https://segmentfault.com/q/1010000011795996

import ReactDOM from 'react-dom';
ReactDOM.render()                   // 这种方法是整个都引进来了
import { render } from 'react-dom'
render()                           // 这种方法是只引进一个方法,然后解构使用

   使用ES6模块化的import特性时,如何正确使用花括号'{ }'    :   https://www.jianshu.com/p/8c91d6cb59e8

13、vue-router懒加载  :  https://blog.csdn.net/wp_boom/article/details/78799237

14、vue-cli 构建的项目中如何使用 Less  :  https://blog.csdn.net/zmhawk/article/details/75209161 或  vue-cli构建项目使用 less

  说明:是用哪个vue-cli搭建的环境,不需要配置,把两个npm包安装好,就可以直接使用了。

15、eslint语法规范   :  http://www.cnblogs.com/mingjian/p/9361027.html

16、Vue中的computed属性   :  https://www.cnblogs.com/gunelark/p/8492468.html

17、<router-link :to=" " replace></router-link> 

  a、 replace的作用   :  https://blog.csdn.net/tanga842428/article/details/53052970

18、vue eslint开发 关掉 tab错误提示  :  https://blog.csdn.net/aimee1608/article/details/81045362 (亲测有效)

19、ES6 Promise 用法   :  https://blog.csdn.net/shan1991fei/article/details/78966297    或   

   https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise (这里有代码演示)

   a、Promise.resolve(value) 把value值解析成 Promise对象返回,而这个value值作为这个Promise对象回调函数的参数传入

var promise1 = Promise.resolve([1, 2, 3]);

promise1.then(function(value) {
  console.log(value);     // 输出 Array [1, 2, 3]
});

 

20、为什么要使用 vuex  :  https://blog.csdn.net/chjj0904/article/details/78753153

  个人理解 : vuex  就像一个本地存储,主要是解决 组件通信 比较复杂时的问题,比如多层组件数据传递,不用vuex则必须一级一级的传递过去比较麻烦。

  亲测 :vuex 的功能 有点像 缓存(本地存储),但是vuex的存储非常容易管理,非常容易修改和设置。

21、vue 中使用scoped关键字后样式不能修改第三方组件问题:

  原因 : https://www.jb51.net/article/143272.htm

  解决方案: https://www.cnblogs.com/goloving/p/9119265.html

   推荐解决方案:

.gHeader /deep/ .name{ //第一种写法
    color:red;
  }

原因分析: style标签中添加了scopde 属性后,vue-loader编译vue文件时:

  编译 template 时会给每一个标签加上相同的自定义属性 data-* ;

  编译 style 会给每一个选择器(整体的一个)的后面加上这个属性 elm[data-*]  ;

  但是第三方组件中的标签是不会添加 这个自定义属性 data-* 的,所以编译后的这个选择器 elm[data-*],在第三方的组件中找不到这样的标签。

上面推荐解决方案的原理:

  就是把选择器后面的属性去掉,放到第一基本选择器上。如下面这样

.gHeader[data-*] .name

22、vue组件的is特性  :  https://www.cnblogs.com/x123811/p/8329289.html

  作用:因为vue模板就是dom模板,使用的是浏览器原生的解析器进行解析,所以dom模板的限制也就成为vue模板的限制了。

  如:ul 标签中放入非li标签,就会被浏览器踢出去(浏览器的容错机制),这样我们在ul里面放入组件标签(组件标签名肯定不会是li)就会被踢出去。

    使用is属性就是为了解决浏览器容错机制导致的组件标签无效的问题。

  原理(个人理解): is属性所在的标签名,只是一个临时占位标签,正在使用的是is指向的组件名。如:下面的li只是占个位置,正在的渲染后的内容还是v-li组件。  参考: https://blog.csdn.net/zhumengzj/article/details/79300784 (往 下面浏览)

<ul>
    <li is="v-li"></li>
</ul>

    这个 is 特性的作用同样起到了 动态组件 的效果 :  https://blog.csdn.net/m0_37479246/article/details/78915665

23、vue的路由传参 : https://segmentfault.com/a/1190000012393587 

24、vue-cli 打包( npm run build )的 文件(dist目录里的文件),默认打包后只能在网站根目录下运行。如果要让它在非根目录下运行,

  需要在config文件夹下的index.js中build选项的assetsPublicPath 配置下(亲测有效)。  https://segmentfault.com/q/1010000007881269?_ea=1481207  

  或  http://www.cnblogs.com/xueweijie/p/6971146.html (vue-cli 如何打包上线)

 

25、vue webpack打包后 .css文件里面的背景图片路径错误解决方法 :https://www.cnblogs.com/luosiding/p/8268837.html

26、VUE配置  ip地址  访问 :

  方法 1、2:

  https://segmentfault.com/q/1010000014797068(localhost和IP地址都可以使用,但是启动的是0.0.0.0地址访问的,需要自己在地址栏重新输入有效的域名或IP地址)或  

  方法 3 :(推荐这个IP地址可以是动态变化的 

  https://blog.csdn.net/m0_37036014/article/details/79639788 (缺点就是 localhost访问无效,但是在ip可以的时候,localhost根本不需要使用,所以不影响

27、vue-cli按需加载,懒加载组件  :https://www.cnblogs.com/love314159/p/9284727.html

28、vuejs项目性能优化总结 :https://www.jianshu.com/p/41075f1f5297

29、VUE路由去除#问题  : https://www.cnblogs.com/libo0125ok/p/9593741.html

30、vue-cli 中 img 图片动态改变 :https://blog.csdn.net/qq_33744228/article/details/81319485

   vue-cli中js 动态改变img标签的src 属性值,并不能使这个图片打包进入编译后的文件中。因为webpack只是把这个src值作为字符串处理了,而不是模块依赖文件。

  要使用这个动态图片,需要把这个图片通过模块依赖关系,加载进来

this.leftImg = require('../../assets/img/iconApply.png')

  另:img标签中src第一次的加载进来的文件是有模块依赖关系的,会被打包进去。之后src改变,只是将对应的src值放进去,而不会将对应的文件打包进去。

31、项目下的 static 文件夹的文件,不会被Webpack处理,会直接被复制到最终的打包目录(默认是dist/static)下。  https://blog.csdn.net/z767327552/article/details/79533792

32、vue-cli中接口的地址,开发时,使用的是代理的地址,打包后是使用实际的地址。配置如下。

// 配置地址
export const SMQB_BASE_URL = process.env.NODE_ENV === 'development' ? '/api1/' : 'http://10.100.13.202:9107/'

33、vue 路由守卫:https://www.cnblogs.com/elfpower/p/9230528.html 

   路由的改变首次进入就会执行里面的函数,调用next()方法,页面才会跳到对应路由的页面进去。

// 全局路由守卫
router.beforeEach((to, from, next) => {
  console.log('守卫')
  next() // 必须使用 next ,执行效果依赖 next 方法的调用参数
})

 

es6 关联知识:

1、export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口

   import用于在一个模块中加载另一个含有export接口的模块。

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

2、npm run dev 自动打开浏览器  :  https://www.cnblogs.com/wangqiao170/p/8965965.html

修改配置:

config - index.js - autoOpenBrowser: true

3、使用组件时注意,再html中使用的组件名,再js中组件名必须驼峰命名法。参考: (vue-cli练习案例)   https://blog.csdn.net/yuanyuanispeak/article/details/73530523  或 

                 https://github.com/hyy1115/vue2-web (redme.md中有教程,这个是用webpack自己搭建的开发环境)

4、mock.js 实现假数据  http://mockjs.com/    或  https://www.cnblogs.com/whkl-m/p/6679537.html  或  https://www.cnblogs.com/zhenfei-jiang/p/7235339.html (推荐,非框架中使用,亲测可行)

  注意:mockjs再html文件(即传统的js开发)中也是可以使用的。

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./mock.js"></script>
    <script>
        var arr = ['momo', 'yanzi', 'ziwei']
        var obj = {
            'host': 'www.baidu',
            'port': '12345',
            'node': 'selector'
        }
        Mock.mock('http://www.bai.com', obj)

        $.ajax({
            url: 'http://www.bai.com',
            dataType: 'json',
            success: function (e) {
                console.log(e)
            }
        })
    </script>
</body>
</html>
View Code

5、vue2.0 类淘宝不同屏幕适配及px与rem转换问题  : https://www.cnblogs.com/lulianlian/p/7656184.html  或  https://blog.csdn.net/qq_33485463/article/details/80454326

6、ES6模块之export和import详解  : https://blog.csdn.net/qq_28506819/article/details/75733601

 

http://www.cnblogs.com/zhuzhenwei918/p/6870340.html?utm_source=itdadao&utm_medium=referral

 

转载于:https://www.cnblogs.com/wfblog/p/9407452.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值