m0_47883103的博客

看了这篇文章，我才知道，原来Vue路由这么简单

先创建父子关系<div id='father'> <h1>{{ name }}</h1> <son></son></div><template id='son'> <div> <h1>{{ name }}</h1> </div><template>const son = { template:'#son', data()

动画效果利用 v-bind 给元素添加不同的类名，这些类名是提前写好的动画，以此来达到动画效果利用transition标签包裹住需要产生动画效果的标签transition中的子元素需要有v-show或者v-if来控制是否显示transition标签里的name属性决定使用那一个动画效果例子先定义动画效果 .fade-enter-active { transition: all ease 2s; } .fade-enter { opacity: 0; }

组件化思想人面对复杂问题的处理方式:1: 任何一个人处理信息的逻辑能力都是有限的2: 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。3:但是,我们人有一种天生的能力 ,就是将问题进行拆解。4:如果将一个复杂的问题 ,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃组件化也是类似的思想1:如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。2:但如果,我们讲一个页面拆分成一个个小

自定义指令作用操作底层dom例子使用注意传参时的格式创建当组件被创建直接自动传入了一个el参数，el就是使用这个指令的dom谁用这个指令，谁的背景变成红色传过来的参数在bind.value里局部自定义指令局部自定义指令不用Vue.,而是接收了一个directives使用创建指令生命周期指令和组件是两套东西bind() { //... }当指令绑定到 HTML 元素上时触发只调用一次inserted(){ //... }只执行一次被绑定元

v-modelv-model主要用来绑定表单，通过v-model实现双向绑定v-model实现表单元素和数据的双向绑定双向绑定可以简单理解为，你可以更改我，我也可以更改你input里有一个内部事件叫做input用于动态监听有没有输入东西v-model的原理：相当于 v-bind:value=’’ 和 v-on:input 两个指令的结合v-model绑定radio如果绑定了v-model，name属性可以不写，因为已经是互斥的了可以直接赋给sex一个初始值(男or女)，来实现默认

v-bind语法糖动态改变标签的属性值两个class不会重复，内部会合并v-bind绑定style样式50px(value)需要加上引号，不然vue会认为他是变量，会报错精进版本v-on可以直接写操作，复杂的时候也可以调用methods里的方法语法参数问题如果该方法不需要额外参数，那么方法后面的()可以不添加@事件=函数名。 加不加小括号主要看需不需要传参数如果方法中本身有一个参数，那么会默认将原生事件event参数传递进去如果需要同时传递某个参数，同时需要e

watch（侦听属性）例子cosnt app = new Vue({//... watch:{ 要监听的属性:{ handler(新值，旧值){ //... }， 功能属性 } }})handler给 监听的属性 绑定了一个handler方法，之前写的 watch 方法其实默认写的就是这个handler，Vue会去处理这个逻辑，最终编译出来其实就是这个handler默认watch最初绑定的时候不会执行，要等到 监听的属性 改变之后才会执行功能属性imm

filters（过滤器）使用方法<img :src='data | 方法名'>就是把数据data 放到 方法 函数里过滤一下创建const app = new Vue({ //。。。 filters:{ 方法名(参数) { return 过滤方法 } }})第一种<img :src='filtration(data)'>methods:{ filtration(data) { return data.过滤 }}第二种&lt