VUE中过了一遍还不熟悉的东西

1.computed/watch/和methods

computed是依赖于数据来变动的，有缓存，当不需要缓存的时候就用方法，watch不建议乱用，当有异步请求的时候就用watch

写法一样

2.watch

3.slot

4.添加属性

5.过滤器

<template>  <div class="hello">    <hr>    <p style="color: red;font-size: 23px">计算属性，过滤器</p>    <p v-for="item in money">      <span>{{item.money|dollor(item.money)}}</span>    </p>    <p>      <span>计算属性反转--》</span>      <span>{{bb}}</span>      <br>      <span>这个是直接在魔板里面--》魔板里面最好不要这样写因为魔板里面尽可能的简单所以呢最好用计算属性或者方法</span>      <span>{{msg.split('').reverse().join('')}}</span>    </p>    <p>方法反转: "{{ reversedMessage() }}"</p>    <hr>    <p style="color: red;font-size: 23px">keep-alive内置组件，比如一个列表打开详情，返回列表，不可能每次都去请求吧，这个组件相当于做了缓存，列表打开详情就用这个</p>    <p style="color: red;font-size: 23px">面试题why data必须是一个函数（官网有，return是一个对象，避免冲突，避免点击这个那个绑定的数据也跟着变化）</p>

    <hr>    <p>关于slot  内容分发，我的 理解就是匿名插槽你没传递东西给这个组件的话 它默认就会展示slot里面的内容，如果你传了就会覆盖这个内容，实名插槽的话，你传递的是哪个name它就显示哪个</p>

    <hr>    <p>设置属性,看代码</p>    <a @click="chose(value)" href="#" :checked="ischecked" style="width: 5px;height: 5px;border: 1px solid red;display: block"></a>  </div></template>

<script>export default {  name: 'HelloWorld',  data () {    return {      msg: '我是反转字符串',      money:[        {          name:'11',          money:100        },        {          name:'112',          money:678        }

      ],      ischecked:false    }  },//  过滤器，相当于一个钩子函数写法和methods:{}这种写法而不是函数  filters:{//      格式化人民币      dollor(money){//          这个是小数点后几位你自己定义        return '$'+money.toFixed(5)    }  },//  计算属性的东西,如果你不希望有缓存，请用方法来替代。//  对于任何复杂逻辑，你都应当使用计算属性。而不是在里面直接写、模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。 {{ message.split('').reverse().join('') }}这么写就违背了初衷  computed:{    // 计算属性的 getter      bb(){        return this.msg.split('').reverse().join('')      }  },  methods: {    reversedMessage() {      return this.msg.split('').reverse().join('')    },    chose(value){//        vue中设置属性      if(typeof value.checked==='undefiend'){//        如果没有这个属性就设置这个属性        this.$set(value,'checked',this.ischecked=true)      }else {          this.ischecked=!this.ischecked      }    }  }}</script>

<!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 {  font-weight: normal;}ul {  list-style-type: none;  padding: 0;}li {  display: inline-block;  margin: 0 10px;}a {  color: #42b983;}</style>