vue入门——3vue常用概念结构

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

本文目录：

一、Vue实例与数据绑定，

二、Vue生命周期，

三、插值与表达式，

四、过滤器，

五、指令和事件，

六、语法糖，

七、计算属性，

八、v-bind指令，

九、class与style绑定，

 

一、Vue实例与数据绑定

vue应用通过构造函数vue就可以创建一个vue的根实例。

如下图：el选项指定页面已经存在的一个dom元素，来挂载vue实例。如下图中可通过app.$el来访问该元素。下图的代码运行结果，在input标签中输入内容，会在h1标签中显示。建议用到的数据在myData中声明，便于维护。

如上图最后代码，vue实例中的属性可进行取值赋值操作。

二、Vue生命周期

上图中，this指向调用他的vue实例。

三、插值与表达式

数据双向绑定。如果需要输出html，而不是数据解释后的纯文本，则可用v-html指令。

四、过滤器

vue中的过滤器可使用在两个地方：双括号插值和v-bind表达式（该表达式介绍见下八）。v-bind表达式从2.10后的版本开始支持。

过滤器应该被添加在js尾部，使用竖线符号指示。常用于格式化文本，比如字母大小写，货币千分位使用逗号分隔等。通过给vue实例添加filter选项来设置。

过滤器可使用串联，使用竖线分隔设置多个过滤器。也可以接收参数。

但一般用于简单的文本处理。复杂的文本处理建议用计算属性（计算属性在下面第七个）。

五、指令和事件

如下图，当v-if指令值为true时p元素会被插入。false时会被移除。

数据驱动dom是vue的核心理念。我们处理好数据，vue会帮我们实现dom操作。

v-on指令绑定事件侦听器，可监听原生dom事件，click、onclick、keyup、mousemove等。

如下图代码中，methods中的this指向vue实例，因此可通过this直接去操作该实例的data选项中的数据。

绑定事件可以是方法名，也可以直接是内联语句，如show=false。

六、语法糖

语法糖即在不影响功能的情况下，添加某种方法，实现同样的效果，方便程序开发。

七、计算属性

计算属性可以依赖于其他起算属性。计算属性不仅可以依赖于当前vue实例，也可依赖于其他vue实例的值，便于组件化开发。

计算属性的值可以被缓存，一个计算属性所依赖的数据变化时才会重新计算。建议遍历大数组大量计算时才使用计算属性。

八、v-bind指令

v-bind指令是vue内置指令，基本用途是：动态更新html元素上的属性，比如id、class等。如下图，href属性和src属性都被动态设置了，数据变化重新渲染。最常用的元素样式名称class、style等变化（见下九）。

九、class与style绑定