本文共 1998 字，大约阅读时间需要 6 分钟。
一、每个vue应用都需要通过实例化vue来实现，vue模块格式如下：
var vm = new Vue({
//选项
})
具体代码如下
第一个vue程序 a : { {a}}
b : { {b}}
c:{ {c}}
d:{ {d}}
这段代码指明了模块的id 也就是vue_id，模块里面将要显示a,b,c,d四个元素的内容，而内容由后面的指定。
这段代码就是对上段dam的实现，其中el参数对应于上面代码DOM元素中的id，这意味着我们接下来的改动都是针对vue_id模块而不针对其他组件。
data用于定义属性，我定义了它的属性有四个，分别为a,b,c,d。这样就可以给a，b,c,d赋值了。运行结果为：
二、Vue.js模板语法
Vue.js使用了基于HTML的模块语法，允许开发者声明式第将DOM绑定至底层Vue实例的数据。
Vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。
1.插值
文本：数据绑定最常见的形式就是使用{ {...}}（双大括号）的文本插值，如下例子：
文本插值 a : { {a}}
运行结果：
HTML：使用v-html指令用于输出html代码，例子如下：
文本插值
运行结果：
属性：HTML属性中的值应该使用v-bind指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
v-bind:class 指令测试 v-bind:class 指令测试
其中id可自由改，但是v-model必须为use。
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
表达式测试 { {1+2}} { {ok ? 'yes':'no'}} { {message.split('').reverse().join('')}}表达式测试
2.指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子就是一个使用指令属性v-if来控制是否显示指定文本的代码：
指令测试 现在你能看到我
指令测试
一如既往地爱学习
运行结果：
补充：<template>元素，顾名思义，就是用来声明是“模板元素”。<template>标签还有一个特性，就是位置任意性，这非常类似<script>或者<style>标签，可以在<>中，也可以在<body>或者<frameset>中。
参数 参数在指令后以冒号指明。
例如， v-bind 指令被用来响应地更新 HTML 属性：
参数测试
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
，在这里参数是监听的事件名。
补充：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
<a> 标签定义超链接，用于从一张页面链接到另一张页面，<a> 元素最重要的属性是 href 属性，它指示链接的目标。
修饰符 修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
3.用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
用户输入测试 {
{message}}
v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
反转字符串测试代码：
反转字符串测试 {
{message}}
运行结果：
缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
v-on 缩写
转载地址：http://tqhjn.baihongyu.com/