Vue学习笔记--基础语法(2)

头像
浪一把
    阅读 11 分钟
    1

    Vue表单操作

    1. 单行文本框

    <div>
 <span>姓名：</span>
 <span>
   <input type="text" v-model="username">
 </span>
 </div>

 <script>
   var vm = new Vue({
     el: '#app',
     data: {
       username: 'lisi'
     }
   });
 </script>

    2. 多行文本

    <div>
 <span>个人简介：</span>
 <textarea v-model="desc"></textarea>
</div>

<script>
 var vm = new Vue({
   el: '#app',
   data: {
     desc: 'nihao'
   },
   methods: {}
 });
</script>

    3. 单选

    <div>
 <span>性别：</span>
 <span>
   <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>
 </span>
</div>

<script>
   var vm = new Vue({
     el: '#app',
     data: {
       gender: 1
     }
   });
</script>

    4. 多选

    <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>
  var vm = new Vue({
    el: '#app',
    data: {
      hobby: [2,3]
    },
    methods: {}
  });
</script>

    5. 下拉框

    • 单选

      <div>
  <span>职业：</span>
  <!-- <select v-model="vocation">
    <option value="0">请选择职业...</option>
    <option value="1">教师</option>
    <option value="2">软件工程师</option>
    <option value="3">律师</option>
  </select> -->
  <select multiple v-model="vocation">
    <option value="0">请选择职业...</option>
    <option value="1">教师</option>
    <option value="2">软件工程师</option>
    <option value="3">律师</option>
  </select>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      vocation: 1
    },
    methods: {}
  });
</script>

    • 复选

      <div>
  <span>职业：</span>
  <select multiple v-model="vocation">
    <option value="0">请选择职业...</option>
    <option value="1">教师</option>
    <option value="2">软件工程师</option>
    <option value="3">律师</option>
  </select>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      vocation: [1]
    },
    methods: {}
  });
</script>

    6. 表单域修饰符

    - .number 字符串转换成数字
  ```
  <div>
    有.number修饰符：
    <input type="text" v-model.number="num2">
    <button @click="showWithNum">Display</button> <br>
    显示结果：{{num2}}
  </div>
  ```
- .trim 去掉字符串首尾两处的空格
  ```
  <div>
    有 .trim 修饰符：
    <input type="text" v-model.trim="content">
    <button @click="getContentLength">Get Length</button>
  </div>
  ```
- .lazy 将input事件转换成change事件
  ```
  <div>
    <input type="text" v-model.lazy="info"> <br>
    {{info}}
  </div>
  ```
--- [01.Vue表单操作.html](file:\\01.Vue表单操作.html)
--- [02.Vue表单域修饰符.html](file:\\02.Vue表单修饰符.html)

    Vue自定义指令

    1. 自定义全局指令 (不带参数)

    <div id="app">
 <input type="text" v-tofocus>
</div>
<script>
 Vue.directive('tofocus',{
   inserted(el) {
     el.focus();
   }
 });
 var vm = new Vue({
   el: '#app',
   data: {},
   methods: {}
 });
</script>

    通过Vue.directive(p1, p2)来定义全局指令，

    参数p1是定义自定义指令的名称，参数p2是用来定义自定指令的具体实现的业务逻辑；

    p2是一个json对象，里面定义对应钩子函数的方法，每个钩子函数的第一个参数是指令绑定的html元素的对象即 el

    2. 自定义全局指令 (带参数)

    <div id="app">
 <div>
   <input type="text" v-color="config">
 </div>
</div>

<script>
 Vue.directive('color', {
   bind(el, binding) {
     el.style.backgroundColor = binding.value.inputColor;
   }
 });
 var vm = new Vue({
   el: '#app',
   data: {
     config: {
       inputColor: 'blue'
     }
   },
   methods: {}
 });
</script>

    自定义指令可以实现参数传递：

    根据钩子函数的定义，第二个参数是是个一个json对象，封装着指令相关的配置信息，其中 value 属性封装着 指令值的内容，指令值也可以是Vue实例对象的数据

    3. 自定义局部指令 (不带参数)

     <div id="app">
 div>
   局部指令实现自动获取焦点
   <input type="text" v-focus>
 </div>
 
 <script>
   var vm = new Vue({
     el: '#app',
     ...
     directives: {
       focus: {
         inserted(el) {
           el.focus();
         }
       }
     }
   });
 </script>

    局部自定义指令实在Vue实例对象内部，通过 directives 属性来实现的，与全局自定义指令一项，实现指令逻辑也是基于自定义指令钩子函数来实现的。

    4. 自定义局部指令 (带参数)

     <div id="app">
   <div>
     局部指令实现背景颜色设置
     <input type="text" v-color="inputConfig">
   </div>
 </div>

 <script>
   var vm = new Vue({
     el: '#app',
     data: {
       inputConfig: {
         color: 'red'
       }
     },
     ...
     directives: {
       color(el, binding) {
         el.style.backgroundColor = binding.value.color;
       }
     }
   });
 </script>

    Vue计算属性

    Vue计算属性使用实例：

    <div id="app">
  <div>{{msg}}</div>
  <div>{{msg.split('').reverse().join('')}}</div>
  <div>使用计算属性得到的结果：{{reverseString}}</div>
  <div>使用计算属性得到的结果：{{reverseString}}</div>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello'   
    },
    computed: {
      reverseString() {
        console.log('调用了data中的数据');
        return this.msg.split('').reverse().join('');
      }
    }
  });
