Vue2基础

2470

Vue初体验

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <script src="vue.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
      <div id="app">{{message}}</div>
      <script type="text/javascript">
         var app=new Vue({
            el:"#app",
            data:{
               message:"测试内容！"
            },
            methods:{

            }
         })
      </script>
   </body>
</html>
复制代码

创建Vue实例传入的options

详细解释

:black_square_button:el:

  • 类型：string|HTMLElement
  • 作用：决定之后Vue实例会管理哪一个DOM

:black_square_button:data:

  • 类型：Object|Function
  • 作用：Vue实例对应的数据对象

:black_square_button:methods:

  • 类型：{ [key:string]: Function }
  • 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

computed计算属性

<div id = "app">
   <h2>{{firstName+' '+familyName}}</h2>
   <h2>{{fullName}}</h2>
   <!-- 在computed计算属性中，定义函数返回两个变量的处理结果 -->
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         firstName:'Leborn',
         familyName:'James'
      },
      computed:{
         fullName:function(){//本质是属性而不是方法，所以使用不需要加()
            return this.firstName+' '+this.familyName;
         }
      },
      methods:{
      }
   })
</script>
复制代码

filters过滤器

<div>
    {{ price | showPrice }}
</div>
<script>
filters:{
	showPrice(price){
	return price.toFixed(2);//把价格以小数点后两位形式返回
	}
}
</script>
复制代码

components组件注册

生命周期函数

​ 详见下一part

Vue实例的生命周期

1G8wPP.png

红色边框白色背景为钩子函数（生命周期函数），可以写在Vue({ options })中的options对象中，类型为function。

插值操作

Mustache语法

<div id = "app">
    <h2>{{message}}</h2>
    <h2>{{message}},叽里呱啦</h2>
    <h2>{{firstName + familyName}}</h2>
    <h2>{{num *2}}</h2>
    <!--mustache语法不仅仅可以使用变量，还可以写简单的表达式-->
</div>
<script>
	var app = new Vue({
        el:'#app',
        data:{
            message:'123',
            firstName:'c',
            familyName:'w',
            num:100
        }
    })
</script>
复制代码

其他指令

v-once

<div id = "app">
   <h2 v-once >{{message}}</h2>
   <!-- v-once后面不用写任何表达式，拥有v-once指令的元素不会因为数据改变而再次渲染 -->
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'123' //修改后不会更改h2内容
      }
   })
</script>
复制代码

v-html

<div id = "app">
    <h2>{{url}}</h2>
    <h2 v-html='url' ></h2>
    <!-- v-html后面表达式表示需要渲染的变量，会将该变量内容当作HTML代码继续渲染-->
</div>
<script>
	var app = new Vue({
        el:'#app',
        data:{
            url:'<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>
复制代码

v-text(基本不用)

<div id = "app">
    <h2>{{message}}</h2>
    <h2 v-text='message'></h2>
    <!-- 以上两者效果相同，但是在实际开发中基本不适用v-text，不够灵活，没有像mustache语法一样可以拼接 -->
</div>
<script>
	var app = new Vue({
        el:'#app',
        data:{
            message:'123' 
        }
    })
</script>
复制代码

v-pre

<div id = "app">
    <h2>{{message}}</h2><!-- 123 -->
    <h2 v-pre>{{message}}</h2><!-- {{message}} -->
    <!-- 带有v-pre的元素内容会被原封不动的显示，不会被解析 -->
</div>
<script>
	var app = new Vue({
        el:'#app',
        data:{
            message:'123' 
        }
    })
</script>
复制代码

v-cloak(基本不用)

<!-- cloak : 斗篷 -->
<style>
    [v-cloak]{
        display:none;
    }
</style>
<div id = "app">
    <h2>{{message}}</h2>
    <h2 v-cloak>{{message}}</h2>
    <!-- 带有v-cloak的元素再在解析前，根据css样式表显示，解析后清除样式，该指令基本不用，以后会使用虚拟DOM -->
    <!-- 表现：第二个h2在1秒后会显示 -->
</div>
<script>
    setTimeout(function(){
        var app = new Vue({
        el:'#app',
        data:{
            message:'123' 
        }
    })
    },1000);//1秒后执行
</script>
复制代码

v-bind

<div id = "app">
   <img src="{{imgUrl}}" >
   <!-- mustache语法只能在标签内容使用，无法在属性中使用 -->
   <img v-bind:src="imgUrl" >
   <img :src="imgUrl" >
   <!-- v-bind:属性名 才会被解析 -->
   <!-- v-bind非常重要，经常使用，以后使用语法糖[v-bind]->[:] -->
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'<a href="http://www.baidu.com">百度一下</a>',
         imgUrl:'https://s2.ax1x.com/2020/01/31/13YPNq.png'
      }
   })
