第一章 Vue之代码基本结构、插值表达式、事件修饰符
知识点： 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) return
this.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>
本文来自博客园，作者：小白啊小白，Fighting，转载请注明原文链接：https://www.cnblogs.com/ywjfx/p/12538663.html
浙公网安备 33010602011771号