乐趣区

关于vue.js:vue基础之常用特性

jiezi

vue 罕用个性

表单基本操作

  • 获取单选框中的值

    通过 v -model
    <!---1. 两个单选框须要同时通过 v -model 双向绑定 一个值 ---->
<!---2. 每一个单选框必须要有 value 属性且 value 值不能一样 ---->
<!---3. 当某一个单选框选中的时候 v -model 会将以后的 value 值扭转 data 中的数据 ---->
<!--- 上面是监控 gender ---->
<!---laber 的 for 属性的作用：通过 for 属性，能够实现通过点击 label 标签来
     达到相当于点击 input 的作用 ---->
<div id="app">
    <label for="male"> 男 </label>
    <input type="radio" id="male" value="1" v-model='gender'>
    <label for="female"> 女 </label>
    <input type="radio" id="female" value="2" v-model='gender'>
</div>
<script src="./js/vue.js"></script>
<script>
    var vm= new Vue({
         el:"#app"
         data: {
             // 默认会让以后的 value 值为 2 的单选框选中
                gender: 2,  
            },
        })
</script>

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

    <!---
    1. 复选框须要通过 v -model 双向绑定一个值
    2. 每一个复选框必须要有一个 value 且不能相等
 --->
 <!-- 上面监控是 hooby -->
<div id="app">
    <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 src="./js/vue.js"></script>
<script>
    var vm= new Vue({
         el:"#app"
         data: {
             // 默认会让以后的 value 值为 2 和 3 的复选框选中
              hobby: ['2', '3'],
            },
     })
