Vue指令的应用

1、总结常用指令及特点

1.1 v-html v-text

1.2 v-bind

1.3 v-if v-show

1.4 v-on

1.5 v-model

1.6 v-for

1.6.1 key值 （以后在脚手架环境再讲）

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

1.6.1 数组更新检测

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。

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

也可以采用以下方法实现数组更新检测 （vm是vue的实例）

• Vue.set(数组,索引,新值)
• vm.$set(数组,索引,新值)

1.6.2 对象更新检测

• Vue.set(对象,属性名,新值)
• vm.$set(对象,属性名,新值)

2、案例：Tab切换代码实现

css样式

<style>
* {
  margin: 0;
  padding: 0;
}
ul,li {
  list-style: none;
}
.tab {
  width: 400px;
  border: 1px solid #000;
}
.tab ul {
  display: flex;
}
.tab li {
  width: 100px;
  height: 30px;
  background: #f00;
  border: 1px solid #000;
}
.tab .tabcont div {
  width: 100%;
  height: 200px;
  border: 1px solid #00f;
}
.tab .active {
  background-color: yellow;
}
</style>

html 模板

<div id="app">
  <div class="tab">
    <ul>
      <li 
          v-for="(item,index) of list"
          :class="isActive(index)"
          @click="toggle(index)" 
          >
        {{item}}
      </li>
    </ul>
    <div class="tabcont">
      <div v-for="(item,index) of list" v-show="isShow(index)">{{item}}内容</div>
    </div>
  </div>
</div>

js代码

<script src="vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      list:['体育','军事','教育'],
      cur: 0
    },
    methods:{
      isActive(index){
        return index==this.cur?'active':''
      },
      isShow(index){
        return index==this.cur?true:false
      },
      toggle(index){
        this.cur = index;
      }
    }
  });

</script>

3、案例： TodoList

3.1 线上案例参考

http://www.todolist.cn/

3.2 案例需求分析

• 用户输入待办事项，回车后添加进”正在进行“，并清空文本框
• 在”正在进行"列表项单击，添加进“已经完成”列表
• 在”已经完成"列表项单击，添加进“正在进行”列表
• 在相应列表项中单击“删除”，删除该项目

3.3 TodoList代码实现

html模板

<div id="app">
    <!-- 输入框 -->
    <h1>ToDoList <input type="text" v-model="thing" @keyup.enter="addNew"></h1>

    <!-- 待办列表 -->
    <h2>正在完成 ---{{pending.length}}</h2>
    <ul>
        <li v-for="(item,index) in pending">
            <button @click="addResolve(index)">添加到已完成</button>
            <span>{{item}}</span>
            <button @click="delPendding(index)">删除</button>
        </li>
    </ul>

    <!-- 已完成列表 -->
    <h2>已经完成---{{resolve.length}}</h2>
    <ul>
        <li v-for="(item,index) in resolve">
            <button @click="addPending(index)">添加到未完成</button>
            <span>{{item}}</span>
            <button @click="delResolve(index)">删除</button>
        </li>
    </ul>
</div>

js代码

<script src="vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //挂载点
        data: {
            thing: '',
            pending: [],
            resolve: []
        },
        methods: {
            // 添加待办事项
            addNew() {
                this.pending.push(this.thing);
                this.thing = ''
            },
            // 单击正在完成项目，切换到已经完成
            addResolve(index) {
                this.resolve.push(this.pending[index]);
                this.pending.splice(index, 1);
            },
            // 单击已经完成项目，切换到正在完成
            addPending(index) {
                this.pending.push(this.resolve[index]);
                this.resolve.splice(index, 1);
            },
            //删除正在完成项目
            delPending(index) {
                this.pending.splice(index, 1);
            },
            // 删除已经完成项目 
            delResolve(index) {
                this.resolve.splice(index, 1);
            }
        }
    });
</script>