5.21 Vue学习笔记

v-model指令：默认收集的是输入框的value值

收集表单数据：

    <input type="text" id="zh">
    <input type="radio">
    <input type="password">
    <input type="checkbox">

若type为text等可以输入的，则V-model收集的就是value值用户输入的就是value值

若type为radio等不能输入，只能选择的，则v-model收集的是value值，且要给标签配置value值

若type为checkbox：分两种情况

1.没有配置value属性，那么收集的就是checked（勾选或未勾选）是一个布尔值
2.配置了value属性
    a：v-model绑定的数据初始值非数组，那么收集的就是checked（勾选或未勾选）是一个布尔值
    b：v-model绑定的数据初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符

lazy：输入框失去焦点之后收集输入框中的数据
number：输入字符串转为有效的数字
trim：过滤输入的首尾空格

过滤器filters:

可以对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

过滤器的两种注册方式：

//全局注册
Vue.filter(nam,callback)
//局部注册
new Vue({
filters:{

       }
   })

使用过滤器：{{xxx | 过滤器名}} 或v-bind:属性="xxx | 过滤器名，

多个过滤器之间可以进行串联、过滤器也可以接受额外参数
并没有改变原来的数据，是产生新的相对应的数据

directives:指令节点里面定义的函数中的this指向的都是window

自定义指令指令函数形式

 directives:{
  //这里的element就是真实的页面DOM元素，binding是本次绑定的所有信息
  //big函数在指令与元素成功绑定时会被调用一次，指令所在模板被重新解析时会调用big函数
      big(element,binding){
        
      }
    }

自定义指令对象形式

  directives:{
     color:{
      //  指令与元素绑定成功时执行
       bind(){},
      //  指令所在元素被插入页面时执行
       inserted(){},
      //  指令所在的模板重新解析时执行
       updated() {
         
       },
     }
    }

组件：就是实现应用中局部功能代码和资源的集合

1.非单文件组件：一个文件包含多个组件
2.单文件组件：一个文件只包含一个组件

组件定义时，组件中不要定义el这个属性，所有的组件都由vm进行管理，最后由vm决定组件服务于哪个容器

render函数

在组件实例中render函数是vue自动调用的，render会传递一个函数进去，render必须有一个返回值，返回的就是传递进去的函数处理之后的数据也可以直接引进组件因为是个箭头函数，简化后的形式就是render: h => h(App) ，render函数是怕我们引入的vue是一个精简版的，所以才会有render这个函数帮我们，如果是全部vue的引入的话，就可以直接用template模板进行引入

new Vue({
  // render: h => h(App),
  render(createElement) {
    //return createElement('h1', 'Hello wordl')
     return createElement(App)
  }
}).$mount('#app')

ref属性

1被用来给元素或子组件注册应用信息
2应用在html标签上获取的是真实的DOM元素，应用在组件标签上是获取的组件实例对象

<template>
  <div id="app">
    <h3 v-text="text" ref="title"></h3>
    <button @click="getDOM">点击获取上方DOM元素</button>
    <School ref="sch"></School>
  </div>
</template>

通过this.$refs.xxx可以获取信息

props属性

可以通过props实现父组件向子组件共享数据，并且通过props传递的数据是优先挂载到实例对象身上的，如果想修改props传递过来的数据，

props是只读的，不能直接对props里面的数据进行修改，如果需要修改的话需要在data数据源里面重新声明一个数据，用这个数据接受props里面传递过来的数据，然后修改data里面的数据,

子组件接收数据

export default {
  name: 'School',
  data() {
    return {
      name: 'xxx',
      address: 'xxx',
      myAge: this.age
    }
  },
  props: {
    uname: {
      type: String,
      required: true
    },
    age: { type: Number, required: true },
    sex: String
  }
}

父组件传递数据

  <School uname="张三" :age="20" sex="男"></School>

5.21 Vue笔记