2020-10-21 Vue基础入门基础应用

it2025-03-04 32

Vue的基本使用

1.首先需要引入Vue.js文件 2.在html的dom元素中选取一个挂载点来挂载Vue实例对象 3.定Vue对象，通过el属性来指定挂载点

Vue的语法

插值表达式

使用两层花括号{{ 变量或表达式、函数 }}

<div id="app" > {{msg}}  {{msg+'aaa'}}  {{formatFun(msg)}}  </div> <script> var myVue = new Vue({ el:'#app', data:{ msg:'hello World!', }, methods:{ formatFun:function(val){ if(val.length>5){ return val.substring(0,5); }else{ return val; } } }) </script>

插值表达式有个缺点就是在Vue渲染页面之前会把源代码显示出来，这样会使得页面显示效果不好

v-text文本渲染

v-text：作用单纯，就是用来渲染文本的,与jquery的text()方法类似，会把变量值赋值，不会将html标签解析成dom元素。与{{}}插值表达式类似，会把数据渲染成纯文本。

v-html文本渲染

类似 jquery的 html()方法，在渲染文本的时候，如果含有标签会解析成dom元素。

<div id="app" > <div v-text="htmlstr" ></div>  <div v-html="htmlstr" ></div>  <div>{{htmlstr}}</div>  </div> <script> var myVue = new Vue({ el:'#app', data:{ htmlstr:'<h2>hello world!</h2> ', }, }) </script>

v-cloak处理插值表达式闪烁

v-vloak以属性的方式定义在元素身上，当vue初始化完毕要渲染的时候会自动取出该标签，利用这个特性可以解决插值表达式的缺陷在需要在编译之前不想要插值表达式显示的标签下添加 v-cloak属性，然后css设置为含有v-cloak的元素display:none; 然后Vue渲染数据之后会将v-cloak属性取出，这样就解决了插值表达式闪烁的问题

事件on绑定

事件on绑定 v-on:事件名=“函数名” 可以简写为 @事件名=“函数名” 常用事件名 v-on:click 单击 v-on:dblclick 双击 v-on:keydown v-on:keyup 按键事件 v-on:mouseover v-on:mouseout 鼠标移动事件 v-on:submit 提交事件

阻止冒泡: 事件名.stop 本元素响应完该事件后，该时间不继续冒泡给父元素阻止默认事件: 事件名.prevent 阻止该元素的默认行为

条件语句

v-if v-else

如果if的条件为true，则显示if的标签内容，否则显示else的标签内容可以应用在根据记录的类型不同来展示不同的标签或者其他元素多分支

v-if v-else-if v-else

一般可以应用在自定义tab标签页时使用，点击不同的切换按钮可以改变值进而控制显示不同的模块

注意当能拿到对象flg时并且 flg不为boolean类型的false时都会判断为true 只有flg为boolean类型的false才会判断flg为false

<div v-if="flg" > flg是true </div>  <div v-else >flg不是true</div> <div v-if="val==1" >val=1</div> <div v-else-if="val==2" >val=2</div> <div v-else-if="val==3" >val=3</div> <div v-else >val!=1 2 3</div>

v-show

值为true，则显示标签内容，为false，则不显示。

<div v-show="flg" > flg可以显示</div>

v-show 与v-if的区别

v-if与v-show都可以实现dom元素的显与隐藏，但是v-if是通过后面的boolean值来判断是添加该dom元素，而v-show是通过控制display样式是否为none来使元素显示隐藏，当v-if为false时，html代码中不会有该dom元素，如果是通过v-show的话在控制台式可以找到该dom元素，从安全上来讲用v-if合适。

v-bind 用于动态设置标签的属性值

v-bind:属性名=“属性值”

v-bind:class的用法：

v-bind:class=“data中的变量” v-bind:class="[class1,class2,classn]" 动态设置多个类 v-bind:class="{classname:flg,classname2,flg2}" 其中classname表示类名 flg是布尔类型，表示是否添加该类，true设置，false不设置。

v-bind:style的用法

v-bind:style="{stylename:value}" v-bind:style="[styleobject1,styleobject2,styleobject3]"

v-bind的缩写形式，即将v-bind省略

比如：v-bind:class 可缩写为:class v-bind:style 可以缩写为:style v-once表示只渲染一次，即使变量的数据更新了，页面上也不再变化 v-pre表示该元素跳过vue的编译，里面的插值表达式原样输出（注意：如果有html标签，则html标签会生效）

通过动态设置class或者style可以实现切换菜单项时修改不同的样式。也可以死通过v-bind来动态设置dom元素其他的属性，vue是动态监听的，当vue改变的实例对象中的数据，视图也会重新进行渲染，不需要再去手动修改dom元素的属性。

如果判断的逻辑简单可以通过上面的三目运算来控制属性的值，如果判断的逻辑复杂是可以通过函数来控制属性

<div id="app"> <span @click="handleMenu(-1)" :style="formatClass(-1)" >menu-1</span> <span @click="handleMenu(1)" :style="formatClass(1)" >menu1</span> <span @click="handleMenu(5)" :style="formatClass(5)" >menu5</span> </div> <script> var myVue = new Vue({ el:'#app', data:{ msg:'hello world!', flg:false, val:0, index:1, }, methods:{ handleMenu:function (val) { this.index = val; }, formatClass:function (val) { if (val<0){ return "width:20px;" }else if(val>=0&&val<=5){ return "width:30px;"; }else if(val>5){ return "width:50px;"; } } } }) </script>

v-once

数据只渲染一次，渲染完成之后变为静态数据不再进行变化

v-pre

数据不会进行渲染,直接进行输出

v- for遍历数组和对象

v-for 遍历数组

可以遍历数组元素，(value,index) in list value指当前遍历的数组对象就像arr[i],index就是当前面遍历元素在数组中的索引和for循环一样，讲数组的所有元素遍历出来，index是当前对象在数组中的索引，也可以直接 value in list，不写index，

注意：

在使用element-ui、antd 等组件时使用v-for 要给遍历元素的添加唯一key值来作为标识，否则会报错因为没有唯一标识值来绑定v-for 遍历的元素，在对遍历的元素进行增加和删除时可能会出现问题。因此在v-for遍历集合元素时如果考虑添加和删除时最好绑定唯一的值为 key属性来作为区分。

v-for 遍历对象

v-for不仅仅可以遍历集合元素，也可以遍历对象的属性，(value,name,index) in obj 就像 js中的 for(var attr in obj) 一样，可以将对象的属性都遍历出来，此时 name就是指对象的属性名，value是该对象当前属性值,index是当前属性的索引。

v-for遍历数字

v-for也可以直接遍历数字，num in 5,这样就表示num从1遍历到5。

<div id="app" > <ul>  <li v-for="(item,index) in list">  <p :data-type="item.id">{{item.name}}</p> <div @click='func(item.age)'>{{item.age}}</div>  <div >{{index}}</div>  </li> </ul>  <p v-for="(value,name,index) in obj" > {{index+':'+name+':'+value}}</p>   <ul> <li v-for="num in 6" >{{num}}</li> </ul>  </div> <script> var myVue = new Vue({ el:'#app', data:{ list:[ {id:'1001',name:'张三',age:12}, {id:'1002',name:'李四',age:13}], obj:{name:'aaa',sex:'male',dept:'d01'}, } }) </script> 注意 Vue对象对于data对象里所管理的数据都是动态监听的，如果对数组进行添加或者删除元素时，我们v-for生成的元素也会随之变化，当时有时候我们在对数组元素进行push之后，然后去操作新生成的dom元素有可能拿不到，此时就需要用到 $nextTick()方法，详情就参考我的博客 [Vue在监听到数据改变或者dom元素渲染完之后执行的回调函数](https://mp.csdn.net/console/editor/html/108163485)

Vue 通过监听 vue data对象中的数组对象的pop、slice、push等操作数组元素的方法来实现动态监听数组元素, 当数组元素进添加、删除、修改数组元素时,Vue就会监听到这些方法，从而对视图中的dom元素进行重新渲染，js代码是异步的，他是多行代码同时执行，所以有时候在v-for的数组元素中添加新的元素时，去操作页面新添加dom元素有时会报错该元素 undefined，所以我们需要等待dom元素渲染完成之后才可以去操作新添加的dom元素。此时就需要使用 dom元素渲染完成之后的回调函数。

<div id="app" > <ul> <li v-for="item in list" :id="item.id" > {{item.name}} </li> </ul> </div> <script> var myVue = new Vue({ el:'#app', data:{ list:[{id:'1001',name:'a'}, {id:'1002',name:'b'}, {id:'1003',name:'c'}], }, methods:{ /*对list添加id为1004的元素时，用jquery的方法去取id为1004的文本内容，第一次拿不到，当在Vue dom元素渲染完成之后的回调方法中再次取值时就可以拿到了。*/ addItem:function () { this.list.push({id:'1004',name:'d'}); console.log($('#1004').text()); this.$nextTick(function () { console.log("v-for dom元素已经渲染完成"); console.log($('#1004').text()); }) } } }) </script>

v-model 双向数据绑定

v-model 作用

v-model可以在表单元素上实现双向数据绑定，即表单元素的值改变后，绑定的变量的插值表达式的值也跟着改变，反过来也同样的道理。

v-model 可以绑定的元素

input 、 select 、 textarea 、组件。

<input type="text" model="val" > <script> var myVue = new Vue({ el:'#app', data:{ val:0, }, methods:{ func1:function () { this.val++; }, } }) /* 当在文本框中改变值时，Vue的data对象中的值也会随之变化，当触发fun1函数改变 val的值时，在文本框中也会改变 */ </script> V-model 修饰符的作用 .lazy - 取代 input 监听 change 事件

双向数据绑定应该是通过input事件来同步数据，这样在输入时就会一直触发，使用 .lazy之后就会通过change事件来同步数据，这样只会失去焦点或者回车事件时才会比较值是否改变来同步数据，提高了性能。

.trim - 自动将输入的内容首尾空格去掉

v-model.trim就是用来清除首尾多余的空格的，当然如果是密码等输入框，请不要加此修饰，有些用户会用空格做密码。

.number - 自动将输入的字符串转为数字

正常在input输入框中输入的数字也是被转换为字符串的，如果我们需要的是输入框的数字类型的话，就可以加上 .number修饰符，这样我们拿到的值就被转换成了number类型，也可以通过js方法 parseInt来进行手动转换。

最新回复(0)