第一章 Vue之代码基本结构、插值表达式、事件修饰符
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了第一章 Vue之代码基本结构、插值表达式、事件修饰符，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9037字，纯文字阅读大概需要13分钟。
内容图文
知识点：
1
、vue基本代码结构
2、插值表达式 v-cloak v-text v-html v- bind(缩写为:) v-on(缩写为:@) v-model v-for v-if v-sow
3、事件修饰符 ：.stop .prevent .capture .self .once
1、基本代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<!--将来new的Vue实例会控制这个元素中的所有内容-->
<!--View层:Vue实例控制的这个元素区域-->
<div id="app">
<!-- 插值表达式-->
<h1>{{msg}}</h1>
</div>
<script>
//2.创建一个vue实例//注意，当我们导入包之后，再浏览器内存中就多了一个Vue构造函数//我们new出来的这个vm对象，就是我们MVVM中的VM调度者var vm = new Vue({
el: ‘#app‘, //表示当前我们new的这个Vue实例，要控制页面上的哪个区域//这里的data就是MVVM中的M，专门用来保存页面所需的数据
data: { //data属性中存放的是el中要用到的数据
msg: ‘欢迎学习Vue‘ //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序//员不再手动操作Dom元素了 }
})
</script>
</body>
</html>
2、插值表达式v-cloak,v-html,v-text,v-on,v-bind等使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Vue不提倡我们操作Dom-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!--使用v-cloak能够解决插值表达式闪烁的问题，只会替换自己的占位符，不会将整个元素内容替换 -->
<!-- 插值表达式：{{变量}} -->
<p v-cloak>{{msg}}</p>
<!-- 默认v-text没有闪烁问题，但是会覆盖元素中原本的内容-->
<h2 v-text="msg">111</h2>
<!-- 默认v-text没有闪烁问题,且会解析html标签，但是会覆盖元素中原本的内容-->
<p v-html="msg2"></p>
<!--v-bind:是vue中提供的用于绑定属性的指令,且可以写js表达式-->
<input type="button" value="按钮" v-bind:title="mytitle+ ‘1222‘">
<input type="button" value="按钮" :title="mytitle+ ‘1222‘"> <!--v-bind简写版-->
<!-- Vue提供了v-on绑定事件：click ,mouseover -->
<input type="button" value="按钮" :title="mytitle+ ‘1222‘" v-on:click="show">
<input type="button" value="按钮" :title="mytitle+ ‘1222‘" @click="show"> <!--v-on简写版-->
</div>
<script>
new Vue({
el:‘#app‘,
data:{
msg:123,
msg2:‘<h1>我是一个H1</h1>‘,
mytitle:‘我是标题‘
},
methods:{//这个methods属性中定义了当前Vue实例所有可用的方法//定义方法
show:function(){
alert("v-on使用")
}
}
})
</script>
</body>
</html>
3、v-model双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
<!--插值表达式-->
<h1>{{msg}}</h1>
<!-- v-bind 只能实现数据的单项绑定，从M到V，无法实现数据的双向绑定 -->
<input type="text" :value="msg">
<!-- v-model 实现数据的双向绑定，从M到V，也可从V到M -->
<input type="text" v-model="msg">
</div>
<script>
//2.创建一个vue实例var vm = new Vue({
el: ‘#app‘, //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
data: { //data属性中存放的是el中要用到的数据
msg: ‘欢迎学习Vue‘ //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序 }
})
</script>
</body>
</html>
4、v-for循环指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
<!--插值表达式-->
<h1>{{msg}}</h1>
<!-- 遍历普通数组-->
<p v-for="(item,id) in list">值为：{{item}},索引为：{{id}}</p>
<!-- 遍历字典,注意属性key的使用，且key必须为数字或者字符串-->
<p v-for="user in listDic" :key="user.id">值为：{{user.id}},索引为：{{user.userName}}</p>
<!-- 遍历对象,除了key,value,还有一个索引-->
<p v-for="(value,key,i) in userObj">索引：{{i}},值：{{value}}，键：{{key}}</p>
<!-- 迭代数字-->
<p v-for="count in 2">循环次数为：{{count}}</p>
</div>
<script>
//2.创建一个vue实例var vm = new Vue({
el: ‘#app‘, //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
data: { //data属性中存放的是el中要用到的数据
list:[2,3,4,5],
listDic:[
{id:1,userName:"yang"},
{id:2,userName:"jie"},
],
userObj:{
id :1,
name:‘yangaaa‘,
gender:‘男‘
},
msg: ‘欢迎学习Vue‘ //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序 }
})
</script>
</body>
</html>
5、v-show/v-if指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
<!--插值表达式-->
<h1>{{msg}}</h1>
<input type="button" value="taggle" @click="taggle">
<!-- v-if的特点，每次都会重新删除或者创建元素，耗性能-->
<!-- v-show的特点，每次不会重新进行Dom元素的删除和创建，只会切换元素display:none 样式-->
<h1 v-if="flag">v-if</h1>
<h1 v-show="flag">v-show</h1>
</div>
<script>
//2.创建一个vue实例var vm = new Vue({
el: ‘#app‘, //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
data: { //data属性中存放的是el中要用到的数据
flag:true,
msg: ‘欢迎学习Vue‘ //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序 },methods:{
taggle(){
this.flag = !this.flag
}
}
})
</script>
</body>
</html>
6、事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<style>
.inner{
height: 150px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<!--
@click.stop = "btnHandler" stop 阻止冒泡
@click.prevent="linkClick" prevent阻止默认行为
@click.capture="divHandler" capture 捕获机制
@click.self="divHandler" self 只有点击当前元素，才会触发
@click.prevent.once="divHandler" once只触发一次事件
-->
<div class="inner" @click="divHandler">
<input type="button" value="点击" @click.stop="btnHandler">
</div>
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
<div class="inner" @click.capture="divHandler">
<input type="button" value="点击" @click.stop="btnHandler">
</div>
<div class="inner" @click.self="divHandler">
<input type="button" value="点击" @click.stop="btnHandler">
</div>
<div class="inner" @click.prevent.once="divHandler">
<input type="button" value="点击" @click.stop="btnHandler">
</div>
</div>
<script>
//2.创建一个vue实例var vm = new Vue({
el: ‘#app‘, //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
data: { //data属性中存放的是el中要用到的数据
msg: ‘欢迎学习Vue‘ //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序 },
methods:{
divHandler(){
console.log("div 触发的事件")
},
btnHandler(){
console.log("button 点击事件")
},
linkClick(){
console.log("百度一下")
}
}
})
</script>
</body>
</html>
7、跑马灯程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="浪起来" @click="start">
<input type="button" value="低调" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
//注意：在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过//this.属性名 或this.方法名来进行访问 ，这里的this,就表示我们new除开的vm实例对象new Vue({
el:‘#app‘,
data:{
msg:‘猥琐发育，别浪~~！‘,
intervalId:null//定义定时器id },
methods:{
//1、绑定点击事件 v-on//2、字符串截取//3、定时器 start(){
console.log(this.msg)
//记录并开启定时器if(this.intervalId != null) returnthis.intervalId = setInterval( () => {
//获取头字符var s = this.msg.substring(0,1)
//获取除头外所有字符var e = this.msg.substring(1)
this.msg = e + s
},400)
//注意：vm实例会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新//的数据，从data上同步到页面中去 },
stop(){
//清除定时器
clearInterval(this.intervalId)
this.intervalId = null;
}
}
})
</script>
</body>
</html>
8、计算器程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="cal">
<input type="text" v-model="result">
</div>
<script>
//2.创建一个vue实例var vm = new Vue({
el: ‘#app‘, //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
data: { //data属性中存放的是el中要用到的数据
n1:0,
n2:0,
result:0,
opt:‘+‘,
msg: ‘欢迎学习Vue‘ //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序 },
methods:{
cal(){
//推荐这种写法switch (this.opt) {
case "+":
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case "-":
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case "*":
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case "/":
this.result = parseInt(this.n1) / parseInt(this.n2)
break;
}
//偷懒写法，不建议// var codeStr = ‘ parseInt(this.n1) ‘ + this.opt +‘ parseInt(this.n2)‘// this.result = eval(codeStr) }
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/ywjfx/p/12538663.html
内容总结
以上是互联网集市为您收集整理的第一章 Vue之代码基本结构、插值表达式、事件修饰符全部内容，希望文章能够帮你解决第一章 Vue之代码基本结构、插值表达式、事件修饰符所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】