</script>
复制代码

v-bind对于class属性的使用

对象语法
<style type="text/css">
   .forecolor{
      color: blue;
   }
   .decoration{
      text-decoration: underline;
   }
</style>
<div id = "app">
   <h2 class="forever(不会轻易更改)" v-bind:class="{ forecolor:blue , decoration:underline }">{{message}}</h2>
   <h2 v-bind:class="getClasses()">{{message}}</h2>
   <!-- v-bind:class传入一个对象，{ 类名1: 布尔值 , 类名2: 布尔值 } -->
   <!-- 类名为样式表中的类名，布尔值由VUE实例的变量表示 -->
   <!-- 嫌对象太长可以在methods中定义方法返回对象，效果相同 -->
   <button v-on:click="changeColor">改变颜色</button>
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         blue:true,		//由变量表示布尔值
         underline:true
      }
      methods:{
      	changeColor:function(){//通过事件改变变量的布尔值
      		this.blue=!this.blue;
   		}，
      	getClasses:function(){
         	return { this.forecolor:blue , this.decoration:underline }
      	}
   	}
   })
</script>
复制代码
数据语法(基本不用)
<style type="text/css">
   .forecolor{
      color: blue;
   }
   .decoration{
      text-decoration: underline;
   }
</style>
<div id = "app">
   <h2 class="forever(不会轻易更改)" v-bind:class="[ blue , underline ]">{{message}}</h2>
   <h2 class="forever" v-bind:class="[ 'forecolor' , 'decoration' ]">{{message}}</h2>
   <h2 v-bind:class="getClasses()">{{message}}</h2>
   <!-- v-bind:class传入一个数组，[类名1,类名2,....] -->
   <!-- 类名可以直接是类名(有引号) 也可以是变量(无引号) -->
   <!-- 嫌数组太长可以在methods中定义方法返回数组，效果相同 -->
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         blue:'forecolor',		//由变量表示类名
         underline:'decoration'
      }
      methods:{
      getClasses:function(){
      return [ this.blue , this.underline ]
   }
   }
   })
</script>
复制代码

v-bind对于style属性的使用

对象语法
<div id = "app">
   <h2 v-bind:style="{fontSize:'100px'}">{{message}}</h2>
   <h2 v-bind:style="{fontSize:fsize+'px'}">{{message}}</h2>
   <!-- key为CSS样式名，遇到-则用驼峰命名法。value如果是字面量必须加引号，否则会当作变量解析 -->
   <!-- 若对象太长可以使用方法返回对象，这里不多做赘述 -->
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         fsize:100
      },
      methods:{
      }
   })
</script>
复制代码
数组语法(基本不用)
<div id = "app">
   <h2 v-bind:style="[style1,style2]">{{message}}</h2>
   <!-- 数组内为对象，感觉实在没什么好说的 -->
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         style1:{fontSize:'100px'},
         style2:{color:'red'}
      },
      methods:{
      }
   })
</script>
复制代码

计算属性

getter和setter

