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>