上期整理了vue.js的简介和创建vue实例的步骤，详见博客—Vue.js框架入门之vue简介和基本语法(一）
现在来续写第二期—模板语法和样式绑定
目录
一、模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
1、插值
#文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
<div id="app">
<p>{{ message }}</p>
</div>通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>#HTML
使用 v-html 指令用于输出 html 代码：
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>#JavaScript表达式
Vue.js 都提供了完全的 JavaScript 表达式支持
<p>{{ number + 1 }}</p> //叠加
<p>{{ ok ? 'YES' : 'NO' }}</p> //三目运算符
<p>{{ message.split('').reverse().join('') }}</p> //反写2、指令
当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<p v-if="seen">现在你看到我了</p>这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
#参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性、v-on 指令它用于监听 DOM 事件：
<div id="app">
<p><a v-bind:href="url">vue.js</a></p>
<div v-bind:class="color">test...</div>
<a v-on:click="click1">...</a> //绑定鼠标点击监听事件click1
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com',
color:'blue'
}
methods:{
//声明click1事件
click1 : function () {
console.log('click1......');
}
}
})
</script>
<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>代码演练
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}
<p>test{{ rawHtml }}</p> <!-- 插入HTML文本 -->
<p v-html="rawHtml"></p> <!-- 插入HTML属性 -->
<div v-bind:class="color">test...</div> <!-- v-bind指令声明该元素的class属性 -->
<p>{{ number + 1 }}</p> <!-- JavaScript表达式-叠加 -->
<p>{{ 1 == 1 ? 'YES' : 'NO' }}</p> <!-- 三目运算符 -->
<p>{{ message.split('').reverse().join('') }}</p> <!-- 反拼写 -->
</div>
<!-- 脚本区 -->
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
rawHtml : '<span style="color:red">this is should be red</span>',
color:'blue',
number : 10,
message : "vue"
}
});
</script>
<!-- 样式区 -->
<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>
</body>
</html>
运行结果
3、缩写
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>二、Class 与 Style 绑定
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
#对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：
你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板：
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>和如下 data：
data: {
isActive: true,
hasError: false
}结果渲染为：
<div class="static active"></div>#数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>data: {
activeClass: 'active',
errorClass: 'text-danger'
}渲染为：
<div class="active text-danger"></div>#内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: {
activeColor: 'red',
fontSize: 30
}直接绑定到一个样式对象通常更好，这会让模板更清晰：
<div v-bind:style="styleObject"></div>data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}同样的，对象语法常常结合返回对象的计算属性使用。
代码演练
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div
class="test"
v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']" <!-- 对象/数组语法 -->
style="width:200px; height:200px; text-align:center; line-height:200px;"> <!-- 内联样式 -->
hi vue
</div>
<div :style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
hi vue
</div>
</div>
<!-- 脚本区 -->
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
isActive : true,
isGreen : true,
color : "#FFFFFF",
size : '50px',
isRed : true
}
});
</script>
<!-- 样式区 -->
<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
</style>
</body>
</html>
运行预览
后续会整理条件渲染和列表渲染~~~~