</script>
```
  • 获取下拉框和文本框中的值

通过 v -model

<div id="app">
    <!--
        1. 须要给 select 通过 v -model 双向绑定一个直
        2. 每一个 option 必须要有 value 属性且值不能一样
        3. 当某一个 option 选中的时候 v -model 会将以后 value 的值更新至 data 的数据中
     -->
    <!-- 上面监控的是 occupation -->
    <span> 职业：</span>
    <!--- 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 src="./js/vue.js"></script>
<script>
    var vm= new Vue({
         el:"#app"
         data: {
             // 默认会让以后的 value 值为 2 和 3 的下拉框选中
             occupation: ['2', '3'],
              desc: 'hello vue.js'
            },
        })
</script>
  • 表单修饰符

1 .number 转换为数值

     ** 留神：**
     
     1. 当开始输出非数字的字符串时，因为 Vue 无奈将字符串转换成数值
     2. 所以属性值将实时更新成雷同的字符串。即便前面输出数字，也将被视作字符串
     
 
  `2  .trim  主动过滤用户输出的首尾空白字符 `
     ** 留神：**
     
     1. 只能去掉首尾的 不能去除两头的空格
 
  `3  .lazy   将 input 事件切换成 change 事件 `
         ** 留神：**
         
         1. lazy 修饰符提早了同步更新属性值的机会。2. 行将本来绑定在 input 事件的同步逻辑转变为绑定在 change 事件上（失去焦点后才会触发）
  • 自定义指令

1. 内置指令不能满足咱们非凡的需要
2. Vue 容许咱们自定义指令

  • Vue.directive 注册全局指令

    <!---  应用自定义的指令，只需在对用的元素中，加上 'v-' 的前缀造成相似于外部指令 'v-if'，'v-text' 的模式。-->
<div id="app">
    <!--- 应用自定义指令 v-focus --->
    <input v-focus type="text" >
</div>
<script src="./js/vue.js"></script>
<script>
    //1. 在自定义指令中，如果以驼峰命名的形式如  Vue.directive('focusA',function(){})
    //2.  在 HTML 中应用的时候 只能通过 v-focus-a 来应用 
    // 注册一个全局自定义指令 v-focus 获取焦点
    Vue.directive('focus',{
        // 当绑定的元素插入 DOM 中 其中 el 为 DOM 元素
        inserted:function(el){
            // 聚焦元素
            el.focus()}
    })
    var vm= new Vue({el:"#app"})
</script>

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

    <div id="app">
    <!--- 应用自定义指令 v-focus --->
    <input v-color=“msg”type="text" >
</div>
<script src="./js/vue.js"></script>
<script>
    //1. 在自定义指令中，如果以驼峰命名的形式如  Vue.directive('focusA',function(){})
    //2.  在 HTML 中应用的时候 只能通过 v-focus-a 来应用 
    // 注册一个全局自定义指令 v-focus 获取焦点
    Vue.directive('color',{
        //bind 申明周期，只调用一次，指令第一绑定到元素时调用 在这里能够进行一次性的初始化设置
        // el 为以后自定义指令的 DOM 元素  
        // binding 为自定义的函数形参通过自定义属性传递过去的值存在 binding.value 外面
        // bind 和 inserted 都称之为钩子函数简略了解就是：在某一机会主动调用的函数
        bind:function(el，binding){
            // 依据指令的参数设置背景色
            el.style.backgroundColor = binding.value.color;
        }
    })
    var vm= new Vue({
         el:"#app",
         data: {
            msg: {color: 'blue'}
          }
        })
</script>
  • 自定义指令部分指令

1. 部分指令，须要定义在 directives 的选项 用法和全局用法一样
2. 部分指令只能在以后组件外面应用
3. 当全局指令和部分指令同名时以部分指令为准

<div id="app">
    <input v-color=“msg”type="text" v-focus >
</div>
<script src="./js/vue.js"></script>
<script>
    var vm= new Vue({
         el:"#app",
         data: {
            msg: {color: 'blue'}
          },
          // 部分指令，须要定义在  directives 的选项
          directives: {
                color: {bind: function(el, binding){el.style.backgroundColor = binding.value.color;}
                    },
                  focus: {inserted: function(el) {el.focus();
                      }
                     },
              }
        })
</script>
  • 计算属性 computed

1. 模板中放入太多的逻辑会让模板过重且难以保护 应用计算属性能够让模板更加的简洁
2. 计算属性是基于它们的响应式依赖进行缓存的
3. computed 比拟适宜对多个变量或者对象进行解决后返回一个后果值，也就是数多个变量中的某一个值产生了变动则咱们监控的这个值也就会发生变化

<div id="app">
    <span> 商品数量：</span>
    <input type="text" v-model="num">
    <span> 商品单价：</span>
    <input type="text" v-model="price">
    总价:{{totalPrice}}
</div>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        num: '',
        price: ''
      },
      // 计算属性：在定义的时候是一个办法然而在调用的时候是一个属性
      computed: {totalPrice() {return this.num * this.price * 0.8;}
      },
    })
</script>

  • 计算属性与办法的区别

    `1. 计算属性与办法的区别: 计算属性是基于依赖 (依赖数据) 进行缓存的，而办法不缓存 `

    2. 依赖的数据不变动计算属性的办法是不执行第二次的
    3. 如果计算属性的办法是一个耗时的话 数据不变的状况下能够间接拿出第一次计算的后果能够解决资源

  • 侦听器 watch

1. 应用 watch 来响应数据的变动
2. 个别用于异步或者开销较大的操作
3. watch 中的属性 肯定是 data 中 曾经存在的数据
4. 当须要监听一个对象的扭转时，一般的 watch 办法无奈监听到对象外部属性的扭转，只有 data 中的数据才可能监听到变动，此时就须要 deep 属性对对象进行深度监听

<div id="app">
        <div>
            <span> 名：</span>
            <span>
                    <input type="text" v-model='firstName'>
             </span>
        </div>
        <div>
            <span> 姓：</span>
            <span>
                    <input type="text" v-model='lastName'>
           </span>
        </div>
        <div>{{fullName}}</div>
</div>
<script src="./js/vue.js"></script>
<script>
       // 侦听器
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Jim',
                lastName: 'Green',
            },
             //watch 属性定义和 data,methods 平级 
            watch: {
                // 留神：这里 firstName 对应着 data 中的 firstName 
                // 当 firstName 值扭转的时候会主动触发 watch
                firstName: function(val) {this.fullName = val + ' ' + this.lastName;},
                // 留神：这里 lastName 对应着 data 中的 lastName 
                lastName: function(val) {this.fullName = this.firstName + ' ' + val;}
            }
        });
    </script>
  • 过滤器

1. Vue.js 容许自定义过滤器，可被用于一些常见的文本格式化。
2. 过滤器能够用在两个中央：双花括号插值和 v -bind 表达式。
3. 过滤器应该被增加在 JavaScript 表达式的尾部，由“管道”符号批示
4. 反对级联操作
5. 过滤器不扭转真正的data，而只是扭转渲染的后果，并返回过滤后的版本
6. 全局注册时是 filter，没有 s 的。而部分过滤器是 filters，是有 s 的

<div id="app">
    <input type="text" v-model="msg">
    <div>{{msg | upper}}</div>
    <!-- 能够连在一起写 -->
    <div>{{msg | upper |lower}}</div>
    <!-- 动静属性绑定也能够应用过滤器 -->
    <div :abc="msg | upper"> 测试数据 </div>
</div>
<script src="./js/vue.js"></script>
<script>
    // 定义将首字母大写过滤器：全局过滤器
    Vue.filter('upper', (val) => {return val.charAt(0).toUpperCase() + val.slice(1)
    })
    // 定义将首字母小写过滤器
    Vue.filter('lower', (val) => {return val.charAt(0).toLowerCase() + val.slice(1)
    })
    var vm = new Vue({
      el: "#app",
      data: {msg: '',}
    })
</script>

  • 过滤器中传递参数

     <div id="box">
    <!--
        filterA 被定义为接管三个参数的过滤器函数。其中 message 的值作为第一个参数，一般字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。-->
    {{message | filterA('arg1', 'arg2') }}
</div>
<script>
    // 在过滤器中 第一个参数 对应的是  管道符后面的数据 n 此时对应 message
    // 第 2 个参数  a 对应 实参  arg1 字符串
    // 第 3 个参数  b 对应 实参  arg2 字符串
    Vue.filter('filterA',function(n,a,b){if(n<10){return n+a;}else{return n+b;}
    });
    new Vue({
        el:"#box",
        data:{message: "哈哈哈"}
    })
</script>

  • 生命周期

    `1. 事物从出世到死亡的过程 `
`2. Vue 实例从创立 到销毁的过程，这些过程中会随同着一些函数的自调用。咱们称这些函数为钩子函数 `
beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用 此时 data 和 methods 以及页面的 DOM 构造都没有初始化 什么都做不了
created 在实例创立实现后被立刻调用此时 data 和 methods 曾经能够应用 然而页面还没有渲染进去
beforeMount 在挂载开始之前被调用 此时页面上还看不到实在数据 只是一个模板页面而已
mounted el 被新创建的 vm.$el 替换，并挂载到实例下来之后调用该钩子。数据曾经实在渲染到页面上 在这个钩子函数外面咱们能够应用一些第三方的插件
beforeUpdate 数据更新时调用，产生在虚构 DOM 打补丁之前。页面上数据还是旧的
updated 因为数据更改导致的虚构 DOM 从新渲染和打补丁，在这之后会调用该钩子。页面上数据曾经替换成最新的
beforeDestroy 实例销毁之前调用
destroyed 实例销毁后调用

  • 数组变异办法

    `1. 在 Vue 中，间接批改对象属性的值无奈触发响应式。当你间接批改了对象属性的值，你会发现，只有数据改了，然而页面内容并没有扭转 `
`2. 变异数组办法即放弃数组办法原有性能不变的前提下对其进行性能拓展 `
push() 往数组最初面增加一个元素，胜利返回以后数组的长度
pop() 删除数组的最初一个元素，胜利返回删除元素的值
shift() 删除数组的第一个元素，胜利返回删除元素的值
unshift() 往数组最后面增加一个元素，胜利返回以后数组的长度
splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原地位替换的值
sort() sort() 使数组依照字符编码默认从小到大排序, 胜利返回排序后的数组
reverse() reverse() 将数组倒序，胜利返回倒序后的数组
  • 替换数组

不会扭转原始数组，但总是返回一个新数组

filter filter() 办法创立一个新的数组，新数组中的元素是通过查看指定数组中符合条件的所有元素。
concat concat() 办法用于连贯两个或多个数组。该办法不会扭转现有的数组
slice slice() 办法可从已有的数组中返回选定的元素。该办法并不会批改数组，而是返回一个子数组
  • 动静数组响应式数据

Vue.set(a,b,c) 让 触发视图从新更新一遍，数据动静起来
a 是要更改的数据、b 是数据的第几项、c 是更改后的数据

退出移动版