Vue基础day02--常用特性

表单基本操作

获取单选框中的值

• 通过v-model

<!-- 
		1、 两个单选框需要同时通过v-model 双向绑定 一个值 
        2、 每一个单选框必须要有value属性  且value 值不能一样 
		3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据

		gender 的值就是选中的值，我们只需要实时监控他的值就可以了
	-->
   <input type="radio" id="male" value="1" v-model='gender'>
   <label for="male">男</label>

   <input type="radio" id="female" value="2" v-model='gender'>
   <label for="female">女</label>

<script>
    new Vue({
   
         data: {
   
             // 默认会让当前的 value 值为 1 的单选框选中
                gender: 1,  
            },
    })

</script>

获取复选框中的值

• 通过v-model
• 和获取单选框中的值一样
• 复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选

<!-- 
		1、 复选框需要同时通过v-model 双向绑定 一个值 
        2、 每一个复选框必须要有value属性  且value 值不能一样 
		3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据

		hobby 的值就是选中的值，我们只需要实时监控他的值就可以了
	-->

<div>
   <span>爱好：</span>
   <input type="checkbox" id="ball" value="1" v-model='hobby'>
   <label for="ball">篮球</label>
   <input type="checkbox" id="sing" value="2" v-model='hobby'>
   <label for="sing">唱歌</label>
   <input type="checkbox" id="code" value="3" v-model='hobby'>
   <label for="code">写代码</label>
 </div>
<script>
    new Vue({
   
         data: {
   
                // 默认会让当前的 value 值为 2 和 3 的复选框选中
                hobby: ['2', '3'],
            },
    })
</script>

获取下拉框和文本框中的值

• 通过v-model

  <div>
      <span>职业：</span>
       <!--
			1、 需要给select  通过v-model 双向绑定 一个值 
            2、 每一个option  必须要有value属性  且value 值不能一样 
		    3、 当某一个option选中的时候 v-model  会将当前的 value值 改变 data 中的 数据
		     occupation 的值就是选中的值，我们只需要实时监控他的值就可以了
		-->
       <!-- multiple  多选 -->
      <select v-model='occupation' multiple>
          <option value="0">请选择职业...</option>
          <option value="1">教师</option>
          <option value="2">软件工程师</option>
          <option value="3">律师</option>
      </select>
         <!-- textarea 是 一个双标签   不需要绑定value 属性的  -->
        <textarea v-model='desc'></textarea>
  </div>
<script>
    new Vue({
   
         data: {
   
                // 默认会让当前的 value 值为 2 和 3 的下拉框选中
                 occupation: ['2', '3'],
             	 desc: '你好'
            },
    })
</script>

表单修饰符

• .number 转换为数值

  • 注意点：
  • 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
  • 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。

• .trim 自动过滤用户输入的首尾空白字符

  • 只能去掉首尾的 不能去除中间的空格

• .lazy 将input事件切换成change事件

  • .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上

• 在失去焦点 或者 按下回车键时才更新

<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!--自动过滤用户输入的首尾空白字符,注意:中间的空白过滤不了 -->
<input v-model.trim="msg">

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

自定义指令

• 内置指令不能满足我们特殊的需求
• Vue允许我们自定义指令
  使用Vue.directive () 注册全局指令
  其中参数一 是指令的名称,指令的名称前面不用加v-前缀,调用的时候要加v-on
  参数二是一个对象,这个对象身上有一些指令相关的钩子函数,这些函数可以在特定的阶段,执行相关的操作

Vue.directive('focus',{
   
  bind:function(el){
   } //每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
  注意:在每个函数中,第一个参数永远都是el,这个el参数是一个原生的js对象
  inserted:function(){
   } //表示元素插入到DOM中的时候 会执行这个函数,触发一次
  updated:function(){
   }//当VNode更新的时候 会执行updated,可能会触发多次
})

<!-- 
  使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 
-->
<input type="text" v-focus>
<script>
// 注意点： 
//   1、 在自定义指令中  如果以驼峰命名的方式定义 如  Vue.directive('focusA',function(){
   }) 
//   2、 在HTML中使用的时候 只能通过 v-focus-a 来使用 
    
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
   
  	// 当绑定元素插入到 DOM 中。 其中 el为dom元素
  	inserted: function (el) {
   
    		// 聚焦元素
    		el.focus();
 	}
});
new Vue({
   
　　el:'#app'
});
</script>

Vue.directive 注册全局指令 带参数

 <input type="text" v-color='msg'>
 <script type="text/javascript">
    /*
      自定义指令-带参数
      bind - 只调用一次，在指令第一次绑定到元素上时候调用

    */
    Vue.directive('color', {
   
      // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      // el 为当前自定义指令的DOM元素  
      // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
      bind: function(el, binding){
   
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        msg: {
   
          color: 'blue'
        }
      }
    });
  </script>

自定义指令局部指令

• 局部指令，需要定义在 directives 的选项 用法和全局用法一样
• 局部指令只能在当前组件里面使用
• 当全局指令和局部指令同名时以局部指令为准

<input type="text" v-color='msg'>
 <input type="text" v-focus>
 <script type="text/javascript">
    /*
      自定义指令-局部指令
    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        msg: {
   
          color: 'red'
        }
      },
   	  //局部指令，需要定义在  directives 的选项
      directives: {
   
        color: {
   
          bind: function(el, binding){
   
            el.style.backgroundColor = binding.value.color;
          }
        },
        focus: {
   
          inserted: function(el) {
   
            el.focus();
          }
        }
      }
    });
  </script>

计算属性 computed

• 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
• 计算属性是基于它们的响应式依赖进行缓存的
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

      <div id="app">
     <