Vue.js学习笔记 一 : v-bind

好吧, 开始搞vue.js了,
主要是用于自己做个整理.
看了下很像angular.js很久之前用过, 不过现在忘得差不多了, 原理都差不多,应该学起来也挺快.
似乎得好好梳理后才能写, 先做成笔记吧

1: 声明式渲染

// html
    <div id="app">
        {{message}}
    </div>  

// js
    var myapp = new Vue({
      el: "#app",
      data: {
        message: "这个是声明是渲染"
      }
  })

可以看到双花括号{{}}中的值可以去js中对应el: id名字正确的构造函数中的data对象中找对应的键值, 并显示在页面上

2: 指令: v-bind:属性(class, style value, src....) / prop()

//html
    <div class="item">
      <p>v-bind="绑定的变量" 指令</p>
      <div id="app2">
        <span v-bind:title="message">
          这个也是声明是渲染, 只不过使用了V-bind指令绑定了spand的title属性,
        </span>
      </div>
    </div>

//js

    let app2 = new Vue({
      el: '#app2',
      data: {
        message: 'test' 
      }
  })

• 用于给一个标签动态添加某个属性,
• 简写, 绑定class可见写为 :class="lala"
• 还有多种组合方法:
  • v-bind:class="imageA"
  • :class="{ red: isRed }" (js中isRed 为true,或者false)
  • :class="[classA, classB]" (js中classA, classB为键名对应的值是类名)
  • :class="[classA, { classB: isB, classC: isC }] (上面两种的结合)
  • class="static" v-bind:class="{ active: true }"(与已有class共存, <div class="static active"></div>)
  • v-bind="{ id: someProp, 'other-attr': otherProp }"(属性的集合)
  • :style="{ fontSize: size + 'px' }" (css样式要驼峰命名, size是变量)
  • :style="[styleObjectA, styleObjectB]" (styleObjectA 和 styleObjectB是对象中的键名)
  • (还有其他的, 之后再添加上)