vue基础之常用特性

梦里梦外; 2022-11-26 02:59 117阅读 0赞

## vue 常用特性 ##

**表单基本操作**

*  获取单选框中的值  
    通过v-model
    
        
        
        
        
        
        <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 我们要定义成数组 否则无法实现多选`
    
        
         
        <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">
        	
        	
        	<span>职业：</span>
        	
        	<select v-model='occupation' multiple>
                  <option value="0">请选择职业...</option>
                  <option value="1">教师</option>
                  <option value="2">软件工程师</option>
                  <option value="3">律师</option>
            </select>
              
             <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 注册全局指令**
    
        
        <div id="app">
            
        	<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">
            
        	<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">
            
            {
             { 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实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数`
    
    <table> 
     <thead> 
      <tr> 
       <th>beforeCreate</th> 
       <th>在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>created</td> 
       <td>在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来</td> 
      </tr> 
      <tr> 
       <td>eforeMount</td> 
       <td>在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已</td> 
      </tr> 
      <tr> 
       <td>mounted</td> 
       <td>el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件</td> 
      </tr> 
      <tr> 
       <td>eforeUpdate</td> 
       <td>数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的</td> 
      </tr> 
      <tr> 
       <td>updated</td> 
       <td>由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的</td> 
      </tr> 
      <tr> 
       <td>eforeDestroy</td> 
       <td>实例销毁之前调用</td> 
      </tr> 
      <tr> 
       <td>estroyed</td> 
       <td>实例销毁后调用</td> 
      </tr> 
     </tbody> 
    </table>
 *  **数组变异方法**  
    `1. 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变`  
    `2. 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展`
    
    <table> 
     <thead> 
      <tr> 
       <th>push()</th> 
       <th>往数组最后面添加一个元素，成功返回当前数组的长度</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>pop()</td> 
       <td>删除数组的最后一个元素，成功返回删除元素的值</td> 
      </tr> 
      <tr> 
       <td>shift()</td> 
       <td>删除数组的第一个元素，成功返回删除元素的值</td> 
      </tr> 
      <tr> 
       <td>unshift()</td> 
       <td>往数组最前面添加一个元素，成功返回当前数组的长度</td> 
      </tr> 
      <tr> 
       <td>plice()</td> 
       <td>有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值</td> 
      </tr> 
      <tr> 
       <td>sort()</td> 
       <td>sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组</td> 
      </tr> 
      <tr> 
       <td>reverse()</td> 
       <td>reverse() 将数组倒序，成功返回倒序后的数组</td> 
      </tr> 
     </tbody> 
    </table>
 *  替换数组  
    `不会改变原始数组，但总是返回一个新数组`
    
    <table> 
     <thead> 
      <tr> 
       <th>ilter</th> 
       <th>filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>concat</td> 
       <td>concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组</td> 
      </tr> 
      <tr> 
       <td>slice</td> 
       <td>slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组</td> 
      </tr> 
     </tbody> 
    </table>
 *  **动态数组响应式数据**  
    `Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来`  
    `a是要更改的数据 、 b是数据的第几项、 c是更改后的数据`