vue学习day2

vue学习day2

案例3：品牌管理

添加品牌

• html部分

<div class="panel-body form-inline">
		<!-- form-inline属性让该元素的子元素都会在一行中显示 -->
        <label>Id:<input type="text" class="form-control" v-model="id"></label>

        <label>Name:<input type="text" class="form-control" v-model="name"></label>
        
        <input type="button" value="添加" class="btn btn-primary" @click="add()">

</div>

• methods中add()的部分

add() { // 添加的方法
          // 分析：
          // 1. 获取到 id 和 name ,直接从 data 上面获取 
          // 2. 组织出一个对象
          // 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中
          // 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；
          var car = { id: this.id, name: this.name, ctime: new Date() }
          this.list.push(car)
          this.id = this.name = ''
        }

删除品牌

• html部分

<a href="" @click.prevent="del(item.id)">删除</a>

• methods中del()的部分

 del(id) { // 根据Id删除数据
          // 分析：
          // 1. 如何根据Id，找到要删除这一项的索引
          // 2. 如果找到索引了，直接调用 数组的 splice 方法

          /* this.list.some((item, i) => {
            if (item.id == id) {
              this.list.splice(i, 1)
			  //splice:删除从i开始第1个对象
              // 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环
              return true;
            }
          }) */


          var index = this.list.findIndex(item => {
            if (item.id == id) {
              return true;
            }
          })

          // console.log(index)
          this.list.splice(index, 1)
        }

• some方法和fiNdIndex方法：some方法中可以做任何操作，findIndex更注重于查询索引

查询品牌

在使用 v-for 指令循环每一行数据的时候，不再直接 item in list，而是 in 一个 过滤的methods 方法，同时，把过滤条件searchName传递进去：

• html部分

<label>
          搜索名称关键字：
          <input type="text" class="form-control" v-model="keywords">
        </label>
//table部分
<tr v-for="item in search(keywords)" :key="item.id">
	····
</tr>

• methods中search(keywords)部分

search(keywords) { // 根据关键字，进行数据的搜索
          /* var newList = []
          this.list.forEach(item => {
            if (item.name.indexOf(keywords) != -1) {
              newList.push(item)
            }
          })
          return newList */

          // 注意：  forEach   some   filter   findIndex   这些都属于数组的新方法，
          //  都会对数组中的每一项，进行遍历，执行相关的操作；
          return this.list.filter(item => {
            // if(item.name.indexOf(keywords) != -1)

            // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')
            //  如果包含，则返回 true ，否则返回 false
            if (item.name.includes(keywords)) {
              return item
            }
          })
        }

search过滤方法中，使用 数组的filter` 方法进行过滤：

search(name) {
  return this.list.filter(x => {
    return x.name.indexOf(name) != -1;
  });
}

• 这里又提供了两种数组的新方法:forEach和filter，forEach对整个list进行遍历，filter则更多用于过滤/筛选这些功能上(上述格式)

Vue调试工具vue-devtools的安装步骤和使用

Vue.js devtools - 翻墙安装方式 - 推荐

过滤器的基本使用方法

<div id="app">
    <p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
  </div>

 // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function (msg, arg, arg2) {
      // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
      return msg.replace(/单纯/g, arg + arg2)
    })

    Vue.filter('test', function (msg) {
      return msg + '========'
    })

• 可同时使用多个过滤器，按顺序依次进行直至结束

今日作业

1. indexOf和includes的差别

   indexOf返回为数值型
   includes返回为布尔型
   如:

   	int arr=[123];
   	if(arr.indexOf(1)!=-1)
   	{
   		alert('存在数字1');
   	}
   	if(arr.includes(1))
   	{
   		alert('存在数字1');
   	}
   

   一般indexOf多用于查找某元素在数组的位置，而includes多用于判断是否存在该元素、

2. 谈谈你对v-on的理解

   v-on用于绑定html事件，可简写为@，并且可以加事件修饰符/按键修饰符
   他的优点在于无需手动绑定js事件，可以与DOM完全分开，易于理解和维护

3. @click="del(index)"和@click="del("index")"的差别是什么

   前者向del事件传的参数是index这个变量，后者是向del事件传了“index”这个字符串

4. 下列代码六个函数的执行顺序是什么

 <div onclick="m11();" @click.capture="m12()">
 	<div onclick="m21();" @click.capture="m22()">
 		<button onclick="m31();" @click="m32()">一个按钮</button>
 	</div>
 </div>

• m31()=>m32()=>m21()=>m22()=>m11()=>m12()
• onclick和@click应该是同级的，然后触发顺序应该是从btn执行，结束后不断触发父级元素的事件

5. 定义一个私有指令，使加载该指令的标签都拥有红色字体。

• html部分

<div id="app2">
   <h3 v-color="'red'">{{ msg }}</h3>
 </div>

• vue实例部分

var vm2 = new Vue({
     el: '#app2',
     data: {
       msg:"今天是vue学习day2 哈哈哈哈哈哈哈"
     },
     methods: {},
     filters: { 
     },
     directives: { // 自定义私有指令
       'fontcolor': { // 设置字体颜色
         bind: function (el, binding) {
           el.style.fontcolor = binding.value
         }
       }
     }
   })

• 实现效果
  

今天学习进度偏慢 按键修饰符/定义指令及后面部分都是加速浏览了一下 基本没有自己实际操作 周末的时候尽量在复习一下