</script>

    Vue构造函数中提供了'computed'属性可以定义多个函数，每个函数可以处理Vue对象中的data属性中的数据。可简化Mustache表达式。如上述代码中的计算属性就是为了简化 Mustache表达式 '{{msg.split('').reverse().join('')}}'

    Vue计算属性与Vue方法的区别

    1. Vue的计算属性是有缓存的，每次调用会依赖对应的data中的数据是否发生变化来决定是否执行computed属性中的函数。
      如果data中的数据发生变化，对应的compute属性方法会自动执行，以获取最新的数据；
      如果数据没有发生变化，那么compute属性函数就不会执行。
    2. Vue的方法没有缓存，每次调用都会执行，如果通过函数完成上述例子，在对应的data中的数据发生变化后，需要手动调用对应的Vue方法才能完成数据更新，不能做到自动更新。
    3. 调用方式的不同
      计算属性调用方式 '{{计算属性方法名}}'
      方法调用方式 '{{方法名()}}' <font color='red'>在调用方式时 '()' 是必须的</font>

    Vue监听器

    用于监听数据变化，根据相应的数据变化结合html元素组件的事件，对变化后的数据做一定的处理

    Vue 监听器示例

    <div id="app">
  <div>
    <input type="text" v-model="firstName">
  </div>
  <div>
    <input type="text" v-model="lastName">
  </div>
  {{fullName}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'fn',
      lastName: 'ln',
      fullName: 'fn'
    },
    watch: {
      firstName(newValue) {
        this.fullName = newValue + "  " +  this.lastName;
      },
      lastName(newValue) {
        this.fullName = this.firstName + "  " + newValue
      }
    }
  });
</script>

    Vue提供了'watch'属性来实现对数据变化的监听，以及实现基于数据变化的事件触发相关的函数操作。

    1. watch属性监听对应data中的数据变化，要求定义的监听函数名必须与变量名一致
    2. watch与computed一样都是依赖于Vue的data属性中的数据，同时当数据发生变化时被触发执行

    Vue 过滤器

    格式化数据，例如将字符串格式化为首字母大写，将日期格式化为指定格式等

    过滤器示例

    <div id="app">
  <div>
    请输入内容：<input type="text" v-model="msg">
  </div>
  <div>使用单个过滤器 {{msg | upper}}</div>
  <div>使用多个过滤器 {{msg | upper | lower}}</div>
  <div>这是绑定属性的结果
    <input type="text" :value="msg | upper">
  </div>
</div>
<script>

  Vue.filter('upper', function(value) {
    return value.charAt(0).toUpperCase() + value.slice(1);
  });

  Vue.filter('lower', function(value) {
    return value.charAt(0).toLowerCase() + value.slice(1);
  });

  var vm = new Vue({
    el: '#app',
    data: {
      msg: ''
    }
  });
</script>

    1. 过滤器的使用规则

    Vue.filters('过滤器名称', function(){
  // 过滤器的业务逻辑
});

