vue学习（3）——使用与功能

1. < router-link>组件支持用户在具有路由功能的应用中点击导航。
   详解可参考博客：vue2.0中router-link详解

2. < router-view>
   以饿了么订餐为例：在同个页面，切换显示不同组件的相应内容，同时地址栏的地址是会变的。
   详解可参考博客：vue之router-view组件的使用

3. 自定义指令

   <div id="show-blogs" v-theme:column="'wide'"> 
   		...
   // 自定义指令v-theme
   import Vue from 'vue'
   Vue.directive('theme',{
     bind(el, binding, vnode){
       if(binding.value == 'wide'){
         el.style.maxWidth = '1260px';
       } else if(binding.value == 'narrow'){
         el.style.maxWidth = '560px';
       }
   
       if(binding.arg == 'column'){
         el.style.background = '#6677cc';
         el.style.padding = '20px';
       }
     }
   })
   ...
   
   
   

4. 编辑框里的文字提示效果，比如
   

   <input 
   	type="text" 
   	v-model="search" 
   	placeholder="请输入搜索的关键字"
   >
   

5. v-model指令
   (1) v-model指令的本质是负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。同时，v-model会忽略所有表单元素的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。然后当输入事件发生时，实时更新vue实例中的数据。
   (2) 详解可参考博客：vue_v-model指令的基本用法

6. < ul>是无序标签；< ol>是有序标签

7. v-for="one in arrays"循环指令

   <li v-for="(category, index) in blog.categories" :key="index">
   

8. v-html与v-text指令
   v-html：可以识别HTML标签
   v-text：可以识别字符串标签
   详解可参考博客：Vue学习之路第四篇：v-html指令