梦缘的博客

本篇文章介绍Vue框架的基础指令：v-bind。作用：用于单向绑定数据，可以将vm里面的数据显示到对应的位置简写：简写可以写成英文单冒号 :例：html文件：浏览器显示：注：（1）v-bind绑定的是控件的属性，属性值由vm中data中的数据的值控制（2）用户改变控件的属性值，不会改变vm中data中数据的值，例如用户改变input输入框里面的值，vm中的value仍然会是“这是i...

这篇文章介绍Vue的自定义组件。定义全局组件的第一种方式：html代码：定义全局组件的第二种方式：html代码：定义全局组件的第三种方式：html代码：常用的方式是第三种，原因：（1）在工作中模板中肯定有很多标签，在一个字符串中写入很容易出错，故用第一二种出错率高（2）将模板提取出来更容易复用定义局部组件的方式：html代码：组件名称的大小写问题：（1）官方强烈推荐要遵循W3C规范...

这篇文章介绍Vue的生命周期函数，也叫做钩子函数。Vue的生命周期函数主要分为以下几个：beforeCreate：在这个期间，Vue实例被创建出来了，但是el、data、methods等还没创建created：在这个期间，el、data、methods等都被创建出来了，可以被调用；但是还未被渲染到元素上（数据还未替换到元素上）beforeMount：在这个期间，将数据渲染到元素上的前一步，...

这篇文章介绍Vue过滤器的定义与使用。定义全局过滤器的例子：html代码：定义局部过滤器的例子：html代码：结论：（1）在定义局部过滤器时，必须加s，使用filters（2）在function中，必须有返回值，否则在{{ }}要替换的地方会显示空（3）在function中，第一个参数data必定为要处理的数据，第二个参数开始才是传入的参数。如function(data，参数......

这篇文章介绍Vue自定义指令的方式，以input控件的自动聚焦为例。定义一个全局指令的自动聚焦例子：html代码：定义一个局部指令的自动聚焦例子：html代码：自定义指令的钩子函数（生命周期函数）有bind、inserted、update、componentUpdated、unbind：bind：在指令绑定到元素上时调用，只执行一次。可以在这里进行初始化设置。inserted：在被绑...

这篇文章介绍Vue基础指令 - v-for。作用：循环显示vm中要遍历的数据。例子：html代码：浏览器显示：结论：（1）v-for会循环显示vm中你要遍历的数据（2）:key是标识符，最好带上，不然可能会出问题（3）v-for要挂载在要循环的元素上，而不是要循环的元素的父元素上（4）v-for="(item, index) in list"，这种方式中item是第n个数据，in...

这篇文章介绍Vue基础指令v-if、v-show。作用：控制控件的隐藏于显示。使用方式：结论：（1）v-if和v-show都可以控制控件的隐藏与显示（2）v-if在为false时，会将控件删除；v-show在为false时，只会给控件添加display:none样式（3）v-if较v-show有较高的性能消耗，频繁切换推荐使用v-show...

这篇文章介绍Vue基础指令 - v-model。作用：双向绑定数据例子：html：浏览器显示：通过例子可以看到，当改变input组件的value值时，vm中的value的值也会随之改变，这就是v-on与v-model的区别之处。结论：（1）v-on实现的是单向数据绑定，v-model实现的是双向数据绑定（2）通过v-model绑定的数据，html数据改变或vm中数据改变都会引起另一...

这篇文章介绍Vue基础指令 - v-on。作用：绑定方法简写：直接使用@即可例子：html：浏览器显示：结论：（1）v-on绑定的是控件的事件（2）用v-on绑定事件时，事件的前缀on需要省略。例如input的点击事件原生是onclick，绑定时候只能使用click...

这篇文章介绍Vue基础指令 - v-text和v-html。作用：替换标签内的文本例子：html：浏览器显示：结论：（1）v-text、v-html两个指令都会替换标签内的所有节点（2）v-text指令是直接替换，v-html会将数据以html格式进行替换...

这篇文章介绍Vue的过渡与动画，主要是用到组件transition。作用范围：一般搭配v-if、v-show、动态组件、组件根节点来使用。在举栗子之前，我们先说说transition的钩子函数：v-enter：定义上半场过渡的初始状态；在过渡开始前被添加，在过渡开始时会被移除v-enter-to：定义上半场过渡的结束状态；在过渡开始时被添加，在过渡完成时会被移除v-enter-active...