vue从入门到精通
一、什么是vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层
数据与视图各司其责，通过绑定建立联系
二、vue集成步骤
1、引入js
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
2、初始化密码
var app = new Vue({
el: '#app', // 应用ID
data: { // 应用数据
users: [{id:1, name:"张三"},{id:2, name:"李四"}]
},
methods: { // 应用方法
query: function() {
}
}
});
3、绑定页面
<div class="container" id="app">
<div class="row">
<table class="table table-bordered table-striped table-hover">
<caption>用户列表</div>
<thead>
<th>ID</th>
<th>名称</th>
</thead>
<tbody>
<tr v-for="(user,index) in users">
<td>{{user.id}}</td>
<td><span>{{user.name}}</span></td>
</tbody>
</table>
</div>
</div>
ajax请求默认是异步的，不等待请求结束；
同步执行是当前行不执行完就不会执行下一行
三、vue的路由功能
1、路由组件装载html
（1）组件.js
// Ajax取得HTML，赋值给组件的template
var productListHtml = "";
$.ajax({
url: "productListVue.html",
async: false, // 必须是同步的
type: "get",
success: function(result) {
productListHtml = result;
}
});
(2)、定义组件
const ProductList = {
data: function() {
return {
products: []
}
},
methods: {
query: function() {
const that = this; // 改名this
}
},
template: productListHtml,
mounted: function(){ // 钩子，页面加载之后
this.$nextTick(function () {
// 路由页面装载完之后进行初始化动作
})
}
}
2、路由父子页面参数传递
// 路由页面的配置，path, name , component
const routes = [
{ path: '/productList', name: 'ProductList', component: ProductList }
]
// 跳转页面并传递参数
this.$router.push({
name: "ProductList",
component: ProductList,
params: {
keywords: "abc"
}
});
// 路由子页面接收参数
data: function() {
return {
keywords: this.$route.params.keywords
}
}