Vue笔记-下

路由

使用路有钱需要添加额外的库 vue-router.min.js

<div id="app">
    <div class="menu">
        <!--
            router-link 相当于就是超链
            to 相当于就是 href
        -->
        <router-link to="/user">用户管理</router-link>
        <router-link to="/product">产品管理</router-link>
        <router-link to="/order">订单管理</router-link>
    </div>
    <div class="workingRoom">
        <!--
            点击上面的/user,那么/user 对应的内容就会显示在router-view 这里
         -->
         <router-view></router-view>
    </div>
</div>
<script>
    /*
    * 申明三个模板( html 片段 )
    */
    var user = { template: '<p>用户管理页面的内容</p>' };
    var second = { template: '<p>产品管理页面的内容</p>' };
    var order = { template: '<p>订单管理页面的内容</p>' };
    /*
    * 定义路由
    */
    var routes = [
        { path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user，没有这个就是空白
        { path: '/user', component: user },
        { path: '/product', component: second },
        { path: '/order', component: order }
    ];
    /*
    * 创建VueRouter实例
    */
    var router = new VueRouter({
        routes:routes
    });
    /*
    * 给vue对象绑定路由
    */
    new Vue({
        el:"#app",
        router
    })
</script>

Ajax的使用

ajax可以由五种方法

方法	备注
原生 ajax	原生一般不再使用
JQuery	不如后面的方便
vue-resource	已经停止维护
fetch.js	Vue官方推荐
axios.js	Vue官方推荐

fetch.js

一般来说fetch不会直接使用原生Ajax框架，fetch是个比较流行的ajax框架。示例代码

<script>
fetch(url).then(
	function(response){
		response.json().then(
			function(jsonObject){
				var jsonString = JSON.stringify(jsonObject)
				document.getElementById("hero").innerHTML = "通过fetch获取到的json数据："+ jsonString;
				cData=jsonString;
			}
		)
	}
)
</script>

axios.js

	function(response){
		var jsonObject = response.data;
		cData=jsonObject
		var jsonString = JSON.stringify(jsonObject)
        document.getElementById("hero").innerHTML = "通过 axios 获取到的json数据："+ jsonString;
	}