vue之v-show， v-for，v-model， 组件化 -- 大二上十三周十四周

vue

在vue中，他会使用虚拟dom来调用内部，当时v-if v-else的时候，他会复用一些已有的信息，如果不想被复用的话，可以给加上key值，只要两个的key值不一样，就不会复用

v-show

和v-if查不多，区别就是当判断条件是false的时候，v-if会直接删掉那个元素，而v-show则是给元素增加了行内样式display=“none”

当切换频率不是很高的时候，使用v-if，如果切换频率非常高的话，使用v-show，因为v-show不会删掉元素，会让性能更高

v-for

可以遍历数组和对象(较少)

第二个参数是下标值

遍历对象的时候，一个参数就只是value，如果是两个参数的时候，第二个参数是key，如果想要获取index，那么第三个参数就是下标值

组件key

官方推荐使用v-for的时候，建议加上key属性(为了更好的复用)

解释：v-for一般是在遍历数组，如果在不绑定key的情况下，想数组中插入数据，他会把后面的全部删掉，再重新创建，这样无疑是效率非常低的，这个时候，如果使用key，那么他就不会删掉那些没有改变过的数据，会提升效率，key必须要是不一样的内容，这样才会让key的存在有意义，一般key的内容就是item，这样可以更好的匹配

key的作用是为了各高效的更新虚拟dom

可以做到响应式的方法：
push(), shift(), unshift(), splice(), sort(), reverse()

vue的set方法可以直接修改
Vue.set(要修改的对象，索引值， 修改后的值)

v-model

v-model指令用于实现表单元素和数据的双向绑定

所谓双向绑定，就是从输入框可以直接改变对象内部的数据，也可以通过改变对象内部数据来改变页面上响应式的内容。

v-model实现的双向绑定，也可以用先用v-bind先实现单向绑定，然后加上事件

<input type="text" :value ="message" @input = "str">
str(e){
  this.message = e.target.value;
}//事件内容

input:radio

<label for="male">
  <input type="radio" id="male" name="sex" value="male" v-model = "sex">男
</label>
<label for="female">
  <input type="radio" id="female" name="sex" value="female" v-model = "sex">女
</label>
data:{
  message: "哈哈哈",
  sex:"male"
}

点击之后，sex里面传入的是value的值，如果要设置初始值，就是直接在data里面给sex赋值，如果不要初始值，sex是空的就可以

input:checkbox

单选框对应布尔值

<label for="agree">
  <input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
isAgree: false // data里面的值

多选框一般对于一个数组，把选中信息加入数组中

<input type="checkbox" v-model="hobbies" value="篮球">篮球
<input type="checkbox" v-model="hobbies" value="乒乓球">乒乓球
<input type="checkbox" v-model="hobbies" value="足球">足球
<input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球
hobbies: [] // data里面的值

select

单选

<select name="abc" id="" v-model="fruit">
  <option value="橘子">橘子</option>
  <option value="柚子">柚子</option>
  <option value="葡萄">葡萄</option>
  <option value="香蕉">香蕉</option>
</select>

多选

<select name="abc" v-model="fruit" multiple>
  <option value="橘子">橘子</option>
  <option value="柚子">柚子</option>
  <option value="葡萄">葡萄</option>
  <option value="香蕉">香蕉</option>
</select>

单选多选的区别就是多选的fruit是一个空的数组

值绑定

就是把初始值定义也放在data里面，然后用v-for来动态展示，然后再动态绑定住

就是再利用上v-bind

修饰符

组件化

将一个完整的界面分成很多个组件，每个组件用于实现页面的一个功能块，每个组件又可以进行细分

任何应用都可以被抽象成一颗组件树

组件化思想的应用：尽可能的将页面拆分成一个个小的，可复用的组件，然后可以让我们的代码更加方便组合和管理，并且扩展性也更强

组件使用的步骤：

1. 创建组件构造器
   Vue.extend()
2. 注册组件
   Vue.component()
3. 使用组件
   在vue实例的作用范围内使用组件

