vue笔记

v-text 会直接把标签当成文本输出
v-html 会把标签当成标签
v-if 判断是否加载，直接不渲染，可以减轻服务器的压力，在需要时加载
v-show 调整css dispaly属性，可以使客户端操作更加流畅
v-bind 用于设置HTML属性，v-bind:href 缩写为 :href；《a :href=”{{url}}”》xx《/a》
v-on 用于绑定HTML事件，v-on:click 缩写为 @click；《a @click=”get()”》xx《/a》
最好不要用@，因为asp.net mvc页面识别@不太好；《a v-on:click=”get()”》xx《/a》

---

data:存储数据
methods:设置方法，可以立刻改变vue（上面的）数据
watch:监听，可设置监听任何对象方法

---

问题：父组件传值给子组件，父组件值改变，子组件不能重新渲染
问题： Vue父组件向子组件传递一个动态的值，子组件只能获取初始值，不能实时更新
解决方法：

https://www.jb51.net/article/117447.htm

1.在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法（推荐此方法）

props: {
    titleText: {
      type: String,
      default: '' //字符
    },
    echartStyle: {
    type: Object,
    default() {
      return {} //对象
    }},
    opinion: {
      type: Array,
      default() {
        return [] //数组
      }
    }
}

//watch进行监听
watch:{
  titleText:function(newValue,oldValue){
    this.getChange(); //可以结合methods里的方法做处理
    //也可以利用计算属性computed做中间层
    //created只会执行一次，但是又想监听改变的值做其他事情的话，只能搬到这里咯
  },
  echartStyle:{
    handler(newValue,oldValue){
       this.getChange();
    },
    deep:true //深度监听
  },
  opinion:{
    handler(newValue,oldValue){
      this.getChange();
    },
    deep:true
  }
},

2.使用v-if可以解决报错问题，和created为空问题（不推荐）

父组件
<child v-if="flag" :child-object="asyncObject"></child>

动态背景图片

<el-carousel-item v-for="(item, key) in mobilebanner" :key="key"
:style="{backgroundImage: 'url(' + item.src + ')'}"></el-carousel-item>
// 数据
data () {
    return {
      mobilebanner: [{src: require('@assets/image/mobile_banner.jpg')}, {src: require('@assets/image/mobile_banner.jpg')}]
    }
  },