写文章
  1. 码农之家首页
  2. vue教程

Vue2基础

吐槽君 • • vue教程 • 阅读 39

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

详细解释

  • el:

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

  • data:

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

  • 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修饰符
    • 可以去除内容两边的空格
赞 (0)
吐槽君吐槽君
0 0
上一篇 2021年5月26日 下午5:45
下一篇 2021年5月26日 下午6:00

相关推荐

发表回复

登录后才能评论