<div id="app">
  <!-- 使用组件 -->
  <my-cpn></my-cpn>
</div>
<script src="vue.js"></script>
<script>
  // 创建组件构造器
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>红红火火恍恍惚惚</p>
      </div>`//模板
  })
  // 注册组件
  Vue.component("my-cpn", cpnC);//第一个参数就是组件的标签名，第二个参数是组件构造器
  const app = new Vue({
    el: "#app",
    data: {
      message: "哈哈哈"
    }
  })
</script>

全局组件和局部组件

全局组件意味着可以在多个vue的实例下面使用，上面的注册方法就会注册全局组件

局部组件则是在注册的时候，在vue实例的内部，使用components属性，利用键值对实现组件的标签名和组件构造器的一一对应，挂载在vue实例下面

父组件和子组件

<div id="app">
  <cpn2>
  </cpn2>
</div>
<script src="vue.js"></script>
<script>
  // 创建组件构造器
  const cpnC1 = Vue.extend({
    template: `
      <div>
        <h2>我是标题1</h2>
        <p>红红火火恍恍惚惚</p>
      </div>`//模板
  })
  const cpnC2 = Vue.extend({
    template: `
      <div>
        <h2>我是标题2</h2>
        <p>嘤嘤嘤嘤嘤嘤嘤嘤</p>
        <cpn1></cpn1>
      </div>`,//模板
    components:{
      cpn1 : cpnC1
    }
  })
  // 注册组件
  const app = new Vue({
    el: "#app",
    data: {
      message: "哈哈哈"
    },
    components: {
      cpn2 : cpnC2
    }
  })
</script>

cpn1是cpn2的子组件

子组件不能直接出现在HTML标签里面

注册组件的语法糖就是省去vue.extend()，直接将内部对象传给components

分离组件模板

方法一：

<script type="text/x-template" id="cpn">
  <div>
    <h2>标题</h2>
    <p>哈哈哈哈哈</p>
  </div>
</script>
<!-- template: "#cpn"  components对象里面的内容-->

方法二：

<template id="cpn">
  <div>
    <h2>标题</h2>
    <p>jjjjjjjj</p>
  </div>
</template>

上述两种都是用id来对应

组件内部是不能访问vue实例里面的内容的

组件内部的data

组件内部的data必须是函数，返回值必须是一个对象

data(){
  return {
    title:"标题"
  }
}

为什么组件内部的data要是一个函数？
以函数形式返回对象本质上就是返回地址，每次返回的都是不一样的地址。会让复用变得简单，每次使用的时候，组件对应的对象都是不一样的。
如果想让所有的参数都是一样的，那就直接const一个对象，函数返回自己定义的对象

父子组件通信

• 通过props传递

• 字符串数组，数组中的字符串就是传递时的名称

• 通过事件向父组件传递事件

• 对象，对象可设置传递时的类型，也可以设置默认值

父传子

props:['cmovies', 'cmessage']//数组格式的传入
props: {//对象格式的传入
  cmessage: {
    type: String,
    default:"aaaaaaaaaa",//如果没有传入，就输出这个
    required: true//表示必须传入这个参数
  }
}

如果是类型是对象或者函数的话，默认值就必须是一个函数

v-bind不支持驼峰表达式
在js中的驼峰表达式，在html的标签中要以短横线的形式书写，在mustache语法中可以直接用驼峰表达式

一般情况下，template里面多个标签的时候，需要一个根元素(div就行)，把里面的元素都包裹住

子传父

通过自定义事件实现,在子组件中通过$emit()来触发事件，在父组件中通过v-on来监听子组件事件

// 子组件中methods定义事件
btnClick(item){
  // 自定义事件
  this.$emit('item-click', item);//第一个参数是事件名称，第二个参数是传过去的参数
}
// 父组件中监听
methods : {
  cpnClick(item){//默认传入emit里面的事件而非点击事件
    console.log(item);
  }
}
// html代码
<cpn @item-click="cpnClick"> </cpn>