v-bind (:)
用来绑定属性的指令 可以把值当成变量 去拼接字符串
一般简写成 :
<div id="app">
<input type="button" value="按钮" :title="myTitle+'abc'"/>
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
myTitle:'123131'
}
})
</script>
v-cloak
能够解决传值的时候出现闪烁的问题 样式是display:none
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
v-for
循环数组 -- key只能使用number获取string 使用v-bind属性绑定形式来指定key的值
<div id="app">
<!-- 使用方法1 直接循环出来-->
<p v-for="item in list">{{item}}</p>
<!-- 使用方法2 含有索引值-->
<p v-for="(item,index) in list">索引值:{{index}}---键值{{item}}</p>
<!-- 使用方法3 循环对象数组-->
<p v-for="item in text">{{item.id}}---{{item.name}}</p>
<!-- 使用方法4 循环对象数组加索引-->
<p v-for="(item,index) in text">{{item.id}}---{{item.name}}</p>
<!-- 使用方法5 循环对象-->
<p v-for="(val,key,index) in user">{{val}}-----{{key}} ----{{index}}</p>
<!-- 使用方法6 迭代数字-->
<p v-for="count in 10">{{count}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6],
text:[
{'id':'1','name':'zzs1'},
{'id':'2','name':'zzs2'},
{'id':'3','name':'zzs3'},
{'id':'4','name':'zzs4'},
],
user:{
id:1,
name:'zzs',
gender:'男'
}
}
})
</script>
v-html
过滤掉html代码 如下 显示的是hello 过滤掉h1标签
<div id="app">
<h4 v-html="msg2"></h4>
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123',
msg2:'<h1>hello</h1>'
}
})
</script>
v-if v-show v-else
判断属性进行显示(切换)
<div id="app">
<input type="button" value="更换" @click="change">
v-if是删除和创建元素
<h3 v-if="flage">v-if控制</h3>
v-show是隐藏元素
<h3 v-show="flage">v-show控制</h3>
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flage:false
},
methods:{
change(){
this.flage = !this.flage
}
}
})
</script>
v-model
可以实现 表单元素和model中数据的双向绑定
只能用在表单元素中 例如 input select checkbox radio text button address email textarea 等
<div id="app">
<h4>{{msg}}</h4>
<!-- v-bind 只能实现数据的单向绑定,从M自动绑定到V,无法实现双向绑定 -->
<input type="text":value="msg"><br>
<!-- v-model 可以实现 表单元素和model中数据的双向绑定
只能用在表单元素中 例如 input select checkbox radio text button address email textarea 等-->
<input type="text" v-model="msg">
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'加上好的金卡和奥圣诞节哈斯卡觉得很奥圣诞节'
}
})
</script>
v-on(@)
用来绑定事件 缩写是 @
<div id="app">
<!-- v-on: 用来绑定事件 缩写是 @ -->
<input type="button" value="按钮" @click="show"/>
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
},
//methods属性中定义了当前vue的所有方法
methods:{
show(){
alert('hello');
}
}
})
</script>
v-text
<div id="app">
<!-- v-cloak能够解决传值的时候出现闪烁的问题 样式是display:none -->
<p v-cloak>{{msg}}</p>
<!-- v-text默认没有闪烁问题 会覆盖元素中的内容 v-cloak只会替换自己的占位符,不会把元素清空-->
<h4 v-text="msg"></h4>
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
时间修饰符
使用.stop来阻止后续事件冒泡 否则一般是先执行按钮事件 在执行外层div事件
.prevent来阻止默认行为
.capture 实现捕获触发事件机制 导致先执行div再执行btn
.self实现只有点击当前元素的时候,才会触发事件处理函数
.once只触发一次事件函数
.stop 和 .self 区别: .self只会阻止自身的冒泡行为触发,不会阻止真正的冒泡行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
.inner{
height: 150px;
background-color: darkcyan;
}
.outer{
padding: 40px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用.stop来阻止后续事件冒泡 否则一般是先执行按钮事件 在执行外层div事件
<div class="inner" @click="divhandler">
<input type="button" value="戳" @click.stop="btnhandler" >
</div> -->
<!-- 使用.prevent来阻止默认行为
<a href="http://www.baidu.com" @click.prevent="linkclick">有问题找百度</a> -->
<!-- 使用.capture 实现捕获触发事件机制 导致先执行div再执行btn
<div class="inner" @click.capture="divhandler">
<input type="button" value="戳" @click="btnhandler" >
</div> -->
<!-- 使用.self实现只有点击当前元素的时候,才会触发事件处理函数
<div class="inner" @click.self="divhandler">
<input type="button" value="戳" @click.stop="btnhandler" >
</div> -->
<!-- 使用.once只触发一次事件函数
<a href="http://www.baidu.com" @click.once="linkclick">有问题找百度</a> -->
<!-- .stop 和 .self 区别 -->
<!-- .self只会阻止自身的冒泡行为触发,不会阻止真正的冒泡行为 -->
<div class="outer" @click="div2handler">
<div class="inner" @click.self="divhandler">
<input type="button" value="戳" @click="btnhandler" >
</div>
</div>
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
divhandler(){
console.log('div')
},
btnhandler(){
console.log('btn')
},
linkclick(){
console.log('a')
},
div2handler(){
console.log('div2')
}
}
})
</script>
</body>
</html>
在Vue中使用样式class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red{
color:red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic
}
.active{
letter-spacing: 0.5em
}
</style>
</head>
<body>
<div id="app">
<!-- 第一种使用方法 -->
<h1 :class="['italic','thin']">djaj奥圣诞节就爱看来得及啊</h1>
<!-- 第二种使用方法 数组中使用三元表达式 -->
<h1 :class="['italic','thin',flag?'active':'']">djaj奥圣诞节就爱看来得及啊</h1>
<!-- 第三种使用方法 数组中使用对象 进行调用data -->
<h1 :class="['italic','thin',{'active':flag}]">djaj奥圣诞节就爱看来得及啊</h1>
<!-- 第四种使用方法 直接使用对象-->
<h1 :class="{red:true,thin:true,active:false}">djaj奥圣诞节就爱看来得及啊</h1>
<!-- 第四种使用方法的优化 数据绑定的原理-->
<h1 :class="pig">djaj奥圣诞节就爱看来得及啊</h1>
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true,
pig:{red:true,thin:true,active:false}
}
})
</script>
</body>
</html>
在Vue中使用内联样式style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<!-- 第一种使用方法 -->
<h1 :style="{'color':'red','font-weight':'200'}">哈萨克较好的金卡 </h1>
<!-- 第一种使用方法优化 -->
<h1 :style="style">哈萨克较好的金卡 </h1>
<!-- 第一种使用方法优化之后的拓展 -->
<h1 :style="[style,color] ">哈萨克较好的金卡 </h1>
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
style:{'color':'red','font-weight':'200'},
color:{'font-size':'20px','font-style':'微软雅黑'}
}
})
</script>
</body>
</html>
跑马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="走" @click="run"/>
<input type="button" value="停" @click="stop"/>
<h4>{{msg}}</h4>
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'猥琐发育,别浪~~',
interval:null
},
methods:{
run(){
//如果想要获取data里面的值 或者 想要调用methods下面的方法
// 必须通过this.数据属性名 或者this.方法名进行访问 这里的this.代表new出来的实例
if(this.interval != null) return
this.interval = setInterval(()=>{
//获取msg的第一个字符
var start = this.msg.substring(0,1);
//获取msg的后面所有字符
var end = this.msg.substring(1);
//重新拼接字符 复制到msg
this.msg = end + start
}, 100);
},
stop(){
clearInterval(this.interval);
//每当清除定时器之后,把interval等于null
this.interval = null
}
}
})
</script>
</body>
</html>
Vue_简易计算器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script src="./lib/Vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
result:0,
opt:'+'
},
methods:{
calc(){
// 方法一:
// 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 code = 'parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
// eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
this.result = eval(code)
}
}
})
</script>
</body>
</html>
刚开始系统的学习接触vue,写的不好请多多指教