Vue.js视频学习收获(一)

组件化

<template> <script>   <style>
  页面     动态效果    样式


index.html  main.js  app.vue


new Vue({
  el : '#app',  //渲染内容的目的地
  //渲染内容
  render: function(c){ c只是个形参，叫什么都可以
      return c(App);
  }
})


<pre>  原样输出里面的内容
<v-text>  <v-html>  <v-model>  <v-if> <v-show>

package.json    webpack.config.js

<div v-show="isShow" style="height:100px;background-color:green;">
</div>

<div class="isRed? 'red':'green'">1111</div>

export default{
   data(){
     return{
       isRed:true
     }
  }
}

.red{
  background-color:red;
.green{
  background-color:green;
}

class结合v-bind使用
需要根据可变的表达式的就结果来给class赋值，就需要遇到v-bind:class=”xxx”
v-bind:属性名=”表达式”
简化的写法： :属性名=”表达式”

class：结果的分类
一个样式：返回字符串，三元表达式和key和样式的对象清单
多个样式：返回对象(样式做key，true或false的值)

<div v-bind:class="isRed? 'red':'green'">1111</div>

<div v-bind:class="{'red':true,'big':true}"></div>


export default{
  data(){
     return {
       isRed:false,
       stus:[{name:'jack',score:'A'},{name:'rose',score:'B'}]
    }
  }
}

复杂情况：通过遍历，根据当前对象的成绩，匹配成绩和样式的清单对象，用成绩做key，取对象的value，最终返回字符串做样式名

<ul>
  <li v-for="stu in stus" :class="{'A':'red','B':'green'}[stu.score]">
         {{stu.name}}
  </li>
</ul>