<div>{{msg | 过滤器名称}}</div>
<div>{{msg | 过滤器1 | 过滤器2}}</div>
<div v-bind:id=" id | 过滤器"></div>

    2. 全局过滤器

    通过 <font color='red'>Vue.filter()</font> 能实现全局过滤器的生命。全局的意思是，如果一个网页中声明了多个Vue对象，即'Vue vm = new Vue({...})'语句调用了多次，那么全局过滤器对多个vue对象都起作用。

    3. 局部过滤器

     <div id="app">
   <div>
     请输入内容：<input type="text" v-model="msg">
   </div>
   <div>使用局部过滤器 {{msg | upperLocal}}</div>
   <div>使用全局和局部 {{msg | upperLocal | upper}}</div>
   <div>这是绑定属性的结果
     <input type="text" :value="msg | upper">
   </div>
 </div>
 <script>
   Vue.filter('upper', function(value) {
     return value.charAt(0).toUpperCase() + value.slice(1);
   });

   var vm = new Vue({
     el: '#app',
     data: {
       msg: ''
     },
     methods: {
       ...
     },
     filters: {
       upperLocal(value) {
         return value.charAt(0) + value.slice(1).toUpperCase();
       }
     }
   });
 </script>

    局部过滤器是使用 Vue 实例对象中的 'filters' 属性来进行声明的，而且只对当前Vue对象有效，其他Vue对象没有办法访问到该过滤器，因此也不能使用该过滤器。

    4. 带参数的过滤器

    无论是全局过滤器还是局部过滤器都是可以接收参数的

     全局过滤器
  Vue.filter('过滤器名称', function(value, param1, param2, ..., paramN));
 
 局部过滤器传递参数
 var vm = new Vue({
   el: '#app',
   data: {},
   filters: {
     '过滤器名称': function(value, param1, param2, ..., paramN) {
         .....
         return ret;
     }
   }
 });

 使用方式
 {{变量 | 过滤器名称(p1, p2, ..., pN)}}

    <font color='red'>value</font>是过滤器要处理的数据，即Vue对象中对应的data属性中的数据，而<font color='red'>param1, param2, ..., paramN</font>则是通过过滤器传递的自定义参数

    Vue实例的生命周期

    Vue实例声明周期

    1. 主要阶段

    • 挂载阶段 mount 钩子函数：
      beforeCreate
      created
      beforeMount
      mounted
    • 更新阶段 update 钩子函数：
      beforeUpdate
      updated
    • 销毁阶段 destroy 钩子函数：
      beforeDestroy
      destroyed

    2. Vue实例的产生过程

    • beforeCreate函数是在实例初始化后，在数据和事件配置之前被调用
    • created函数是在实例创建之后立即调用
    • beforeMount函数是在Vue模板挂载到vue实例对象上之前调用
    • mounted函数是在vue对象上以后调用
    • beforeUpdate函数是在数据更新时调用，发生在虚拟DOM对象打补丁之前
    • updated函数，由于数据更改以后，需要将对虚拟DOM重新渲染和打补丁，在此之后调用该函数
    • beforeDestroy函数是在Vue实例对象销毁之前调用
    • destroyed函数是在Vue实例对象销毁之后调用

    3. mounted函数

    在执行到mounted函数时，vue实例对象已经初始化完成了，这个时候如果需要请求后台接口获取页面初始化的数据，可以在mounted函数中进行执行

    <body>
  <div id="app">
    <div> {{msg}} </div>
    <div>
      <button @click="updateMsg">Update</button>
    </div>
    <div>
      <button @click="destroyMsg">Destroy</button>
    </div>
  </div>
  <script>
    var vue = new Vue({
      el: '#app',
      data: {
        msg: 'init'
      },
      methods: {
        updateMsg() {
          this.msg = 'update'
        },
        destroyMsg() {
          this.$destroy();
        }
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
      },
      beforeUpdate() {
        console.log('beforeUpdate');
      },
      updated() {
        console.log('updated');
      },
      beforeDestroy() {
        console.log('beforeDestory');
      },
      destroyed() {
        console.log('destroyed');
      }
    });
  </script>
</body>

    Vue数组更新方法

    1. 变更方法

    方法会改变数组本身的内容，并根据Vue的双向数据绑定机制，将更改后的数据更新到页面：

    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()

    2. 替换方法

    方法不会改变数组本身的内容，而是生成一个新的数组对象

    • filter()
    • concat()
    • slice()

    Vue的变更方法和替换方法：

    <body>
  <div id="app">
    <span>
      <input type="text" v-model='fname'>
      <button @click="addFruit">add</button>
      <button @click="delFruit">delete</button>
      <button @click="changeFruit">change</button>
    </span>
    <ul>
      <li :key="index" v-for="(item, index) in fruits"> {{item}} </li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        fname: '',
        fruits: ['apple', 'orange', 'banana']
      },
      methods: {
        addFruit() {
          this.fruits.push(this.fname);
        },
        delFruit() {
          this.fruits.pop();
        },
        changeFruit() {
          this.fruits = this.fruits.slice(0,2);
        }
      },
    });
  </script>
</body>

    3. Vue提供的修改数组对象内容的响应式api

    Vue提供了，Vue.set(vm.items, index or name, value); 或者 vm.$set(vm.items, index or name, value); 可以实现对更新的Vue实例对象的属性值实现响应式刷新。

    <body>
  <div id="app">
    <ul>
      <li v-key="index" v-for="(item, index) in  fruits">{{item}}</li>
    </ul>
    <div>
      {{user.name}}
      {{user.age}}
      {{user.gender}}
    </div>
    <div>
      直接修改 vm.data.fruits[1] = 'lemon'; 是没有办法把修改之后的数据更新到页面上的 <br>
      可以通过 vm.$set()方法或是Vue.set()方法来实现
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        fruits: ['apple', 'banana', 'orange'],
        user: {
          name: 'tom',
          age: '30'
        }
      }, 
      methods: {
        
      }
    });
    
    // vm.data.fruits[1] = 'lemon';
    vm.$set(vm.fruits, 1, 'lemon');
    vm.$set(vm.user, 'gender', 'male');
  </script>
</body>

    Vue学习笔记--基础语法(1)

    前端javascriptvue.js
    浪一把
    112 声望5 粉丝
    « 上一篇
    Vue学习笔记--基础语法(1)
    下一篇 »
    Vue学习笔记--Vue组件

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    Vue学习笔记--Vue-Router基本使用

    浪一把赞 1阅读 4k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.1k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.5k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.6k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.6k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.2k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2k评论 3

    0 条评论
    得票最新