Vue基本使用、模板语法(插值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构)

孤峰孤峰家 2023-08-08 141人阅读

Vue

Vue14年发布、16年2.0版本、 
特点():易用、灵活、高效 
是一套用于构建用户界面的渐进式框架

<title>你好世界</title></head><body><div id="app"><div>{{msg}}</div><div>{{1+2}}</div><div>{{msg+'-----'+1+2}}</div></div></body><script src="js/vue.js"></script><script>/*vue基本步骤1、提供标签用于填充数据2、引入库文件3、使用vue语法做功能4、把vue提供的库文件填充到标签中*/var vm= new Vue({//el 元素挂载位置//data数据模型(值是一个对象)//{{}}叫插值表达式、填充数据、支持简单计算el:'#app',data:{msg:'hello Vue'}})</script>

指令

本质就是自定义属性Vue中指令都是以 v- 开头

v-cloak

v-html、v-text、v-pre、v-once

v-text ---- 填充纯文本、没有闪动问题 
v-html ---- 填充html片段、会解析标签(存在安全问题、第三方数据不推荐同)v-pre ---- 填充元素信息 不编译v-once ---- 只编译一次

双向数据绑定

双向数据绑定 
- 当数据发生变化的时候，视图也就发生变化(数据改变页面) 
- 当视图发生变化的时候，数据也会跟着同步变化(页面影响数据)

v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用v-model本质:通过V-bind去绑定属性值、热后通过input事件去处理值的变化<div id='app'><div>{{msg}}</div><input type="text" v-bind:value='msg' @input='handle'><input type="text" v-bind:value='msg' @input='msg=$event.target.value'><input type="text" v-model='msg'></div><script type="text/javascript" src="js/vue.js"></script><script>/*v-model指令的本质*/var vm = new Vue({el: '#app',data: {msg: 'hello'},methods: {handle: function (event) {//输入域中较新的数据覆盖原来的数据this.msg = event.target.value;}}})</script>

mvvm

m:模型:数据 
v:视图:元素 
vm:视图模型:控制逻辑view 通过监听器影响(Listeners) modelmodel 通过数据劫持(Object.definedProperty)改变 view

例如: <button v-on:click='handle1'>点击1</button>(默认传递$event)<button v-on:click='handle2(123, 456, $event)'>点击2</button>(事件对象的名称必须是$event、顺序要与形参对应)

事件修饰符 Vue 不推荐我们操作DOM 、为此Vue.js 为 v-on 提供了事件修饰符修饰符是由点开头的指令后缀来表示的

<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 即阻止冒泡也阻止默认事件 --><a v-on:click.stop.prevent="doThat"></a><!-- 只当在 event.target 是当前元素自身时触发处理函数 --> 
<!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div>使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --><input v-on:keyup.13="submit"><!-- -当点击enter 时调用 `vm.submit()` --><input v-on:keyup.enter="submit"><!--当点击enter或者space时 时调用 `vm.alertMe()` --><input type="text" v-on:keyup.enter.space="alertMe" >常用的按键修饰符.enter => enter键 
.tab => tab键.delete (捕获“删除”和“退格”按键) => 删除键.esc => 取消键.space => 空格键 
.up => 上.down => 下.left => 左.right => 右<script>var vm = new Vue({el:"#app",methods: {submit:function(){},alertMe:function(){},}})</script>

//创建自定义修饰符Vue.config.keyCodes.hcj=13;//使用自定义修饰符、监听是否按下13对应的键@keyup.hcj='handle($event)'自定义按键修饰符名字是自己定义的、但是值必须是按键中对应的event.keyCode值 <img v-bind:src="i**geSrc"><img :src="i**geSrc"> //:绑定对象方式通过v-bind来绑定class属性、值通过对象的方法控制类名是否显示、控制多个类名、添加多个键值对、用逗号隔开//在页面中的动态绑定对象<div v-bind:class='obj'>测试样式</div>//在data中的给对象的属性设置布尔值、用于控制显示隐藏obj:{ active: true, error:true,}//在methods中控制isActive的值在true和false之间切换this.obj.active= !this.obj.activethis.obj.error=!this.obj.error;

v-bind:绑定数组

<!-- 数组绑定样式 --><div v-bind:class='[activeClass,errorClass]'>测试样式</div> 
与对象的区别 
在方法中操作对应的值、移除数据中对应的值数组值是实际类名、可以加多个属性//在数据中样式绑定data: {activeClass:'active',errorClass:'error'},//在方法中操作对应的值methods:{handle:function(){this.activeClass='',this.errorClass=''}}推荐使用数据方式定义类、方便使用数组相关API

1、对象绑定与数组绑定可以结合使用<div v-bind:class='[activeClass,errorClass,{test:isTast}]'>测试样式</div>2、class的值可以简化操作//2.1数组简化<div v-bind:class='arrClasses'></div>//data中arrClasses: ['active', 'error'],//2.2对象简化<div v-bind:class='objClasses'></div>//dataobjClasses: { active: true, error: true,}3、基础样式不会被覆盖 <div class="base" v-bind:class='objClasses'></div>绑定对象和绑定数组的区别- 绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据 - 绑定数组的时候数组里面存的是data 中的数据 <div v-bind:style="styleObject">绑定样式对象</div>'<div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div><div v-bind:style="[styleObj1, styleObj2]"></div><script>new Vue({el: '#app',data: {styleObject: {color: 'green',fontSize: '30px',background:'red'}，activeColor: 'green',fontSize: "30px"},styleObj1: {color: 'red'},styleObj2: {fontSize: '30px'}</script>

分支结构

v-if 使用场景

1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素

2- 进行两个视图之间的切换

v-show:控制元素的样式是否显示：display:none

 <div id="app"><div v-if='score>=90'>优秀</div><div v-else-if='score<90&&score>=80'>良好</div><div v-else-if='score<80&&score>=60'>一般</div><div v-else>比较差的</div><div v-show='flag'>测试v-show</div><button @click='handle'>点击</button></div></body><script src="js/vue.js"></script><script>var vm=new Vue({el:'#app',data:{score:90,flag:false},methods:{handle:function(){//取反this.flag=!this.flag; }}})</script>v-show 和 v-if的区别- v-show本质就是标签display设置为none，控制隐藏- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。- v-if是动态的向DOM树内添加或者删除DOM元素- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件v-show :控制元素样式(频繁显示隐藏时使用) 
v-if :控制元素(渲染后变化比较少是用)

循环结构

遍历数组 v-for：用于循环的数组里面的值可以是对象，也可以是普通元素

<ul id="example-1"><!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--><li v-for="item in items">{{ item.message }}</li> </ul><script>new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]，} 
})</script>

不推荐同时使用 v-if 和 v-for当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

遍历对象

 <!-- 循环结构-遍历对象v 代表 对象的valuek 代表对象的 键 i 代表索引 ---> <div v-for='(v,k,i) in obj' v-if='v==13'>{{v + '---' + k + '---' + i}}</div><script>new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]，obj: {uname: 'zhangsan',age: 13,gender: 'fe**le'}} 
})</script>

key 的作用

- key来给每个节点做一个唯一标识- key的作用主要是为了高效的更新虚拟DOM<ul><li v-for="item in items" :key="item.id">...</li></ul>

选项卡案例

1、在data中定义数据

2、在页面中遍历对应数据

3、通过点击事件接收当前遍历项的索引号

4、在data中创建一个变量用于接收准备接收index的值

5、在事件中把index的值赋值给变量this.current=index

<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.tab ul {overflow: hidden;padding: 0;**rgin: 0;}.tab ul li {box-sizing: border-box;padding: 0;float: left;width: 100px;height: 45px;line-height: 45px;list-style: none;text-align: center;border-top: 1px solid blue;border-right: 1px solid blue;cursor: pointer;}.tab ul li:first-child {border-left: 1px solid blue;}.tab ul li.active {background-color: orange;}.tab div {width: 500px;height: 300px;display: none;text-align: center;font-size: 30px;line-height: 300px;border: 1px solid blue;border-top: 0px;}.tab div.current {display: block;}</style></head><body><div id="app"><div class="tab"><ul><li v-for='(item,index) in fruits' :class='allIndex===index?"active":""' @click='hendle(index)'>{{item.name}}</li></ul><div v-for='(item,index) in fruits' :class='allIndex===index?"current":""' :key='index'><img :src='item.img'></div></div></div></body><script src="js/vue.js"></script><script>var vm = new Vue({el: '#app',data: {//定义一个变量、用于接收当前项的index值allIndex: 0,//定义水果相关的数据fruits: [{ name: 'apple', img: 'img/apple.png' },{ name: 'orange', img: 'img/orange.png' },{ name: 'lemon', img: 'img/lemon.png' }],},methods: {hendle(index) {//点击后接收index的值this.allIndex = index;}}})</script>

文档下载

Vue基本使用、模板语法(插值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构).doc

很赞哦！ ()

转载：感谢您阅览，转载请注明文章出处“来源从小爱孤峰知识网：一个分享知识和生活随笔记录的知识小站”。

链接：Vue基本使用、模板语法(插值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构)http://www.gufeng7.com/niaolang/1837.html

联系：如果侵犯了你的权益请来信告知我们删除。邮箱：119882116@qq.com

标签：

上一篇： vue的组件化开发（组件通信，插槽，递归组件）

下一篇: CSS选择符总结

Vue基本使用、模板语法(插值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构)

猜你喜欢

此生的劫

Windows 11、10、8、7中的固态硬盘只读模式怎么解决？

如何在不格式化磁盘的情况下对Win11、Win7分区？

史上**全 Vue 前端代码风格指南