<div id = "app">
   <h2>{{firstName+' '+familyName}}</h2>
   <h2>{{fullName}}</h2>
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         firstName:'Leborn',
         familyName:'James'
      },
      computed:{
         fullName:{
            get:function(){
               return this.firstName+' '+this.familyName;
            },
            set:function(newValue){//必须有一个参数表示新的值
               //一般不用set方法，也就是这个属性是只读属性	
               var newName=newValue.split(' ');
               this.firstName=newName[0];
               this.familyName=newName[1];
            }
         }
         //对于只读属性，我们一般这样做
         fullName:function(){
      		return this.firstName+' '+this.familyName;
   		}
      }
    })
</script>
复制代码

计算属性的缓存

使用computed中的属性在计算完后会存储在缓存中，再次使用该属性不会再次计算。

使用methods中的函数来计算属性，则每次使用该属性会重新调用该函数，浪费性能。

data中的属性改变后，computed也会重新计算。

事件监听、条件和循环

v-on

:black_square_button:作用：绑定事件监听器

:black_square_button:缩写：@

:black_square_button:预期：Function | Inline Statement | Object

:black_square_button:参数：Event

v-on的基本使用

<div id="app">
   <h1>当前计数：{{num}}</h1>
   <button v-on:click="num++" >+</button>
   <button v-on:click="num--" >-</button>
   <!-- 可以写一些简单的表达式 -->
   <button v-on:click="increment" >+</button>
   <button v-on:click="decrement" >-</button>
   <!-- 在methods中定义方法,填写方法名 -->
   <!-- v-on的语法糖,所有v-on:都可以使用@代替 -->
</div>
<script type="text/javascript">
   var app = new Vue({
      el:'#app',
      data:{
         num:0
      },
      methods:{
         increment(){
            this.num++;
         },
         decrement(){
            this.num--;
         }
      }
   });
</script>
复制代码

v-on的参数问题

<div id="app">
   <button @click="click1" >按钮一</button>
   <button @click="click1()" >按钮二</button>
   <!-- 结果相同 当方法本身没有参数时,括号可加可不加,一般省略 -->
   <button @click="click2('我是第一个参数')" >按钮三</button>
   <!-- 结果 '我是第一个参数' -->
   <button @click="click2()" >按钮四</button>
   <!-- 结果 undefined -->
   <button @click="click2" >按钮五</button>
   <!-- 方法本身有参数,调用时不加括号和参数时,Vue会默认将浏览器产生的event事件对象作为第一个参数传入方法 -->
   <!-- 结果 MouseEvent {isTrusted: true, screenX: 282, screenY: 128, clientX: 282, clientY: 19…}等 -->
   <button @click="click3('123',$event)" >按钮六</button>
   <!-- 当方法有多个参数,并且需要手动获取event对象,使用$event -->
</div>
<script type="text/javascript">
   var app = new Vue({
      el:'#app',
      data:{
         num:0
      },
      methods:{
         click1(){
            console.log('123');
         },
         click2(value1){
            console.log(value1);
         },
         click3(value1,value2){
            console.log(value1,value2);
         }
      }
   });
</script>
复制代码

v-on修饰符

<div id="app">
   <div @click="divClick" style="background: #00BFFF;">
      div内容
      <button @click.stop="btnClick">按钮一</button>
   </div><br>
   <!-- .stop修饰符防止事件冒泡 -->
   <form action="/" method="post">
      <input type="submit" value="提交" @click.prevent="mySubmit"/>
   </form><br>
   <!-- .prevent防止默认事件并执行表达式,表达式可不写 -->
   <input type="text" @keyup.enter="keyup"/><br><br>
   <!-- .keycode|键缩写 只有符合才会触发事件 -->
   <myDiv @click.native="funcc"></myDiv>
   <!-- .native用于自定义组件, 不用该修饰符无法监听事件,运行时先注释上一行代码-->
   <button @click.once="onlyOnce">按钮二</button>
   <!-- .once用于只触发一次的事件 -->
