Vue快速入门（二）

作者: 阿九是只大胖喵 | 来源:发表于2017-12-21 13:58 被阅读0次

Vue快速入门（二）
HTML学习之Vue.js
Vue快速入门(二)《快乐Vue》
01Vue基本使用与模板语法
Vue基础知识总结
vue入门教程
Vue 快速入门
Vue快速入门
vue快速入门
快速入门Vue

双向数据绑定
双向数据绑定一般发生在input、select、textarea这些表单元素中，当接收到输入值后，其他地方可以直接实时的显示输出值。可以使用v-model指令实现双向绑定。

<body>
  <div id="app">
    <h1>双向数据绑定 / input / select / textarea</h1>
    <label for="">姓名：</label>
    <input type="text" v-model="name">
    <p>{{ name }}</p>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      name: ''
    }
  })
</script>

这样，当在input中输入内容后，p标签中的name会实时显示。

计算属性computed
计算属性有缓存机制，更加优化。
而函数则每次调用都会执行。

<body>
  <div id="app">
    <h1>computed 计算属性</h1>
    <button @click="a++">add to A</button>
    <button @click="b++">add to B</button>
    <p>A - {{ a }}</p>
    <p>B - {{ b }}</p>
    <p>Age + A = {{ addToA }}</p>
    <p>Age + B = {{ addToB }}</p>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      a: 0,
      b: 0,
      age: 20
    },
    methods: {
      // addToA() {
      //   return this.a + this.age
      // },
      // addToB() {
      //   return this.b + this.age
      // }
    },
    computed: {
      addToA() {
        return this.a + this.age
      },
      addToB() {
        return this.b + this.age
      }
    }
  })
</script>

动态绑定CSS样式
Vue使用v-bind:class或者:class来动态绑定样式。

<body>
  <div id="app">
    <h1>动态CSS class</h1>
    <h2></h2>示例1</h2>
    <div @click="changeColor = !changeColor" :class="{changeColor: changeColor}">
      <span>Henry</span>
    </div>

    <h2>示例2</h2>
    <div :class="compClasses">
      <span>Henry</span>
    </div>

  </div>
</body>
<script src="./vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      changeColor: true,
      changeLength: true
    },
    computed: {
      compClasses() {
        return {
          changeColor: this.changeColor
        }
      }
    }
  })
</script>

条件渲染：v-if, v-show

<body>
  <div id="app">
    <h1>v-if指令</h1>
    <button @click="error = !error">Toggle Error</button>
    <button @click="success = !success">Toggle Success</button>

    <p v-if="error" class="error">网络连接错误：404</p>
    <p v-else-if="success" class="success">网络连接成功</p>

    <p v-show="error" class="error">网络连接错误：404</p>
    <p v-show="success" class="success">网络连接成功</p>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      error: false,
      success: false
    }
  })
</script>

v-for

<body>
  <div id="app">
    <h1>v-for指令</h1>
    <ul>
      <li v-for="character in characters">{{ character }}</li>
    </ul>
    <hr>
    <ul>
      <li v-for="(user,index) in users">
        {{ index }} - {{ user.name }}, {{ user.age }}
      </li>
    </ul>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      characters: ['Mario', 'Luffy', 'Goffy'],
      users: [
        {
          name: 'Henry',
          age: 30
        },
        {
          name: 'Bucky',
          age: 25
        },
        {
          name: 'Emily',
          age: 18
        }
      ]
    }
  })
</script>

github-fundamental源码

github-demo源码