【vue 权威指南】 学习笔记 一

内容简介

vue.js 是一个用来开发Web界面的前端库。

1.vue.js 是什么

vue.js 是一个构建数据驱动的web界面的库，vue.js 通过简单的API提供高效的数据绑定和灵活的组件系统。

• vue.js 特性： 体积小，数据绑定，指令
• vue 不支持低端浏览器ie6/7/8

2.vue 的使用

• yarn add -D vue
  
  vue 正式发布于2014/2

3.数据绑定

数据绑定是将数据和视图相关联，当数据发生变化时，可以自动更新视图。

3.1语法

3.1.1 插值

文本插值，使用双大括号，{{}},

• {{*text}} // 只需渲染一次数据，后续数据变化不再关心，可以通过*实现
• 变量中是html片段时，可以使用三个大括号来绑定，如果使用两个大括号，html 会被当成是字符串

<span>{{{logo}}}<span>
logo: '<span>AAA</span>'

• 双大括号也可以放在HTML标签内
  
  ``

``

注意： vue 指令和自身特性是不可以插值的，如果用错地方，vue会发出警告。

3.2表达式

{{}} 中接受表达式的值，表达式可以由JavaScript表达式和过滤器构成，过滤器可以没有，可以有多个。

表达式是各种数值、变量、运算符的综合体

{{example | filterA | filterB a b}} // 过滤器例子， a b 是参数

3.3指令

指令是带有v-前缀的特殊特性，其值限定为绑定表达式，也就是JavaScript表达式和过滤器。指令的作用是，当表达式的值发生变化时，将这个变化反应在DOM上

<div v-if="show">HHH </div>

另一种不同的指令,指令和表达式之前插入一个参数，用冒号分隔

<a v-bind:href="url"></a>
<div v-on:click="action"></div>

3.4分隔符 {{ | }}

vue 中数据绑定的语法可以配置，如果不喜欢{{}},可以自己设置，可以在Vue.config 中绑定语法，Vue.config是一个对象，包含vue 中的所有全局配置，可以在vue实例化钱修改其中的属性，