</div>
<script type="text/javascript">
   var app = new Vue({
      el:'#app',
      data:{
         num:0
      },
      methods:{
         divClick(){
            console.log('divClick');
         },
         btnClick(){
            console.log('btnClick');
         },
         mySubmit(){
            console.log('mySubmit');
         },
         keyup(){
            console.log('press enter');
         },
         onlyOnce(){
            console.log('我只触发一次哦');
         }
      }
   });
</script>
复制代码

v-if

v-if 、v-else-if、v-else、

<div id="app">
   <h2 v-if="isShow">true</h2>
   <h2 v-else>false</h2>
   <!-- v-else与之前的兄弟元素的v-if或v-else-if配对 -->
   <h2 v-if="score>=90">优秀</h2>
   <h2 v-else-if="score>=80">良好</h2>
   <h2 v-else-if="score>=60">及格</h2>
   <h2 v-else>不及格</h2>
   <!-- v-if的消失是DOM从根本上消失(审查元素不存在) -->
   <input type="text" v-if="isShow" name="userName" key='asd'/>
   <input type="text" v-else="isShow" name="password" key='as' />
   <!-- Vue的底层特性,尽可能复用已经存在的元素,只更改有变化的地方 -->
   <!-- 两个文本框切换,第一个文本框的内容会依旧显示在第二个文本框中 -->
   <!-- 给两个文本框加上key属性,只有key属性相同时,它们才会被复用,否则重新创建 -->
   <button @click="isShow=!isShow">切换</button>
</div>
<script type="text/javascript">
   var app = new Vue({
      el:'#app',
      data:{
         isShow:true,
         score:50
      },
      methods:{

      }
   });
</script>
复制代码

与v-show的区别

  • v-if会从根本上直接删除或增加DOM ( 审查元素出现或消失 )
  • v-show只是给元素添加或删除一个行内样式display:none( 审查元素一直存在 )
  • 需要频繁切换的场景使用v-show节省性能
  • 一次性或者少量切换场景使用v-if

v-for

<div id="app">
   <ul>
      <li v-for="item in videos">{{item}}</li>
   </ul>
   <ul>
      <li v-for="(item,index) in videos">{{index+1}}、{{item}}</li>
   </ul>
   <!-- 数组遍历 -->
   <ul>
      <li v-for="value in person">{{value}}</li>
   </ul>
   <ul>
      <li v-for="(value,key) in person">{{key}}:{{value}}</li>
   </ul>
   <ul>
      <li v-for="(value,key,index) in person">{{index+1}}、{{key}}:{{value}}</li>
   </ul>
   <!-- 对象遍历 -->
</div>
<script type="text/javascript">
   var app = new Vue({
      el:'#app',
      data:{
         videos:['奥特曼','假面骑士','超级战队'],
         person:{
            name:'Zero-One',
            job:'Kamen Rider',
            color:'green'
         }
      },
      methods:{

      }
   });
</script>
复制代码

v-for绑定key属性

<div id="app">
   <ul>
      <li v-for="item in videos">{{item}}</li>
   </ul>
   <!-- 未绑定key值,当往数组中间插入数据时,会采用低效率方法,类似value[i+1]=value[i]循环 value[i]=newValue -->
   <ul>
      <li v-for="item in videos" :key='item'>{{item}}</li>
   </ul>
   <!-- 绑定key值,key的值一定要和item形成一一对应关系,不使用index的原因在于,插入数据时,index的值会改变,无法达到一一对应 -->
</div>
<script type="text/javascript">
   var app = new Vue({
      el:'#app',
      data:{
         videos:['奥特曼','假面骑士','超级战队'],
      },
      methods:{

      }
   });
</script>
复制代码

数组中的响应式方法

  • push() 数组尾部增加元素
  • pop() 数组尾部删除元素
  • shift() 数组头部删除元素
  • unshift() 数组头部增加元素
  • splice() 删除增加替代元素
  • sort() 排序
  • reverse() 顺序置换
  • 直接通过索引修改数组的值，是无法更新界面的

Vue内部方法：Vue.set(需要修改的对象, 位置索引, 修改后的值)

