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>


  • 相关阅读:
    HDU 2066 一个人的旅行 最短路问题
    HDU 2112 HDU Today 最短路
    HDU 2521 反素数 模拟题
    mac 安装 office
    selenium用法 (python)
    selenium遇到不可编辑input和隐藏input如何赋值
    mac 下bash命令
    ssh 自动登录
    linux常用命令
    json字符串调整
  • 原文地址:https://www.cnblogs.com/sujianfeng/p/8805954.html
Copyright © 2011-2022 走看看