【传智播客郑州】Vue.js快速入门
了解Vue.js
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，它不仅易于上手，还便于与第三方库或既有项目整合.
Vue.js安装
下载Vue.js:https://github.com/vuejs/vue
（我们现在使用的版本是2.5.16）
快速入门
声明式渲染
我们现在做个最简单的小例子，演示如何使用Vue.js实现声明式渲染。
创建Vue_1.html，将Vue.js资料包下的dist目录的vue.min.js拷贝到工程中，并在html页面中引入
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js的声明式渲染</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="myVue">
{{message}}
</div>
</body>
<script type="text/javascript">
var myVue = new Vue({
el:"#myVue",
data:{
message:"Hello World"
}
});
</script>
</html>
分析：
{{message}} : 表示view。 new Vue()：表示创建Vue对象，用于连接view和model。 el:表示指向view。 data：表示指向model。 通过Vue对象连接view和model，{{message}}就可以获取到Vue对象中data定义的message的内容。
运行结果如下：
绑定元素特性
Vue.js除了声明式渲染之外，还可以进行绑定元素的特性：
创建Vue_2.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js绑定元素特性</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="myVue">
<span v-bind:title="message">
传智播客
</span>
</div>
</body>
<script type="text/javascript">
var myVue = new Vue({
el:"#myVue",
data:{
message:"http://www.itcast.cn"
}
});
</script>
</html>
分析：
v-bind:称为指令,将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致
运行结果如下：
双向绑定示例
我们刚才的例子非常简单，咱们再来看一下Vue.js双向数据绑定的使用：创建Vue_3.html
<html> <head> <meta charset="utf-8" /> <title>Vue.js双向数据绑定title> <script type="text/javascript" src="js/vue.min.js">script> head> <body> <div id="myVue"> <p>Message is:{{message}}p> <input type="text" v-model="message" /> div> <script type="text/javascript"> var myVue = new Vue({ el:"#myVue", data:{ message:"" } }); script> body> html>
分析：v-model:指令，监听用户的输入事件以更新数据。
运行结果如下：
按钮事件绑定
Vue.js可以用 v-on 指令监听标签的事件，并在触发时运行JavaScript 代码。
创建Vue_4.html
<html> <head> <meta charset="utf-8" /> <title>Vue.js按钮事件绑定title> <script type="text/javascript" src="js/vue.min.js">script> head> <body> <div id="myVue"> <input v-on:click="show" type="button" value="点击"> div> <script type="text/javascript"> var myVue = new Vue({ el:"#myVue", data:{ message:"欢迎来到传智播客！" }, methods:{ show:function(event){ alert(this.message); } } }); script> body> html>
分析：
v-on:指令。 v-on:click:设置监听input的点击事件的事件。 methods:定义v-on:click的方法。 event：表示标签的原生事件 this.message:表示指向Vue对象中定义的message。
运行结果如下：
遍历集合数据
我们可以使用Vue.js的v-for指令对数组或者集合的数据进行遍历展示。
创建Vue_5.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js遍历集合</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<table id="myVue" width="30%" border="1">
<tr>
<th>序列</th>
<th>商品编号</th>
<th>商品名称</th>
<th>价格</th>
</tr>
<tr v-for="(product,index) in products">
<td>{{index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#myVue",
data:{
products:[
{
id:1001,
name:"数码相机",
price:3000
},
{
id:1002,
name:"苹果手机",
price:7000
}
]
}
});
</script>
</html>
分析：
v-for="(product,index) in products" ： v-for为Vue指令，用于遍历集合，其基本语法为“item in items”。products为要遍历的集合。(product,index)中的product用于存放遍历集合的元素，index用于存放集合元素的角标，从0开始。 在Vue对象的data属性中，通过products[{}]的形式设置集合的数据。
运行结果如下：
路由操作
vue-router下载
Vue.js想要实现路由效果，需要和vue-router进行组合实现，在Vue.js中并没有关于vue-router的js文件，所以vue-router需要单独去下载，另外需要注意的是Vue.js+vue-router实现的路由操作是但页面的路由操作。
下载vue-router:https://github.com/vuejs/vue-router
路由实现
创建Vue_6.html,引入vue.min.js和vue-router.min.js文件
<html> <head> <meta charset="utf-8"/> <title>Vue.js路由操作title> <script type="text/javascript" src="js/vue.min.js">script> <script type="text/javascript" src="js/vue-router.min.js">script> head> <body> <div id="myVue"> <div> <h1>HEADh1> <router-link to="/JAVAEE">JAVAEErouter-link> <router-link to="/IOS">IOSrouter-link> <router-link to="/Android">Androidrouter-link> div> <router-view>router-view> <div> <h1>FOOTh1> div> div> body> <script type="text/javascript"> var java = ''; var ios = ''; var android = ''; var JAVAEE = { template: java } var IOS = { template: ios } var Android = { template: android } var routes = [ { path: '/', component: JAVAEE }, { path: '/JAVAEE', component: JAVAEE }, { path: '/IOS', component: IOS }, { path: '/Android', component: Android } ] var router = new VueRouter({ routes : routes }) var app = new Vue({ router : router }).$mount('#myVue') script> html>
分析：
router-link：默认会被渲染成一个a标签，用来设置导航操作，其中的to属性用来指定链接路径。 router-view：用来显示路由页面。 const JAVAEE = {template:java}：定义跳转的页面组件，因为Vue.js+vue-router是单页面的路由操作，所以如果想要实现页面跳转，需要借助iframe等标签显示页面。 {path:'/', component:JAVAEE}：设置相应的路由跳转到相应的页面。 var router = new VueRouter({routes:routes}):是创建路由对象。 var app = new Vue({router:router}).$mount('#myVue') ： 将路由的对象设置到Vue对象上，并通过$mount手动的挂载到相应的组件中。
运行结果如下：
