vue-router 1. 底层原理 hash 或者h5 histroy(有兼容性) 2. 使用的时候Vue需要引入VueRouter Vue.use(VueRouter) //VueRouter 底层实际上是instal 安装了两个全局的组件 router-view 和router-link 默认路由:  {     path:'/',     //component:Home //默认页   //  redirect:'/home'      redirect:{name:'home'}  …

vue除了有v-if等内置指令,我们也可以创建自定义指令. 例:我们可以实现一个可以每隔一秒闪烁的节点,类似于<blink>标签的行为.添加一个指令类似于添加一个过滤器,可以将他传入vue实例或组件的directives属性,或者使用vue.directive()注册一个全局指令.传入指令的名字以及包含钩子函数的对象,这些钩子函数会在设置了该指令的元素的生命周期的各个阶段运行. <div v-blink>闪烁的盒子</div> Vue.directive('blink'…

1.v-if和v-show v-if 和v-show都可以显示和隐藏元素: 区别:(1)v-if初始值为false那么这个元素不会被渲染 ,v-show不管初始值为何值都会被渲染 (2)v-if是控制DOM元素是否插入,v-show是控制css的display属性 (3)v-if适合隐藏尚未加载的内容或切换显示与隐藏频率较低的地方,v-show反之; 此外还有两个条件语句和v-if有关:v-else-if ,v-else <div v-if="state==='loading'"…

1.ref ref可以直接访问元素,而不需要使用querySelector或者其他dom节点的原生方法. <div ref = "box"></div> 在js中,这个原生会被存到this.$ref这个对象中,对应的键名就是为这个元素的ref属性设置的值  使用this.$ref.box访问这个元素 在组件中这个属性尤为有用.同一组件的代码可能在页面中出现多次,这从根本上不能为组件内的元素添加唯一类名而使用querySelector来选择该元素,相比之下ref只…

过渡和动画 使用<transition> 组件包裹 例: <transition name="fade"> <div v-if="true">过渡动画</div> </transition> style:.fade-enter-active, .fade-leave-active {transition: opactiy .5s} .fade-enter, .fade-leave-to{opacity:0;…

1.响应式 vue修改了每个添加到data上的对象,当该对象发生变化时vue会收到通知,从而实现响应式.对象的每个属性都会被替换为getter,setter方法. 有两种方式实现data对象的监听 (1)脏检查:通过存储这个对象副本,然后比较两者,但这种方法并不高效. (2)使用Objectf.defineProperty(),以下是vue的基本思路 const storedData = {}; storedData.useId = data.useId Object.definePropert…

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM…

回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Redis缓存的文章里,遗留了一个问题,周末苦思冥想还是不得其法,想了一个馊主意,但是肯定不是最终解决方案,感兴趣的可以看看,地址<框架之十一 || AOP自定义筛选,Redis入门 11.1>,然后呢,剩下的时间,就是简单搭建了下我在以后的Vue实战中用到的一个小项目,我会手把手在一户的文章中讲到,但…

一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "yes": "no"}} 文本赋值: v-text="" 指令: v-if="" 过滤器: {{msg | capitalize}} 条件渲染 v-if v-else v-else-if v-show v-cloak vue组件 全局组件和局部…

Vue语法: new Vue({ //挂载: el: '#app', //初始化数据: data: {}, //监听 data 的数据变化: watch: { todos: { //深度监视 handler() { window.localStorage.setItem("todos",JSON.stringify(this.todos)) }, deep: true, //默认为false } }, //计算属性: computed:{}, //初始化完成要执行的方法: create…