Vue 组件

全局组件

1. 创建组件构造器

Vue.extend(options)

需在构造器中编写模板template，用于说明这个组件中要写什么元素

阅读更多

转载自–陈锐

https://blog.csdn.net/craig_cc/article/details/105560504

阅读更多

Vue 过渡动画

类名过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

阅读更多

1. 展示未绑定数据的模板元素
2. 绑定数据并生成 HTML
3. 渲染 HTML 元素

当用户网速较慢或网站性能较差时，用户可能会看到 vue 模板内容，

阅读更多

自定义全局过滤器

• 用于格式化文本内容
• 只能在插值处和 v-bind 处使用
• 可在一处元素堆叠使用多个过滤器

1. 使用Vue.filter()方法定义过滤器，该方法接收两个参数：过滤器名(String)，处理数据的函数
2. 默认处理数据的函数接收一个参数，即当前要被处理的数据
3. 使用时，在元素插值处，加上| 过滤器名即可，如下 ↓

阅读更多

自定义全局指令

1. 使用Vue.directives()方法，两个参数：字符串(指令名)、对象(业务逻辑)
2. 注意：自定义指令名称不要加 v-，vue 会自动加上，用的时候如：

3. 在对象中(实现业务逻辑时)，使用钩子函数规定 Vue 何时执行你的函数–

阅读更多

v-on

1. 为元素绑定监听事件
2. v-on:事件名="函数名"，简写@事件名='函数名'
3. v-on绑定的事件触发后，vue 会去实例对象的methods中找对应的回调函数
4. 使用修饰符，如v-on:事件名.once="函数名"
5. 使用@事件名='函数名($event)'来获取事件对象

阅读更多

v-bind

1. 使用插值表达式、v-text等插值语法是为元素绑定数据，使用v-bind：属性名(或 v-model)为元素的属性绑定数据
2. 简写为：属性名='合法JS表达式'如：'temp+1'

用 v-bind 为元素绑定 class 类名

阅读更多

vue 指令

V-text、V-html、V-model

1. v-text和v-html是单向绑定。
   1. {{}}插值表达式：将指定数据插入指定位置
   2. v-text='xx'，会覆盖掉元素原有内容
   3. v-html='xx'，也会覆盖掉原有内容，且会解析字符串中的标签元素(会转义)
2. v-model为双向绑定，即 view-model

阅读更多

绑定 key

为提升性能，v-for 在更新已渲染过的列表时，会采用 “ 就地复用 “ 的策略，但这个策略会在某时造成数据混乱，如：在列表前面新增内容或删除时(若在列表最后新增，则无影响)

阅读更多