Vue知识点合集

内容有点乱，想到一点写一点吧

Vue的过滤器：

分为组件内部和全局过滤器，如果重名了局部优先

export default {
  filters:{
    reverse:function(val){
      return val.split("").reverse().join("");
    }
  }
}
这个是局部过滤器写法

Vue.filter("reverse",function(val){
  return val.split("").reverse().join("");
});
这个是全局过滤器写法

使用都一样，在template中用{{text | reverse }}
或者在属性里例如：
<a href='#' :title='text | reverse'>测试</a>

Vue中如何获取dom元素

<p ref='text'>{{text}}</p>

在script中使用this.$refs.text 拿到该dom对象
mounted(){
    console.log(this.$refs.text); 
  },

如果是组件的话，如下：
//template
<child ref='childs'></child>

//script
import Child from './Child.vue';
export default {
  data () {
    return {
      text:''
    }
  },
  mounted(){
    console.log(this.$refs.childs.$el);     //拿到组件实例
  },
  components:{
    Child
  }
}

Vue的路由配置

import Vue from 'vue'
import Router from 'vue-router'

import Item1 from '@/components/item1'
import Item2 from '@/components/item2'
import Item3 from '@/components/item3'
import Default from '@/components/default'
import Errors from '@/components/error'
//子路由
import Login from '@/components/login'
import Regerster from '@/components/regerster'

Vue.use(Router)

export default new Router({
  routes: [
      {
        path: '/item1',
        name: 'item1',
        component: Item1,
        children:[        //子路由
          {
            path:'/login',
            name:'login',
            component:Login
          },{
            path:'/regerster',
            name:'regerster',
            component:Regerster
          }
        ]
      }
   ,{
      path: '/item2',
      name:'item2',
      component: Item2
    },{
      path: '/item3',
      name:'item3',
      component: Item3
    },{
      path: '/',
      component: Default
    },{
      path: '/error',
      component: Errors
    },{
      path: '**',   // 错误路由
      redirect: '/error'   //重定向
    }
  ]
})

Vue路由的跳转和传参的几种方式：

第一种：
需要配置一下item2的路由：
    {
      path: '/item2/:id',    //加上：key值
      name:'item2',
      component: Item2
    }
<router-link to="/item2/222">新闻</router-link>


其他方法都是不需要配置路由的：

<a href="#/item1?id=121212&age=333">ITem1</a>
a标签跳转，参数拼接在url后面即可；

 {
      path: '/item2',    //不要加上：key值
      name:'item2',
      component: Item2
    }
第二种：
<router-link :to="{name:'item2',params:{id:111}}">新闻</router-link>    //注意：需要加上冒号

第三种：
<router-link :to="{name:'item1',query:{id:111}}">点击跳转到B页面</router-link>  

注意：

带查询参数query，可与name和path一起使用，地址栏会变成'/url?查询参数名：查询参数值'，相当于get请求;
带查询参数params，不能与path一起使用，只能与name使用，地址栏不会显示查询字符串：'/url'，相当于post请求;

还有js跳转：
<button @click='go_peng()'>朋友圈</button>
js：
 methods:{
    go_peng(){
      this.$router.push("/item2");        //直接跳转，不带参数
    }
  }
用query传参：
this.$router.push({path:'/item2',query:{id:'123'}});
用params传参：
this.$router.push({name:'item2',params:{id:'123'}});   
注意：query要用name或者path来引入，params要用name来引入
注意：query要用name或者path来引入，params要用name来引入
注意：query要用name或者path来引入，params要用name来引入


在item2的页面里，//跟据你传的方法对应用什么api拿到数据
created(){
         console.log(this.$route.params.id);        //跟据你传的方法对应用什么api拿到数据
         console.log(this.$route.query.id);
      }

在页面中：
{{$route.params.id}}
{{$route.query.id}}

总结：
路由跳转如果需要在url上显示查询字符串，就用
<router-link :to="{name:'item1',query:{id:111}}">点击跳转到B页面</router-link>  
this.$router.push({name:'item2',query:{id:'123'}});
路由跳转如果不需要在url上显示查询字符串，就用
<router-link :to="{name:'item1',params:{id:111}}">点击跳转到B页面</router-link>  
this.$router.push({name:'item2',params:{id:'123'}});
//不需要添加路由参数

Vue 里的watch：

当data里的值发生改变时会调用一次监听器里的方法，单一次只能监听个属性；

js:
data: function() {
    return {
      price: 0,
      count: 0,
      list: {                    // 这是对象类型
        name: "dingding",
        age: 24
      }
    };
  },
  watch: {
    price: function(news, old) {
      console.log(news, old);
    },
    count: function(news, old) {
      console.log(news, old);
    },
    list: {                                        //引用类型属性需要深度监听
      handler: function(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      deep: true
    }
  },
  methods: {
    send() {
      this.list.name = "dangdang";
    }
  },


template:
<button @click="send">发送</button>
    金额：
    <input type="text" name v-model="price">
    数量：
    <input type="text" name v-model="count">
    总计:{{price*count}}元

Vue里的computed:

每次值发生变化时，会执行该方法，可以监听多个属性值

js: 
computed:{
    total_count(){
      console.log("计算属性发生变化");
      return this.price * this.count +'元';
    }
  },
  

template:
总计:{{total_count}}