2018-09-24路由的应用

路由的理解:

路由:vue-router
vue的核心插件
vue-router.js
npm install vue
npm install vue-router
根据不同的url访问不同的页面
创建单页面SPA(SINGLE PAGE APPLICATION)应用

1.路由分为5部分

①创建<router-link></router-link>盛放链接对应的内容<router-view></router-view>
②创建组件
③配置路由
④创建路由实例
⑤路由实例挂在的vue
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <a></a>
  <div id='app'>
     <!--1.-->
     <router-link to='/home'>首页</router-link>
     <router-link to='/user'>用户页</router-link> 
     
    <!-- 盛放链接对应的内容-->
      <router-view></router-view>
  </div>
   <script src='js/vue.js'></script> 
   <script src='js/vue-router.js'></script>
   <script>
       //2.创建组件
       var Home={
           template:`
             <h1>这是首页</h1>
           `
       }
       
       var User={
           template:`
                <h1>这是用户页</h1>
            `
       }
       
       //3.配置路由
       const  routes=[
           {path:'/home',component:Home},
           {path:'/user',component:User}
       ]
       
       //4.创建路由实例
       const router=new VueRouter({
           routes:routes
       })
       
       //5.路由实例挂载到vue实例上
       new Vue({
           el:'#app',
           router:router
       })
    </script>
</body>
</html>

2.路由的嵌套

①.用这个就是嵌套路由children:[],在分配路由里面添加嵌套路由children:[]
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id='app'>
   <!--1.-->
   <router-link to='/index'>首页</router-link>
   <router-link to='/user'>用户页</router-link>
   <router-view></router-view>
  </div>
   <script src='js/vue.js'></script> 
   <script src='js/vue-router.js'></script>
   <script>
       //2.创建组件
       var  Index={
           template:`
             <h1>这是首页</h1>
           `
       }
       var User={
           template:`
           <div>
             <h1>这是用户页</h1>
             <ul>
               <li>
                  <router-link to='/user/regist'>注册</router-link>
               </li> 
                <li>
                  <router-link to='/user/login'>登录</router-link>
               </li>
            </ul>
            <router-view></router-view>
           </div>
         `
       }
       
       
       var Regist={
           template:`
             <h3>这是注册页</h3>
          `
       }
       
        var Login={
           template:`
             <h3>这是登录页</h3>
          `
       }
       
       //3.配置路由
       const routes=[
           {path:'/',component:Index},
           {path:'/index',component:Index},
           {
               path:'/user',
               component:User,
               children:[
                   {path:'regist',component:Regist},
                   {path:'login',component:Login}
               ]
           }
       ]
       
       //4.创建路由实例
       const router=new VueRouter({
           routes:routes
       })
       
       //5.把路由实例挂载到vue实例上
      new Vue({
          el:'#app',
          router:router//注册路由
      })
  
    </script>
</body>
</html>

3. v-html、 v-text、、 v-once 只绑定一次、 v-pre 原样输出、 v-cloak讲解

v-html:

你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元

v-tex:

作用 : 操作元素中的纯文本
快捷方式 : {{}}

v-tex:解释

这里v-text="",双引号并不是代表字符串,而是vue自定义的划定界限的符号。如果我们里边输出字符串,就要在里边再添加一对单引号。而且经测验,要想输出字符串,必须添加单引号,否则会报错
这里month默认是从0开始的,所以我们要+1
这里{{}}代表的就是"",所以在v-text=""中,我们在内容里边就不需要再写{{}}了,直接写data值就行

v-once:

只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能。
常见用法如下:

当修改input框的值时,使用了v-once指令的p元素不会随之改变,而第二个p元素时可以随之改变的

<div id="app">
        <p v-once>{{msg}}</p>  //msg不会改变
        <p>{{msg}}</p>
        <p>
            <input type="text" v-model = "msg" name="">
        </p>
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el : '#app',
            data : {
                msg : "hello"
            }
        });
    </script>

v-pre :

表示该会跳过该标签及其子元素的编译。

v-cloa:

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,629评论 0 6
  • 实用框架以及工具 UI组件[#UI%E7%BB%84%E4%BB%B6] 开发框架[#%E5%BC%80%E5%8...
    youins阅读 12,814评论 4 133
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,187评论 0 1
  • 早饭后,妈妈正在厨房洗锅,宝宝安静的没有一点声音。等妈妈从厨房出来以后,宝宝已经设计了这么温馨的一个小窝,小花被子...
    剪烛话夜雨阅读 277评论 0 0
  • 休息日,铭帅妈妈早上做好了一锅鸡蛋饼,和铭帅吃了一些,拉着铭帅同学去了托辅班。而铭航同志真给休息日面子,8...
    指挥官阅读 201评论 0 5