Vue 内置指令

<template>
  <div>
    <button @click="changeMsg">更改消息</button>
    <div v-cloak>
      {{message}}
    </div>

    <!--
       v-once也是一个不需要表达式的指令，作用是定义它的元素或者组件只渲染一次，包括元素或者组件
       的所有节点。首次渲染后，不会再随数据变化重新渲染，将被视为静态内容。
     -->
    <div v-once>
      {{message}}
    </div>

    <!-- 条件渲染指令 -->
    <div>
      <p v-if="status == 1">
        status = 1, 该数据已被删除
      </p>
      <p v-else-if="status == 2">
        status = 2, 该数据已被禁用
      </p>
      <p v-else>
        status = 0, 正常状态数据
      </p>
    </div>

    <!--
       切换时输入框的内容并没有被改变，说明<input>元素被复用了，如果不希望如此，可以使用Vue.js
       提供的key属性，
     -->
    <div>
      <template v-if="type === 'name'">
        <label>用户名:</label>
        <input placeholder="请输入用户名" key="name-input"/>
      </template>
      <template v-else>
        <label>邮箱:</label>
        <input placeholder="请输入邮箱" key="email-input"/>
      </template>
      <button @click="handleToggleClick">切换输入类型</button>
    </div>

    <!--
         v-show只是简单的CSS属性切换，无论条件真与否，都会被编译。相比之下, v-if更适合条件不经常改变
     的场景，因为它切换开销相对较大, v-show适合频繁切换条件
    -->
    <div v-show="status === 1" id="show">
      当状态为1时显示, 与v-if用户基本一致, 不过v-show改变的是元素的CSS属性display
    </div>

    <!-- 列表渲染指令 v-for -->
    <ul>
      <li v-for="(book, index) in books">
        {{index}} - {{book.name}}
      </li>
    </ul>

    <ul>
      <template v-for="(book, index) in books">
        <li>书名: {{book.name}}</li>
        <li>作者: {{book.author}}</li>
      </template>
    </ul>

    <!-- v-for还可以迭代对象属性 -->
    <ul>
      <li v-for="(value, key, index) in user">
        {{index}} - {{key}} - {{value}}
      </li>
    </ul>

    <!-- v-for 迭代整数 -->
    <span v-for="n in 10">{{ n }}</span>

    <!--
      数组更新
      Vue.js的核心是数据与视图的双向绑定，当我们修改数组时，Vue会检测到数据变化，所以v-for视图也会立即更新
      Vue包含一组观察数组变异的方法，使得它们改变数组会触发视图的更新

      push()
      pop()
      shift()
      unshift()
      splice()
      sort()
      reverse()

      有些方法不会改变原来数组：
      filter()
      concat()
      slice()
     -->

    <button @click="addBook">增加一本书</button>

    <button @click="search">搜索一本书</button>

    <!-- 排序 -->
    <ul>
      <template v-for="book in filterBooks">
        <li>书名: {{book.name}}</li>
      </template>
    </ul>

  </div>
</template>

<script>
  export default {
    name: "for",
    data() {
      return {
        message: "这是一段文本",
        status: 1,
        type: 'name',
        books: [{
          name: 'Vue.js',
          author: 'song'
        }, {
          name: 'React.js',
          author: 'SpringBoot'
        }, {
          name: 'Java',
          author: 'apache'
        }],
        user: {
          age: 20,
          name: 'song',
          address: '上海'
        }
      }
    },
    methods: {
      changeMsg: function () {
        this.message = "Hello"
      },
      handleToggleClick: function () {
        this.type = this.type === 'name' ? 'mail' : 'name';
      },
      // 新增
      addBook: function () {
        this.books.push({name: 'Node.js开发', author: 'node'});
      },
      search: function () {
        // 过滤
        this.books = this.books.filter(function (item) {
          return item.name.match(/React/);
        })
      }
    },
    computed: {
      filterBooks: function() {
        return this.books.sort(function (a, b) {
          return a.name.length < b.name.length;
        })
      }
    }
  }
</script>

<style scoped>
  #show {
    margin-top: 10px;
  }

  ul {
    width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
  }
</style>

<template>
  <div>
    <!-- 方法与事件 -->
    点击次数: {{count}}
    <button @click="count++">点击次数+1</button>
    <button @click="addCount(10)">点击次数+10</button>

    <!-- 事件 -->
    <div>
       <a href="http://www.baidu.com" @click="handleClick('禁止打开', $event)">打开链接</a>
    </div>

    <!-- 修饰符  -->
    <!-- 阻止冒泡事件 -->
    <div class="a_list">
      <a @click.stop="handle">阻止冒泡事件</a>
      <a @click.once="handle">只触发一次</a>
    </div>

    <!-- 键盘监听事件-->
    <input @keyup.13="submit"/>

    <div @click.ctrl="doSomething">Do something</div>
  </div>
</template>

<script>
  export default {
    name: "for",
    data() {
      return {
        count: 0
      }
    },
    methods: {
      addCount: function (count = 1) {
        this.count += count;
      },
      handleClick: function(message, event) {
          event.preventDefault();
          window.alert(message);
      },
      handle: function() {
        window.alert(1);
      },
      doSomething: function () {
        console.log(1)
      }
    },
    computed: {}
  }
</script>

<style scoped>
    .a_list {
       margin: 10px 0 10px;
    }
    .a_list a {
      position: relative;
      padding: 5px;
      border: 2px solid #902011;
    }
</style>