脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Vue.js小应用使用总结，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
这是初步使用vue.js做出todomvc,life小应用的经验;这篇文章总结由应用开始到托管到GITHub上相关技术使用时遇到的坑,不涉及具体内容,以供以后学习!
todomvc的github地址
life的github地址
因为数据请求问题协议混合使用了(在https协议中使用了http请求),life小应用在chrome,FF不能正常显示数据.
应用搭建
使用vue-cli脚手架工具,快速,准确的搭建应用结构!
使用注意
1.第一步的npm install 命令可能不会安装devDePEndencies的内容,这是需要特别安装: npm install –only=dev
2.在window上的cross-env(不同平台下都能运行的npm命令)loader不会安装上,但是webpack已经使用了,需要手动安装
3.css-loader style-loader也没有安装,需要手动安装
4.生成的index.htML中build.js文件的地址要把开头的’/’去掉,不然部署的时候回找不到build文件
具体使用参考:vue-cli 官网
Vue.js 组件化开发
这里的组件化开发是指在webpack中进行.vue单文件组件开发.
1. 文件的导入和导出在webpack中使用有两种写法:
1. es6写法
导出: export default{这个大括号内就是new Vue({})语法内的{}对象}
导入: import name From '相对路径'
2. webpack的写法
导出: module.exports={这个大括号内就是new Vue({})语法内的{}对象 }
导入: VAR xx=require('相对路径');
2. js,css文件的导入
* css文件不需要导出
* js文件需要导出特定的方法,在导入的地方才能调用
3 .vue文件中的css会应用到全局,所以不同.vue文件不要使用相同的类名
4. 组件开发的时候最好使用vuex管理状态
1.PRops是单向的传递数据,同时在组件内部也不能直接修改传过来的props,这样会报错
2.使用vuex状态管理,能在组件内部修改状态,非常方便.
3.vuex组件内部不想修改state中的值,应当将state的值存入本组件的data属性中.
5. vue开发中最好能使用es6语法,简洁,好用,潮流.但是要用webpack工具转换为es5语法,只是开发方便,于项目部署无多大用处.
6. 布局性质的组件的显示或者隐藏应当尽量用路由控制.
vuex使用
1. vuex使用地点
1. 根状态应当使用在main.js处,在所有的组件中使用vm.$Store获取之.
2. vuex可以嵌套使用,但是中小应用还是使用单一的状态中心更好.
2. vuex使用注意
1. vuex官方推荐不要在组件内部直接修改状态,而是传递个根组件修改.但是,我认为那样太麻烦,切不利于分组件开发,不易发挥.vue文件的优势,我认为应当在组件内部修改状态,只是多人协作时可能冲突.
2. vuex中心的数据应当加入到组件内部的data属性中去,当要修改data中的数据的时候,不会修改vuex中心数据
3. 承上,如需修改状态,可以在内部做修改,则依赖于这个vuex中心数据的所有视图将随之变化.
vue-router 路由的使用
1. 使用注意
1. 路由的配置应当在入口文件内.
2. 路由文件的routes可以独立为一个routes.js文件.
3. 路由的 可以分布到根组件的子组件内,(出口)可以分布到根组件中或者其他组件中.
4. 嵌套路由当匹配子路由时,也会显示父路由组件.
5. 当有类似life应用中展示详细新闻时,不应当使用嵌套路由,而应当使用一个与新闻列表同级的路由来展示详细页面.
2. vue-router 在程序中切换路由
1. 使用标签
2. 使用href: v-bind:href="'#/path'+item.url" ;这里的href可以拼接,但是要以#号开头.
3. 使用编程的方法修改:
vm.$router.push({path:'',...}) 向历史记录添加一个路由记录,同时修改当前路由.
vm.$router.replace({path:'',...}) 替换当前路由.
vue-resource 使用
> 利用的是es6的Promise对象,但是ie系列版本不支持Promise对象,需要使用babel-ployfill 插件在入口文件最上面引用.
> vuex同样依赖Promise对象,兼容方法同上.
托管到github上
1. 使用git,将代码上传到github上,默认代码不上传dist目录,这时如果有通过github展示网页的需求,就要强制将dist目录上传(git add dist -f)
2. 网页访问地址: https://yourUsername.github.io/yourProjectName/index.html
浏览器协议混合的拦截问题
如在https协议下(github就是https协议),你的应用中有通过http协议请求的内容,就会被浏览器拦截而不能得到数据,但是ie会提醒是否显示全部信息,其他浏览器直接拦截.
解决方法是
1. 将http请求换成https请求
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-Vue.js小应用使用总结全部内容，希望文章能够帮你解决javascript代码实例教程-Vue.js小应用使用总结所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。