Vue六大常用特性详解

编程入门行业动态更新时间:2024-10-08 00:28:51

Vue六大常用特性<a href=https://www.elefans.com/category/jswz/34/1770044.html style= 详解"/>

Vue六大常用特性详解

Vue的常用特性：

表单操作
自定义指令
计算属性
过滤器
侦听器
生命周期

1. 表单操作

 <body><script src=".js"></script><div id="app"><form action=""><div><span>姓名：</span><input type="text" name="" id="" v-model='username'></div><div><span>性别：</span><label><input type="radio" name="" id="" value="1" v-model='sex'>男</label><label><input type="radio" name="" id="" value="2" v-model='sex'>女</label></div><div><span>爱好：</span><label><input type="checkbox" name="" id="" value="1" v-model='hobby'>篮球</label><label><input type="checkbox" name="" id="" value="2" v-model='hobby'>音乐</label><label><input type="checkbox" name="" id="" value="3" v-model='hobby'>电影</label></div><div><span>职业：</span><select v-model='occupation'><option value="student">学生</option><option value="programmer">程序员</option><option value="actor">演员</option><option value="accountancy">会计</option></select></div><div><span>个人介绍：</span><textarea>{{self}}</textarea></div><button @click.prevent='submit'>提交</button></form></div><script>var vm = new Vue({el: '#app',data: {username:'',sex:'1',hobby:[2,3],occupation:'actor',self:'哈哈哈'},methods:{submit:function(){console.log(this.username)}}      })</script>
</body>

表单域修饰符：
（1）number
假设表单中还有一个年龄选项，给input输入框绑定v-model='age'，如果打印this.age+1，输入age为10的话，打印出来是101，因为这相当于是字符串拼接，我们应该将age转化为整数，v-model.number='age'。
（2）trim
去掉字符串前后的空格，字符串中间的空格无法去除。v-model.trim='info'。
（3）lazy
将input事件切换为change事件。我们在网站注册用户时，如果该网站不允许用户名重复，那么，当你选用了已经存在的用户名时，输入框底下会有相关提示，这个功能的实现就可以利用lazy修饰符。

<div id='app'>
<input type="text" name="" id="" v-model.lazy='msg'>
<div>{{msg}}</div>
</div>
<script>var vm = new Vue({el: '#app',data: {msg:''}})</script>

v-model是双向绑定，当input中的内容发生改变时，div中的内容也会改变，这是在我们输入每个字符时都会触发的，因为默认该事件是input事件。而当它用lazy修饰后，就变成了失去焦点时触发。

2.自定义指令

Vue.directive('focus',{inserted:function(el){// el表示指令所绑定的元素// 获取元素的焦点el.focus()}})

使用：<input type="text" v-focus>
上边的自定义指令是一个全局指令，如果在组件的directives:{}里定义，就是局部指令，只允许这个组件使用。

3.计算属性

<div id="app"><input type="text" v-focus><div>{{msg}}</div><div>{{reverseString}}</div>
</div>
<script>var vm=new Vue({el:'#app',data:{msg:'hello world'},computed:{reverseString:function(){return this.msg.split('').reverse().join('')}}})
</script>

计算属性与方法的区别：
计算属性是基于它们的依赖进行缓存的，方法不存在缓存。什么意思呢？

    <div id="app"><input type="text" v-focus><div>{{msg}}</div><div>{{reverseString}}</div>        <div>{{reverseString}}</div><div>{{reversefunc()}}</div>        <div>{{reversefunc()}}</div></div><script>Vue.directive('focus',{inserted:function(el){// el表示指令所绑定的元素// 获取元素的焦点el.focus()}})var vm=new Vue({el:'#app',data:{msg:'hello world'},computed:{reverseString:function(){console.log('computed')return this.msg.split('').reverse().join('')}},methods:{reversefunc:function(){console.log('methods')return this.msg.split('').reverse().join('')}}})</script>

计算属性和方法我们都写了两个div，那是不是它们都被调用了两次呢？查看浏览器，可以发现，computed打印了一遍，methods打印了两遍。也就是说，computed只被调用了一次，事实上，只有绑定的数据msg发生变化时，computed才会被再次调用，否则，就只是第一次的执行结果。如果计算过程复杂且耗时，那么使用computed比使用methods的性能会好很多。

4.侦听器
应用场景：数据变化时执行异步或者开销较大的操作
用法：

<div id="app"><span>名：</span><input type="text" v-model='firstName'><span>姓：</span><input type="text" v-model='lastName'><div>{{fullName}}</div>
</div>
<script>var vm=new Vue({el:'#app',data:{firstName:'san',lastName:'zhang',fullName:'zhang san'},watch:{firstName:function(val){this.fullName=val+' '+this.lastName},lastName:function(val){this.fullName=this.firstName+' '+val}}})
</script>

当然，这里也可以利用computed来实现：

            computed:{fullName:function(){return this.firstName+" "+this.lastName}},

对于这个案例来说，使用computed看起来比使用watch更简单，而当出现异步操作或者情形更复杂时，我们需要使用watch。

用户名：

    var vm=new Vue({el:'#app',data:{username:'',tip:''},methods:{checkName:function(uname){// 使用定时任务的方式模拟接口调用var that=this// setTimeOut的this是windowssetTimeout(function(){if(uname=='admin'){that.tip='用户名已存在'}else{that.tip='用户名合法'}},2000)}},watch:{username:function(val){// 调用后台接口验证用户名的合法性this.checkName(val)// 修改提示信息this.tip='正在验证'}}})
</script>

5.过滤器
作用：格式化数据，比如字符串格式化为首字母大写，日期格式化为指定格式等。可以用在插值表达式或者绑定属性中。

<body><script src=".js"></script><div id="app"><input type="text" name="" id="" v-model='msg'><div>{{msg | upper}}</div><div :abc='msg|upper'>测试数据</div></div><script>// 过滤器Vue.filter('upper',function(val){// 原生js的方法，charAt(0)获取字符串首字母，toUpperCase转化为大写，最后拼接字符串剩余部分return val.charAt(0).toUpperCase()+val.slice(1)})var vm=new Vue({el:'#app',data:{msg:''}})</script>
</body>

过滤器可以级联，比如msg|upper|lower，最终显示出来的还是小写的。
带参数的过滤器（格式化日期）：

<div id="app"><div>{{date | format('yyyy-MM-dd')}}</div></div><script>var vm=new Vue({el:'#app',data:{date:new Date()},filters:{// 第二个参数arg是调用时传入的参数format:function(value,arg){if(arg=='yyyy-MM-dd'){var ret=''ret+=value.getFullYear()+'-'+(value.getMonth()+1)+'-'+value.getDate()return ret}return value}}})</script>

6.生命周期

Vue的生命周期有八个阶段：