Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue模板语法
1.文本
<!-- ================= 插值文本 ======================= -->
<div id="vue_det">
<!-- {{}} 用于输出对象属性和函数返回值。 -->
<h1>site : {{name}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
<div v-html="message">
</div>
</div>
<script type="text/javascript">
<!-- ================= 插值文本(v-html) ======================= -->
var vm = new Vue({
// el代表需要构造的元素id
el: '#vue_det',
// data用于自定义属性
data: {
name: "天天加油",
url: "www.goodly.com",
alexa: "13540869383",
message: '<h1>菜鸟教程</h1>'
},
// methods 用于定义的函数,可以通过 return 来返回函数值。
methods: {
details: function() {
return this.name + " - 学的不仅是技术，更是梦想！";
}
}
});
</script>
2.html(v-html)
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>
3.属性（v-bind:）
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
<!-- ================= 插值属性 ======================= -->
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
<!-- 为use=false则不赋class值为class1，反之亦然-->
v-bind:class 指令
</div>
</div>
<script>
<!-- ================= 插值属性(v-bind) ======================= -->
var test1 = new Vue({
el: '#app',
data: {
use: false
}
});
</script>
4.表达式
<!-- ================= 表达式 ========================= -->
<div id="app1">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
<!-- ================= 表达式 ========================= -->
new Vue({
el: '#app1',
data: {
ok: true,
message: 'RUNOOB',
id: 11
}
})
</script>
5.点击事件（v-on：click）
<!-- ================= 点击事件 ========================= -->
<div id="bu1">
<button type="button" v-on:click="test1()"></button>
</div>
<script>
<!-- ================= 点击事件 ========================= -->
new Vue({
el: '#bu1',
data: {
ok: true,
},
methods: {
test1: function() {
console.log(11111)
}
}
})
</script>
6.指令判断（v-if）
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
7.参数
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
8.数据双向绑定
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
<!--=====================================数据双向绑定================================= -->
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message"/>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:''
}
})
</script>
9.反转字符串
<div id="app">
<p>{{message}}</p>
<button v-on:click="revers" style="width: 50px;height:30px;">反转</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'qwertyu'
},
methods:{
revers:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
