最近，有时间研究了一下vue，但只是刚刚开始。可能第一次写这个文档有点不好，请阅读的盆友们谅解一下。学过angular js的人，应该看这个会稍微简单点吧。有
最近，有时间研究了一下vue，但只是刚刚开始。可能第一次写这个文档有点不好，请阅读的盆友们谅解一下。学过angular.js的人，应该看这个会稍微简单点吧。有相似处。
1、vue.js是什么？
简单来说：Vue是法语中视图的意思。他是一个轻巧、高性能、可组件化的MVVM库也可以理解为是一套构建用户界面的 渐进式框架。Vue的核心库只关注视图层。目标：通过尽可能简单的api实现相应的数据绑定和组合的视图组件。同时拥有非常容易上手的API。
2、如何使用
第一步：先引入js文件：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
3、本节讲到的一些指令：(指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性。)
v-bind,v-if,v-for,v-on,v-model
4、基本案例如下图所示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--第一步引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<h2>1、基本的输出hello vue</h2>
<div id="app">
<p>{{message}}</p>
</div>
<!--注意：
数据和DOM已经绑定在了一起，所有的元素都是响应式的。
如何测试：可以打开你的浏览器控制台，修改app.message的值。回车。你会看到内容更新
例如：app.message="some new ";
-->
<h2>2、指令v-bind</h2>
<div id="app-2">
<!--v-bind指令-->
<!-- 将元素节点title属性和vue的message属性绑定到一起-->
<span v-bind:title="message">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam delectus dignissimos eius,
eum exercitationem ipsum molestiae neque nihil, perferendis similique sint velit, vero voluptate!
Modi obcaecati praesentium sint voluptatem voluptatibus.
</span>
</div>
<h2>3、条件与循环（v-if）</h2>
<div id="app-3">
<p v-if="seen">now you see me</p>
</div>
<!--
注意：app3.seen=false,内容会消失。
-->
<h2>3、循环（v-for）</h2>
<div id="app-4">
<ol>
<li v-for="todo in todos"><!--todo为名称循环todos-->
{{todo.text}}
</li>
</ol>
</div>
<!--
可以绑定DOM文本到数据，也可以绑定DOM结构到数据
如图所示：
--> <h2>4、处理用户输入v-on</h2>
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">REVERSE MESSAGE</button>
</div>
<!--翻转字符串 如下图所示：
-->
<h2>5、双向数据绑定v-model</h2>
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
<!--
input里的内容如何变化，文本的内容也随之改变
-->
<h2>组件构建应用</h2>
<div id="app-7">
<ol>
<!-- 我们提供为todo对象提供了todo-item-->
<!--这就代表着内容必须是动态的-->
<!-- 循环grocerylist取名为item,把item的值绑定给todo.把todo的值传给props-->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
var app1=new Vue({
el:'#app',//元素id
data:{
message:"hello vue.js"//message的内容
}
})
/*指令 bind绑定*/
var app2=new Vue({
el:"#app-2",
data:{
message:"your loded this page on"+new Date()
// 可以打开console控制台。查看span 标签title的内容
}
})
var app3=new Vue({
el:"#app-3",
data:{
seen:false//绑定的数据消失。
}
})
var app4=new Vue({
el:"#app-4",
data:{
todos:[
{text:"learn JAVASCRIPT"},
{text:"Learn vue"},
{text:"build something awesome"}
]
}
//在控制台输入。app4.todos.push({text:'new item'}).列表中会添加一个数据
})
var app5=new Vue({
el:'#app-5',
data:{
message:'hello vue.js'
},
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join('')
// 把字符串切割，然后翻转。在按拼接
}
}
})
var app6=new Vue({
el:"#app-6",
data:{
message:'hello vue'
}
})
Vue.component('todo-item',{
props:['todo'],//todo-item组件接受一个“prop”支柱,它就像一个自定义属性。这个支柱叫做todo
template:'<li>{{todo.text}}</li>'//todo.text就相当于调用的是groceryList.text
})
var app7=new Vue({
el:"#app-7",
data:{
groceryList:[
{text:"vegetables"},
{text:'cheese'},
{text:"whatever else humans"}
]
}
})
</script>
</body>
</html>
