简单指令介绍

本教程为入门教程，如有错误，请各位前端大佬指出。

1.为什么使用vue

业务越来越复杂，更多操作在前段进行。

渐进式

不需要操作dom

双向绑定

环境构建方便

组件开发

社区活跃

2.vue入口

main.js为主入口

import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, //指定进入app.vue template: '' }) 复制代码

3.基本指令

1.{{}}与v-html

用于打印与输出。

复制代码

2.v-bind

v-bind就是用于绑定数据和元素属性的。

复制代码

3.class与style

class的绑定方式。

复制代码

4.观察指令method和computed

method和computed区别：

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 msg还没有发生改变，多次访问 showMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

函数执行需要 数据属性里面的 message 值作为参数。

● 如果使用 methods 执行函数，vue 每次都要重新执行一次函数，不管msg的值是否有变化；

● 如果使用computed 执行函数，只有当msg这个最初的数据发生变化时，函数才会被执行。（依赖-监测数据变化）

复制代码

5.条件渲染

v-if,v-else顾名思义，判断是否可以显示。

复制代码

v-if：每次都会重新删除或创建元素，具有较高的切换性能消耗；

v-show：每次切换元素的 display：none 样式，具有较高的初始渲染消耗。

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

复制代码

6.列表输出

v-for用于循环列表。

复制代码

7.数组更新

注意：filter()、concat() 和 slice()不发生更新。

复制代码

8.事件处理

v-on：当执行xx动作时执行xx函数。

复制代码

9.事件修饰

10.键盘事件

复制代码

其余键盘操作介绍：

.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right .ctrl .alt .shift .meta 等 请参考文档 复制代码

11.表单输入

双向数据绑定指令lazy，number，trim。

复制代码

.lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步： .number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： 这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。 .trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。