vue.js (二）

1.自定义指令

• 像 v-if, v-bind, v-on 等等都是 vus.js 自带的指令，而开发者还可以开发自定义的指令

<div id="div1">   
    <div v-xart="{color:'red',text:'best learning video'}"> 好好学习，天天向上 </div>
</div>
 
<script>
	Vue.directive('xart', function (el,binding) {
	    el.style.color = binding.value.color
	})
	 
	new Vue({
	  el: '#div1'
	})
</script>

2.路由

• vue.js 里的路由相当于就是局部刷新。 需要一个额外的库： vue-router.min.js

<div id="app">
    <div>
	  <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>
    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>