随笔分类 -  vue2.0版本3.0版本项目经验分享

少踩坑。。。。正确姿势学vue'
摘要:一样的和前面路由钩子类似的步骤 首先在demo下面的components下面新建一个test.vue组件 test组件代码 <template> <div class="test_box"> <p @click="go">测试组件内部守卫的作用,点击跳到HelloWorld</p> </div> < 阅读全文
posted @ 2018-06-18 19:44 鱼樱前端 阅读(122354) 评论(1) 推荐(13)
摘要:/**第一步 * 配置编译环境和线上环境之间的切换 * baseUrl: 域名地址 * routerMode: 路由模式 * imgBaseUrl: 图片所在域名地址 * */ let Host = ''; let routerMode = 'hash'; //let imgBaseUrl; if(process.env.NODE_ENV == 'development') { ... 阅读全文
posted @ 2018-05-09 22:59 鱼樱前端 阅读(2839) 评论(0) 推荐(0)
摘要:自定义MVVM框架,这是比较牛逼的v-text,v-model和数据绑定原理介绍 {{message}} ... 阅读全文
posted @ 2018-04-30 18:40 鱼樱前端 阅读(1669) 评论(0) 推荐(0)
摘要://校验手机号码 export function isSpecialPhone(num) { return /^1[2,3,4,5,7,8]\d{9}$/.test(num) } //校验中英文姓名 export function isName(name) { return /[a-zA-Z\u4E00-\u9FA5]+$/.test(name) } //校验输入金额 export fu... 阅读全文
posted @ 2018-04-24 20:59 鱼樱前端 阅读(2321) 评论(0) 推荐(0)
摘要:1.在config的index.js下面进行常用跨域配置代码;proxyTable: { '/apis': { //使用"/api"来代替"http://xxxx.cn" target: 'http://xxxx.cn', //源地址 (接口域名) changeOrigin: true, //改变源 (是否跨域) pathRewrite: { '... 阅读全文
posted @ 2018-04-16 16:50 鱼樱前端 阅读(7613) 评论(0) 推荐(0)
摘要:你在前面看到,在new Vue()的时候,是可以给data直接赋值为一个对象的。这是怎么回事,为什么到了组件这里就不行了。 实际上,它首先需要创建一个组件构造器,然后注册组件。注册组件的本质其实就是建立一个组件构造器的引用。使用组件才是真正创建一个组件实例。所以,注册组件其实并不产生新的组件类,但会 阅读全文
posted @ 2018-04-02 23:00 鱼樱前端 阅读(5639) 评论(0) 推荐(0)
摘要:1.当 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active. 模板中可以用{{$route.params.xxx取到路由参数}}或者{{$route.query取到参数}}或者{{$route.hash取到hash}} 实例中(js)可用:this.$route.params.xxx/this.$route.query.xxx取到路由参数; 2.通过$r... 阅读全文
posted @ 2018-03-28 17:18 鱼樱前端 阅读(2605) 评论(0) 推荐(0)
摘要:1.Vue.js是渐进式框架,采用自底向上增量开发的设计基于MVVM思想。 2.Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 3.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 4.指令带有前缀 v-,以表示它们是 Vue.js 提供的特殊属性。 5.站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XS... 阅读全文
posted @ 2018-03-20 11:55 鱼樱前端 阅读(1236) 评论(0) 推荐(0)
摘要:1.使用router-link 不会让页面刷新,使用a标签会使页面刷新。2.router-link 里面的to="/路由地址" tag=""自定义标签" 默认为a标签,linkActiveClass 可以更改默认类名。3.在 HTML5 history 模式下,router-link 会拦截点击事件 阅读全文
posted @ 2018-03-16 00:53 鱼樱前端 阅读(226) 评论(0) 推荐(0)
摘要:这是vuex的语法结构内容 简单的理解vuex: new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { incre 阅读全文
posted @ 2018-01-17 14:10 鱼樱前端 阅读(9974) 评论(1) 推荐(0)
摘要:介绍mapActions辅助函数: Action提交的是Mutation,不能够直接修改state中的状态,而Mutations是可以直接修改state中状态的;Action是支持异步操作的,而Mutations只能是同步操作。 简单的: const mutations = { add(state, 阅读全文
posted @ 2018-01-10 23:47 鱼樱前端 阅读(6403) 评论(1) 推荐(0)
摘要:简单的理解: const getters = { newCount: function(state){ return state.count += 5; } } 组件中获取: methods: { newCount: function(){ return this.store.getters.new 阅读全文
posted @ 2018-01-10 23:26 鱼樱前端 阅读(1936) 评论(0) 推荐(0)
摘要:在组件中提交Mutations: import { mapState, mapMutations } from 'vuex' export default { data() { return { msg: "vuex要点" } }, store, computed: mapState([ 'coun 阅读全文
posted @ 2018-01-10 23:15 鱼樱前端 阅读(911) 评论(1) 推荐(1)
摘要:一、通过mapState函数的对象参数来赋值: <p>{{ count }}</p> <p>{{ count1 }}</p> <p>{{ count2 }}<p> //导入 import { mapState } from 'vuex' export default { data() { retur 阅读全文
posted @ 2018-01-10 23:06 鱼樱前端 阅读(5533) 评论(1) 推荐(1)
摘要:站长工具支持Unicode转码:http://tool.chinaz.com/Tools/Unicode.aspx (这是一个网页标题)转码后 >变为:\u8fd9\u662f\u4e00\u4e2a\u7f51\u9875\u6807\u9898 这样做一般就是为了防止乱码现象~ js unico 阅读全文
posted @ 2018-01-10 22:07 鱼樱前端 阅读(2701) 评论(0) 推荐(0)
摘要:拦截器 可以全局进行拦截器设置。拦截器在发送请求前或响应返回时做一些特殊的处理。 拦截器的注册 工厂函数注册 实现的功能: AJAX请求的loading界面 AJAX请求的loading界面 请求失败时的提示对话框 请求失败时的提示对话框 vue-resource 拦截器使用在vue项目使用vue- 阅读全文
posted @ 2017-12-11 14:07 鱼樱前端 阅读(9307) 评论(0) 推荐(2)
摘要:针对常用的http请求方式 get(url, [data], [options]); post(url, [data], [options]); put(url, [data], [options]); delete(url, [data], [options]); jsonp(url, [data 阅读全文
posted @ 2017-12-11 12:00 鱼樱前端 阅读(5520) 评论(0) 推荐(0)
摘要:el:element 需要获取的元素,一定是HTML中的根容器元素 data:用于数据的存储 methods:用于存储各种方法 数据绑定字面量只加载一次{{* msg}} data里面可以进行简单的运算; methods:{ getHome(){ return "早上好" } } -------------------------------------------------- HT... 阅读全文
posted @ 2017-12-11 10:04 鱼樱前端 阅读(11400) 评论(1) 推荐(4)
摘要:获取高度: <div ref="自定义名称" ></div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mounted() { let h = window.innerHeight || document.documentElement.clientHe 阅读全文
posted @ 2017-11-28 10:01 鱼樱前端 阅读(135824) 评论(0) 推荐(0)
摘要:全局对象是最顶层的对象在浏览器中指的是window对象,在nodejs指的是global对象,在js中所有的全局变量都是全局对象的属性。ES6中var和function命令声明的全局变量,属于全局对象的属性let、const声明的全局变量,不属于全局对象的属性。 输出全局变量var aa = "va 阅读全文
posted @ 2017-11-19 22:24 鱼樱前端 阅读(204) 评论(0) 推荐(0)