Vue基础语法

前端框架很多，无论选择哪个框架，对于前端处理的事情依旧是模板渲染、处理用户数据交互、事件的绑定等，只不过每个框架的理念和写法不同而已。Vue通过声明一个唯一的页面实例new Vue（{…}）来标记当前页面的HTML结构、数据展示及相关事件的绑定。

模板语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM与底层Vue实例的数据进行绑定。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。

简单地说：Vue模板语法实现前端渲染，前端渲染即是把数据填充到html标签中。数据（来自服务器）+模板（html标签）=前端渲染（产物是静态html内容）。

插值
插值就是将数据插入html文档中，包含文本、html元素、元素属性等。
文本插值
文本插值中用得最多的就是用双大括号的形式插入文本
使用v-once指令插值
在上面代码中页面只会呈现I LOVE YOU，当改变data中的message属性值时，页面将不再刷新。

HTML插值

双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用v-html。使用v-html指令将数据解释成HTML代码

属性插值

Mustache语法不能作用在HTML attribute上，遇到这种情况应该使用v-bind：指令。

在开发的时候，有时属性不是固定不变的，有可能根据我们的一些数据动态地决定，例如图片标签（img ）的src属性，我们可能从后端请求了一个包含图片地址的数组，需要将地址动态地绑定到src上，这时就不能简单地将src固定为某个地址。还有一个例子就是a标签的href属性。这时可以使用v-bind：指令。其中，v-bind：可以缩写成冒号：使用v-bind：指令绑定属性
服务器请求过来的数据，我们一般都会在data那里中转一下，中转过后再把需要的变量绑定到对应的属性上面。
v-bind除了可以在开发中用在有特殊意义的属性外（src、href等），也可以绑定其他一些属性，如与class和style绑定，如例
既然是一个对象，那么该对象内的属性就可能不唯一，但只要有一项为真，对应的类名就会存在。通过v-bind更新的类名和元素本身存在的类名不冲突，可以优雅地共存，

插值中使用JavaScript表达式

迄今为止，在模板中，我们一直都只绑定简单的property键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制需要注意，每个绑定只能包含单个表达式，所以下面的表达式不会生效，代码如下：

指令

指令在上面已经使用过了，例如v-bind：和v-html，指令就是指这些带有v-前缀的特殊属性。指令属性的值预期是单一JavaScript表达式（除了v-for）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上。
1．参数
有一些指令能够接收一个“参数”，在指令名称之后以冒号表示。如v-bind指令可以用于响应式地更新HTML attribute，代码如下：

在这里href是参数，告知v-bind指令将该元素的href attribute与表达式url的值绑定。
2．动态参数
从版本2.6.0开始，可以用方括号将JavaScript表达式作为一个指令的参数括起来，响应式使得Vue更加灵活多变，其动态参数也有其含义，代码如下：

这里的attributeName会被作为一个JavaScript表达式进行动态求值，求得的值将作为最终的参数使用。例如，如果Vue实例有一个data属性attributeName，其值为’href’，那么这个绑定将等价于v-bind：href。
同样地，可以使用动态参数作为一个动态的事件名绑定并处理函数，格式代码如下：
同样地，当eventName的值为’focus’时，v-on：[eventName]等价于v-on：focus。
当然动态参数的值也有约束，动态参数预期会求出一个字符串，异常情况下此值为null。这个特殊的null值可以被显性地移出绑定。任何其他非字符串类型的值都会触发一个警告。
3．修饰符
修饰符（Modifiers）是以半角句号“.”指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault（），代码如下：
在后面章节对v-on和v-for等功能的探索中，将会看到修饰符的其他例子。
3.1.3　过滤器
过滤器是对即将显示的数据做进一步的筛选和处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
过滤器分全局过滤器和局部过滤器，全局过滤器在项目中使用频率非常高。
1．定义过滤器
·　全局过滤器

    Vue.filter('过滤器名称',function(value1[,value2,...]){
    //逻辑代码
    })
·　局部过滤器

    new Vue({
            filters:{
         '过滤器名称':function(value1[,value2,...]){
           //逻辑代码

过滤器使用的地方
Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式（后者从2.1.0+版开始支持）。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示，格式代码如下：