第一个Vue示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = 'd1'>
<p>name:{{name}}</p>
<p>age:{{age}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#d1", // 绑定标签
data:{
name:"qingqiu",
age:17,
}
})
</script>
</html>
每一个vue实例，都需要划分一块地方，给予vue来放置东西。
首先，需要实例化一个vue对象。
el："一般使用标签的id"。
data：{ 放置数据的位置 }
数据和方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "d1">
<p>name:{{name}}</p>
<p>age:{{age}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
var info = {
name:"qingqiu",
age:17
};
// 可以先创建一个变量包含了信息，然后再将之传入data
var app = new Vue({
el:"#d1",
data:info
})
</script>
</html>
模板语法：
v-html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p>{{msg1}}</p>
<p>{{msg2}}</p> <!-- 若是不加v-html，将会以字符串的形式显示 -->
<p v-html="msg2">{{msg2}}</p> <!--标签属性加上 v-html="msg2(data中的键)"，这样才会渲染标签。-->
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#d1",
data:{
msg1:"顾清秋",
msg2:"<a href='https://www.baidu.com'>点击跳转</a>",
},
})
</script>
</html>
指令示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p v-if="status">沉默着，走了有，多遥远</p>
<!-- v-if="status" 表示这个标签如果status返回的是true则显示，如果是false则不显示标签-->
<p v-show="status">抬起头，慕然间，才发现</p>
<!--v-show="status" 表示这个标签如果status返回的是true则显示，如果是false则显示标签，不现实标签内的内容，
只是相当于给标签加了个style="diplay:none"的样式-->
<!-- 参数：
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：
-->
<p><a v-bind:href="url">点击跳转</a></p>
<!-- v-bind:href="url" 在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。 -->
<p><button v-on:click="click">点击事件</button></p>
<!-- v-on:click="click" v-on 用于监听事件，紧跟的click是事件名.最后的“click”是被绑定的methods中的方法 -->
<form action="" v-on:submit.prevent="submit">
<!-- 监听submit事件，并阻止页面的刷新：submit.prevent -->
<input type="text">
<input type="submit">
</form>
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#d1",
data:{
status:true,
url:"https://www.baidu.com",
},
//methods中是专用来放置方法
methods:{
click:function(){
alert("点击事件")
},
submit:function(){
alert("阻止form的刷新页面")
},
},
})
</script>
</html>
计算属性和侦听器：
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> <p>{{msg}}</p> <p>{{msg.split("").reverse().join("")}}</p> <p>{{reversemsg()}}</p> <!--上面的是方法：方法时每次都会被调用，也就是每次都会重新执行一遍--> <p>{{reversemsg2}}</p> <!--上面的是属性：属性只会在更新的时候执行一次，以后除非属性更改，否则就不会再次执行，只会在缓存中拿取值。--> <p>{{quanming}}</p> <p>{{quanming2}}</p> <!--动态属性一般放置在computed中--> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el:"#d1", data:{ msg:"12345", ming:"清秋", xing:"顾", quanming:"顾 清秋" }, methods:{ reversemsg:function(){ console.log("这是一个方法"); return this.msg.split("").reverse().join("") }, }, computed:{ //计算属性 reversemsg2:function(){ console.log("这是属性"); return this.msg.split("").reverse().join("") }, quanming2:function(){ return this.xing + this.ming }, }, //侦听器：实时会根据属性的更改而执行一些命令 watch:{ //val 就是属性的值。 xing:function(val){ this.quanming = val + this.ming }, ming:function(val){ this.quanming = this.xing + val }, }, }) </script> </html>
class 与 style:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c{ height: 200px; width: 200px; border-radius: 50%; background-color: red; } .c1{ background-color: green; } </style> </head> <body> <div id="d1"> <div class="c" v-bind:class="{c1:status}" v-on:click="change"></div> <!-- v-bind 绑定class 若是status为true则添加class="c1"--> <!-- v-on 监听点击事件，执行change指向函数中的操作--> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el:"#d1", data:{ status:false, }, methods:{ change:function(){ this.status = !this.status // 状态反转：给同一个变量每次赋予相反的值。 }, } }) </script> </html>
条件渲染：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> <template v-if="status"> <p>沉默着，走了有，多遥远</p> <p>抬起头，慕然间，才发现</p> <p>一直倒退</p> </template> <p v-else>忘记时间</p> <!-- 同if else语句 若status为true则显示if语句，否则显示else语句 --> <hr> <ul> <li v-for="i in list">{{i}}</li> </ul> <hr> <ul> <li v-for="i,index in list">{{index}}:{{i}}</li> <!--for循环的第一个变量就是值，第二个是索引，值永远是第一个--> </ul> <hr> <ul> <li v-for="v,k,i in obj">{{i}}:{{k}}:{{v}}</li> <!--第一个值也是值，第二个是键,第三个是索引--> </ul> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el:"#d1", data:{ status:true, list:[ "吃饭", "睡觉", "打豆豆", ], obj:{ name:"清秋", age:17 } }, }) </script> </html>
表单绑定：
你可以用 v-model 指令在表单 <input> 及 <textarea>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的value，checked，selected特性的初始值而总是将Vue实例的数据作为数据来源，所以应该通过JavaScript在组件的data选项中声明初始值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> <input type="text" v-model.trim="msg"> <!--v-model 双向绑定，实时获取更新数据 trim：去除空格--> <p>{{msg}}</p> <hr> <div id="example-3"> <input type="checkbox" id="jack" value="basketball" v-model = "hobby"> <label for="jack">篮球</label> <input type="checkbox" id="john" value="football" v-model = "hobby"> <label for="john">足球</label> <input type="checkbox" id="mike" value="tennis" v-model = "hobby"> <label for="mike">网球</label> <br> <span>我的爱好：{{hobby}}</span> </div> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el:"#d1", data:{ msg:'', hobby:[], }, }) </script> </html>
小清单示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: green; } .c2{ text-decoration: line-through; } </style> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="contanier " style="margin-top: 100px"> <div class="row"> <div id="d1" class="col-md-6 col-md-offset-3"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">小清单</h3> </div> <div class="panel-body"> <!--输入框开始--> <div class="input-group"> <input v-model="item.title" type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button v-on:click="add" class="btn btn-default" type="button"><span class="glyphicon glyphicon-plus"></span></button> </span> </div> <!--输入框结束--> <hr> <!--列表组开始--> <div class="list-group"> <div id="event" v-for="(items,index) in eventlist" class="list-group-item" v-bind:class="{c2:items.status}"> <span class="glyphicon glyphicon-ok-sign" v-bind:class="{c1:items.status}" v-on:click="change(index)"> </span> {{items.title}} <span v-on:click="remove(index)" class="glyphicon glyphicon-remove pull-right"></span> </div> </div> </div> </div> </div> </div> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el: "#d1", data: { eventlist: [], item:{ status:false, title:"", } }, methods: { change:function(index){ alert(index); this.eventlist[index].status = !this.eventlist[index].status; }, add:function(){ var obj = Object.assign({},this.item); this.eventlist.push(obj); this.item.title=""; }, remove:function(index){ this.eventlist.splice(index,1); } }, }) </script> </html>