Vue-基础入门(上)--Part.2(5-7)

2-5 样式绑定语法

先看下面的代码(部分代码已省略)：

<style>
  .blue {
    color: blue
  }
  .red {
    color: red;
  }
</style>
<script>
  const app = Vue.createApp({
    data () {
      return {
         color: 'red'
      }
    },
    methods: {
      
    },
    template: `
      <div :class="color">
        hello Y
      </div>
    `
  })
  const vm = app.mount('#root');
</script>

这个div上的class属性是动态绑定到color，当我们在控制台把color改为 blue，内容颜色也会变成blue

这里class能绑定的数据有很多种

 classObjec: {red: false, green: true},
 classAray: ['red', 'green', {brown: false}],
 styleObject: {
   color: 'orange',
   background: 'black'
 }

这些都是能绑定的，然后也可以绑定到子组件上面，看下面的代码：

<script>
  const app = Vue.createApp({
    data () {
      return {
         color: 'red',
         classObjec: {red: false, green: true},
         classAray: ['red', 'green', {brown: false}],
         styleObject: {
           color: 'orange',
           background: 'black'
         }
      }
    },
    methods: {
      
    },
    template: `
      <div :class="color">
        hello Y
      </div>
      <demo :style="styleObject" />
    `
  })
  
  app.component('demo', {
    template: `
    <div>see u</div>
    `
  })
  const vm = app.mount('#root');
</script>

这样写就是ok的，但是我们把子组件的最外层标签写两个

app.component('demo', {
  template: `
  <div>see u</div>
  <div>see u</div>
  `
})

这样，子组件展示出来的内容是没有样式的 ？。？

因为调用子组件的时候，最外层有两个标签，所以这个 style属性是挂载到哪个标签上，还是两个都挂载呢？不知道捏

我们可以在子组件上这样写<div :style="$attrs.style">see u</div>样式就生效了

它的意思就是，子组件这个div上style绑定的是父组件上的属性上的style的值(这个其实了解一下就行惹)

vue里写行内样式就跟html一样的

<div style="color: pink">
  hello Y
</div>

这样写就行 >w<

2-6 条件渲染

有两种：v-if和v-show，两者的区别：

<div v-if="show">hello Y</div>
<div v-show="show">hello Y</div>

当show都为true的时候

这样看两个是没区别的，但是当我们把show设置为false

这里就能发现，v-if是直接将这个标签去除掉，而v-show是设置style样式display:none

然后就是v-if可以和v-elseif、v-else连用

<div v-if="condition1">if</div>
<div v-else-if="condition2">else-if</div>
<div v-else>else</div>

注意这三个标签要连在一起写，中间不能插入其他的标签

2-7 列表循环渲染

先看第一段代码

<script>
  const app = Vue.createApp({
    data () {
      return {
         listArray: ['one', 'two', 'three', 'four'],
         listObject: {
           first: 'one',
           second: 'two',
           third: 'three',
           fourth: 'four'
         }
      }
    },
    template: `
      <div v-for="(item, index) in listArray">
        {{item}} -- {{index}}
      </div>
    `
  })
  const vm = app.mount('#root');
</script

这个v-for里有两个参数，第一个item也就是数组里的数据项，第二个index就是每个数据项的下标

v-for不仅可以循环展示数组里面的内容，还可以循环展示对象里的数据

<div v-for="(value, key, index) in listObject">
  {{value}} --  {{key}} -- {{index}}
</div>

第一个value就是对象里数据的值，key则是数据的"名称"，index就是下标

我们再添加一个功能

methods: {
  handleButtonClick() {
    this.listArray.push('click')
  }
},
template: `
  <div v-for="(item, index) in listArray">
    {{item}} -- {{index}}
  </div>
  <button @click="handleButtonClick">click</button>
`

这里也就是说，点击一下按钮，listArray就新增一个数据项，但是我们会发现，我们点击增加之后，整个页面都会重新渲染，这是比较消耗性能的，我们想要的效果是，前面的内容不重新渲染，新增的变化的内容更新，我们需要在div标签上绑定一个key，这个key得是一个独一无二的变量^ ^

<div v-for="(item, index) in listArray" :key="index">
  {{item}} -- {{index}}
</div>

至于原因涉及vue的底层原理，后面再细讲

点击在对象里添加数据项this.listObject.fifth = 'four'

最后再说一下v-if和v-for连用的情况

template: `
  <div 
    v-for="(item, index) in listArray" 
    :key="index"
    v-if="item !== 'two'"
  >
    {{item}} -- {{index}}
  </div>
  <button @click="handleButtonClick">click</button>
`

这时候发现，页面上还是都渲染了

因为，** v-for的优先级高于v-if **

那如果就是不想显示two要怎么做？

template: `
  <div 
    v-for="(item, index) in listArray" 
    :key="index"
  >
    <div v-if="item !== 'two'">
      {{item}} -- {{index}}
    </div> 
  </div>
  <button @click="handleButtonClick">click</button>
`

这样写表面上是没问题的，然后我们看看 html 结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-inLCsRB8-1640165330485)(/C:/Users/hp/AppData/Roaming/Typora/typora-user-images/image-20211105001157600.png)]

每个div标签外面又包裹了一个div标签，这样写真的很多余！！！

所以又有一个新的“标签”(不知道这样说对不对)template(占位符)

template: `
  <template 
    v-for="(item, index) in listArray" 
    :key="index"
  >
    <div v-if="item !== 'two'">
      {{item}} -- {{index}}
    </div> 
  </template>
  <button @click="handleButtonClick">click</button>
`

这样，html结构就好看多惹 ovo