v-model

基本使用

<div id = "app">
   <input type="text" v-model="message" /><br>
   <!-- v-model双向数据绑定 -->
   <h2>{{message}}</h2>
   <!-- 随着输入框内容的改变而改变 -->
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下'
      }
   })
</script>
复制代码

底层原理

<input type="text" v-bind:value="message" v-on:input="message = $event.target.value"/>
复制代码

与radio表单元素结合使用

<div id = "app">
   <input type="radio" name="sex1" value="男"/>男
   <input type="radio" name="sex1" value="女"/>女<br>
   <input type="radio" v-model="sex2" value="男"/>男
   <input type="radio" v-model="sex2" value="女"/>女
   <!-- v-model在radio中表示选中的value -->
   <!-- 指定相同的v-model值，也可以实现选项互斥 -->
   <h2>选择的性别是：{{sex2}}</h2>
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         sex2:''
      }
   })
</script>
复制代码

与checkbox表单元素结合使用

单选

<div id = "app">
   <input type="checkbox" v-model="isSelected" />同意协议
   <!-- v-model在checkbox单选框使用中，表示选中的布尔值 -->
   <h2>选择的性别是：{{isSelected}}</h2>
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         isSelected:false//单选对应布尔值类型
      }
   })
</script>
复制代码

多选

<div id = "app">
   <input type="checkbox" value="电脑" v-model="hobbies" />电脑
   <input type="checkbox" value="手机" v-model="hobbies" />手机
   <input type="checkbox" value="游戏" v-model="hobbies" />游戏
   <input type="checkbox" value="篮球" v-model="hobbies" />篮球
   <!-- v-model在checkbox多选框使用中，表示选中的value的数组 -->
   <h2>选择的性别是：{{hobbies}}</h2>
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         hobbies:[]//多选对应数组类型
      }
   })
</script>
复制代码

与select表单元素结合使用

单选

<div id = "app">
   <select name="fruit" v-model="fruit">
      <option value="苹果" >苹果</option>
      <option value="香蕉" >香蕉</option>
      <option value="葡萄" >葡萄</option>
      <option value="雪梨" >雪梨</option>
   </select>
   <!-- v-model在select单选使用中，表示选中的value-->
   <h2>选择的水果是：{{fruit}}</h2>
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         fruit:'苹果'//单选对应字符串类型
      }
   })
</script>
复制代码

多选

<div id = "app">
   <select name="fruit" v-model="fruit" multiple="multiple">
      <option value="苹果" >苹果</option>
      <option value="香蕉" >香蕉</option>
      <option value="葡萄" >葡萄</option>
      <option value="雪梨" >雪梨</option>
   </select>
   <!-- v-model在select单选使用中，表示选中的value数组 crlt+左键 多选-->
   <h2>选择的水果是：{{fruit}}</h2>
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         fruit:[]//多选对应数组类型
      }
   })
</script>
复制代码

值绑定

<div id = "app">
   <label v-for="item in originHobbies" :for="item">
      <input type="checkbox" :id="item" :value="item" v-model="hobbies" />{{item}}
   </label>
   <!-- 值绑定，不要写死 -->
   <h2>选择的性别是：{{hobbies}}</h2>
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         hobbies:[],//用户选中数据
         originHobbies:['电脑','手机','游戏','篮球']//原始数据
      }
   })
</script>
复制代码

修饰符

  • lazy修饰符
    • 默认情况下，v-model是在input事件中同步输入框数据的
    • 也就是说，一旦数据发生了改变，data中的数据就会马上更新
    • lazy修饰符可以让数据在失去焦点或回车时才会更新
  • number修饰符
    • 默认情况下，在输入框中无论输入数字还是字母，都会被当做字符串类型处理
    • number修饰符可以输入框的内容自动转成数字类型
  • trim修饰符
    • 可以去除内容两边的空格
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4202
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3895
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3406
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3118
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3062
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2728
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2621
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云