zoukankan      html  css  js  c++  java
  • vue的一些概念

      双向数据流:js内存属性发生变化,影响页面的变化;页面的改变影响js内存属性的改变

      v-bind绑定是单向的,页面值得改变不能影响内存中的值。

      给class属性绑定值的几种写法。

    //第一种,注意加单引号
    <div :class="math>=60?'green':'red'"></div>
    
    //第二种,score存在data中,根据不同的值取相应的类名
    <div :class="{'A':'green','B':'red'}[score]"></div>
    
    //第三种,good和momon存在data中,值为false或true
    <div :class="'green':good,'red':momon"></div>

      v-for遍历对象 <li v-for="(value,key,index) in students" :key="index">

                           对象属性键值:{{key}}

                           对象属性值  :{{value}}

                           对象属性次序值:{{index}}

                      </li>

      声明全局过滤,Vue.filter('过滤器名',function(s){return ...});

       路由 

        1.下载,npm i vue-router -S

        2.在mian.js中引入  import VueRouter from 'vue-router'

        3.安装插件   Vue.use(VueRouter);

        4.创建路由对象并配置路由规则

    let router = new VueRouter({
        routes:[
           {path:'/home',component:Home}
        ]
    });

        5.将其路由对象传递给Vue的实例,options中,加入  router:router

        6.在app.vue中留坑。 <router-view></router-view>

        路由的使用

          在main.js中引入路由插件

    import  Vue from 'vue';
    import App from './app.vue';
    import VueRouter from 'vue-router';
    //引入其他模块
    import Home from './home.vue';
    import Movie from './movie.vue';
    import Music from './music.vue';
    import Picture from './picture.vue'
    //安装路由插件
    Vue.use(VueRouter);
    //创建路由对象并配置路由规则
    let router = new VueRouter({
        routes:[
           {path:'/home',component:Home},
           {path:'/music',component:Music},
           {path:'/movie',component:Movie},
            //加name表示起了个别名
           {name:'img',path:'/picture',component:Picture}
        ]
    });
    new Vue({
        el:"#app",
        router:router,
        render:c=>c(App)
    });

      写模块,比如 home.vue

    <template>
       <div>
          <h2>我是主页</h2>
       </div>
    </template>

      在app.vue中使用

    <template>
    <div>
        <div class="header">
            <a href="#/home">主页</a>
            <a href="#/movie">电影</a>
            <a href="#/music">音乐</a>
            <router-link :to="{name:'img'}">图片</router-link>
            <router-link to="/movie">另一种写法</router-link>
        </div>
        <div class="content">
          <!-- 这里留坑,灰常重要,上面切换锚点,在这个坑里显示切换后的新内容 -->
           <router-view></router-view>
        </div>
    </div>
    </template>
    <router-link :to="{name:'img'}">图片</router-link>  这里的img就是上面main。js中那个起了别名的模块。

    路由传递参数
    <template>
    <div>
             <ul>
                <li v-for="(m,i) in musics" :key="i">
                   {{m.name}}
                   <router-link :to="{name:'musicDetail',query:{id:m.id,name:m.name}}">查看</router-link>
                </li>
             </ul>
    </div>
    </template>
    <script>
       export default{
           data(){
              return {
                 musics:[
                   {name:"一生所爱",id:1001},
                   {name:"天空之城",id:1101},
                   {name:"一眼万年",id:1002},
                   {name:"卖报歌",id:1201}
                 ],
              }
           }
       }
    </script>
    
    

        路由接收参数

    <template>
    <div>
        {{getData}}
    
    </div>
    </template>
    
    <script>
        export default{
           data(){
             return{
                getData:{},
             }
           },
           created(){
                  this.getData = this.$route.query;
           }
        }
    </script>
     <router-link :to="{name:'musicDetail',query:{id:m.id,name:m.name}}">查看</router-link>
    当点击查看时,路由到musicDetail?id=***&name=***

    还有另外一种方式,
    <router-link :to="{name:'musicDetail',params:{id:m.id,name:m.name}}">查看</router-link>,
    在created方法中 this.getData = this.$route.params;这种写法不会自动在地址栏中拼接传递的参数,需要在mainz.js中路由对象上在做些配置

             {name:'musicDetail',path:'/musicDetail/:id/:name',component:MusicDetail},告知相应参数该出现的位置,路由为musicDetail/id值/name值

      编程导航,点击按钮跳转页面

    methods:{
             music(){
                    this.$router.push({name:'musicDetail',params:{name:"we",id:1301}});
             }
    }

      this.$router.push(name:'组件别名',params:{这里是要传递过去的数据});

      this.$router.go(-1); -1后退一个页面,1是前进一个页面。

      根据锚点跳转页面的原理,是利用给window添加hashchange事件来检测地址栏的描点变化,以做出相应的反应。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
        window.addEventListener('hashchange',function(){
            var text = "";
            switch(location.hash){
                case('#/a'):
                  text = 'aa';
                  break;
                case('#/b'):
                  text = "bbb";
                  break;
            }
            document.getElementById('app').innerHTML = text;
        });
    
    </script>
    </html>


  • 相关阅读:
    LeetCode 345. Reverse Vowels of a String 题解
    LeetCode 344. Reverse String 题解
    LeetCode 27. Remove Element 题解
    LeetCode 61. Rotate List 题解
    LeetCode 19.Remove Nth Node From End of List 题解
    Android耗电量
    Android 使用adb查看和修改电池信息
    Android AOP AspectJ 插桩
    Flask相关用法
    Monkey日志信息的11种Event percentage
  • 原文地址:https://www.cnblogs.com/sujianfeng/p/8805954.html
Copyright © 2011-2022 走看看