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

}

}