|
Vue基础知识总结：基础： l MVVM模式，实际上是三个单词，view视图，view-model相当于是模拟器，model数据值； l 创建一个vue vue var vm = new Vue({ el:”#app”, data:{ …… } })； l V-text/v-html，后者常用，用来渲染带标签的数据信息； l V-on用来绑定事件 v-on:click =”change()”; 简写方式 @click=”change”; l V-bind 绑定可变的属性值，src,style,link,class等；简写方式 ：src = “..”; l V-model监听文本输入框的双向绑定值变化（注意，在使用v-model的时候有一个坑） l V-if/v-else 处理显示和隐藏，使用变量来判断控制； l V-for 动态循环生成数据值 <liv-for="item in list">{{item}}</li> <tr v-for="(item,index) inpersons"> <td>{{index}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> 创建vue的时候，el对应id值，data中用来写声明数据值，methods中用来处理自定义方法，created生命周期钩子中用来初始化自定义方法； l 过滤器的实现有两种方式： l 私有化的方式： var vm1 = new Vue({ el:'#app1', data:{ msg1 : "I AM A Good MAN" }, filters:{ toLC:function(input){ return input.toLowerCase() } } }) <div id='app2'> <template> {{msg2 | toLC}} </template> </div> ======== l 共有的实现方式： //全局，公共过滤器 Vue.filter('toLC',function(input){ return input.toLowerCase() }) // //组件1对应的Vue实例 var vm1 = new Vue({ el:'#app1', data:{ msg1 : "I AM A Good MAN" } }) 路由：Vue-router 1,创建一个子组件 <template> html代码</template> 使用exports default{ …… } 输出子组件； 2,引包，引入组件； 3,创建路由并注册号组件及跳转配置 var router = new VueRouter({ routes : [ //这个routes是固定写法，表示，可以配置很多个路由 {path:'/newsList/:newsId',component:newsListComponent},带参数值的 {path:'/goodsList',component:goodsListComponent} }) ----页面部分的设置： 页面路由跳转以及传值：（如果传值变化的值，to前面需要加：---表示绑定变化值） <router-link to='/newsList/15'>新闻列表</router-link> 模板占位替换： <router-view></router-view> Vue-resource请求：这里有三种方式： Get: new Vue({ el:'#app', methods : { getLogin:function(){ //利用vue-resource发送请求 var url ='http://127.0.0.1:3000/login?username=zhangsan&password=123'; this.$http.get(url).then(function(response){ console.log(response.body) },function(error){ }) } } }) post：---POST请求最特别的，参数写在括号里面，还需要设置emulateJSON:true new Vue({ el:'#app', methods : { getLogin:function(){ //利用vue-resource发送请求 var url ='http://127.0.0.1:3000/login?username=zhangsan&password=123'; this.$http.post(url,{….},{…}).then(function(response){ console.log(response.body) },function(error){ }) } } }) JsonP :------和get请求一样，只需要修改请求方法：this.$http.jsonp(url); Webpack的介绍：详见链接：---重要 MUI Mint-UI 移动端的组件库（swipe，九宫格，指示器indicator）l ElementUI PC端的组件库 VUE常用的开源项目库汇总：(面试会问你用过哪些插件) 复用抽取子组件：1，创建子组件， <template> html代码</template> 2，输出exports default{ //设置一个props属性：props:”commentid”;=====是需要传值的时候才设置这个 } 3,-------在父组件中 01，引入子组件 import subcomment from ‘./…..’; 02, 在 js代码中设置components:{subcomment}; 03,在html页面中使用 <subcomment :commented=”…..”></subcomment> (需要传值的时候才设置，可以设置id值，也可以是设置传递的对象数组) =======这里的传值是父组件向子组件传值； Vue路由的跳转有两种方式： 1，第一种是声明式的： <router-link to='/newsList/15'>新闻列表</router-link> 2，第二种是使用的编程式的跳转：push 第一种方式/goods/goodscomment/参数 goodsinfo.vue this.$router.push({ name: 'goodscomment', params: { goodsId:this.$route.params.goodsId }}) main.js中 {name:'goodscomment',path:'/goods/goodscomment/:goodsId',component:goodscomment} 最终传值:/goods/goodscomment/88 接收值(goodscomment.vue) ``` {{this.$route.params.goodsId}} ``` 第二种方式 /goods/goodscomment?goodsId=88 goodsinfo.vue ``` this.$router.push({path: '/goods/goodscomment',query: { goodsId: this.$route.params.goodsId }}) ``` main.js ``` {name:'goodscomment',path:'/goods/goodscomment',component:goodscomment} ``` 最终传值:/goods/goodscomment?goodsId=88 接收值(goodscomment.vue) ``` {{this.$route.query.goodsId}} ``` 路由中的返回按钮：this.$router.go(-1) created(){ //console.log(this.$route.path) //this.$route.path 只会打印当前正在展示的组件的路由 if (this.$route.path.includes('home')|| this.$route.path.includes('member')|| this.$route.path.includes('shopcart')|| this.$route.path.includes('settings')){ this.isShow=false }else{ this.isShow=true } }, methods:{ //返回 goback(){ this.$router.go(-1) } }, watch:{ '$route':function (newValue,oldValue) { //console.log(newValue) if(newValue.path.includes('home')|| newValue.path.includes('member')|| newValue.path.includes('shopcart')|| newValue.path.includes('settings')){ this.isShow=false }else{ this.isShow=true } } } 子组件向父组件传值：1，子组件做的事件： 声明事件并传值this.$emit（“numberchange”,this.count）; 参数：事件名称，要传的值； 2，父组件中要做的事情：注册与声明中同名的方法，写好对应的回调函数来接收传递过来的值；（自己手动在回调函数中写形参来接收值） 非父子组件传值：1，传值一个公共的vue中央调度对象; 2,发送方，利用vue对象声明$emit事件并传值 bus.$emit(“numberchange”,data); 3,接收方，利用vue对象来执行$.on来注册与声明中同名的方法，并使用对调方式来接收传递的数据值（自己在回调函数中加形参来接收值） 公共的子组件有：轮播，评论列表，导航，商品购物车部分等； 购物车部分---自己研究1，执行点击事件购物车的加减； 2，执行点击事件的时候，本地化localstorage的数据存储 3，购物车页面的数据展示：---调用接口 读取本地数据---合并数据，重新生成参数，最后发请求； 4，删除每一行商品的时候： 01，购物车数量减少； 02，本地存储的数据删除掉； 03，列表中的哪一行清除； 04，重新统计价格变化和数量----重新调用方法； Vue的生命周期： 跳转页面的时候干掉当前的，回退的时候再次获得重生； 生命周期的完整流程： vueX 入门：面试有被问到 VUE进阶学习：https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html vue中的坑：1，如何监控双向绑定的数据值变化：watch方法 VueJS 则使用 ES5 提供的Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。 2，vue表单元素双向绑定总结： ---注意，v-model设置input标签的时候有些坑存在=------面试被问过（自己百度对比答案） l Mockjs 和es6语法 开发文档相关：1.文档开发技能学习资料 备注说明： 前5项必须要掌握，第6项熟悉和会使用就好了，但后期复杂业务，若需要用到的时候，还是需要去掌握的！ 面试常问问题：l Vue问的最多的是组件传值，webpack,gulp工具 ，生命周期，双向绑定VueX等； l 什么是闭包，闭包的作用，闭包的坏处，什么是内存泄露； l 原型链，作用域链； l 单例，工厂模式，继承的实现方式 l IE的兼容性写法； l 移动端，针对ios,安卓系统，不同机型如何做适配； l 网站的高并发如何优化处理； l 冒泡排序，查找字符串中出现最多的那个，数组的倒序，数组去重； l 工作流程，如何和其他同事做配合，部门人员组成情况； l 简历中第一个项目情况介绍，一般简历上有什么内容面试官就会问什么 l 手机端多出来的1px像素怎么处理； l Cookie和localstorage的区别---（主要是后者不会向服务器发送请求； l H5,css3的常用属性。 l ES6箭头函数和ES5普通函数的最大区别？ l 用到过哪些jquery插件，怎么封装 l Iframe的使用 l Jsonp的原理 l Jquery事件绑定的几种方式，有哪些区别； l Bootstarp栅格系统的原理 l Bootstrap单独功能怎么进行分割，以及什么是定制； l Mvc mvvm的解释； l Call,apply有什么区别 l JQuery基础知识，选择器，方法等； l Ajax 相关的； l 项目中遇到什么问题---怎么解决的，比如说vue项目 l Git和svn的使用以及区别 拓展知识： 扩展阅读： 2.Assp前端开发目录和开发知识点 3.视频类学习资料 （1）vuejs2视频开发 备注说明： 请工作之外时间，去看看视频里面的东西，视频中请自己看vuejs2相关的，不要去看vuejs1的 （2）慕课网 备注说明： 请工作之外时间，去看看视频里面的东西，视频中选择自己需要加强和完善的视频去看看，这个里面的资源很优质，值的去看！ 其它：1.前端项目开发进度文档的自我管理 备注：要求每日必须对自己的工作做整理和归纳，同时这也体现表现自己的开发进度，也方便未来日后的绩效卡的填写，作为参考资料。 2.Vue 2.0 的建议学习顺序 3.前端资源统计整理 其他demo文档 学习： file:////Users/chenjian/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip_image002.gif file:////Users/chenjian/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip_image004.gif（3）低仿饿了么H5-纯前端Vue版+手把手教学 file:////Users/chenjian/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip_image006.gif （4）模仿猫眼电影制作的webapp file:////Users/chenjian/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip_image008.gif （5）Timeline-X 本例子涉及一些nodejs相关，大家只关注前端即可
| 
收藏
淘帖
踩
