入门练习
<div id="app">
<p>{{msg}}</p>
<!-- v-moddel只能绑定表单控件,实现双向绑定 -->
<input type="text" v-model="msg">
</div>
<script src="./js/vue.js"></script>
<script>
//创建vue实例 --mvvm中的vm viewmodel
var vm=new Vue({
el : '#app',//挂载元素，当前vue实例控制区域
data:{//当前vue实例的数据，--mvvm中的m
msg:'hello Vue!!!'
}
})
</script>
常用指令
v-cloak 处理数据渲染时，因网速过慢，导致用户看家类似{{msg}}的数据
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
'msg':'测试信息'
}
})
</script>
v-text：是将数据当做文本来解析，与差值表达式{{}}效果一样
v-html:是将数据当做html解析，数据中的标签会被识别
<div id="app">
<p v-text="msg"></p>
<p v-html="msg"></p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
'msg':'测试信息'
}
})
</script>
v-bind 绑定标签属性，用时需后面加上 ：然后接属性名（ v-bind:tytle="title" ）也可以简写为 :tytle="title"
<div id="app">
<p v-html="msg" v-bind:tytle="title"></p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg:"测试信息",
title:'绑定参数'
}
})
</script>
v-on绑定事件用法如：（v-on:click单击事件，可以简写为 @click）
<div id="app">
<button v-on:click="shoenum">按钮</button>
<button @click="shoenum2">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
shoenum (){
console.log(1);
},
shoenum2 (){
console.log(2);
}
}
})
</script>
跑马灯练习
<!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>
</head>
<body>
<div id="app">
<p v-html="msg"></p>
<button @click="lang">浪起来</button>
<button @click="ting()">别浪</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "猥琐发育别浪~~~~~"
},
methods: {
lang() {
// 防止定时器冲突
if(this.intervalId!=null){
return;
}
//操作msg
// console.log(this.msg);
// 蓝不打表达式
this.intervalId = setInterval(()=> {
var fist = this.msg.substring(0, 1);
var rest = this.msg.substring(1);
this.msg = rest+fist;
console.log(this.msg);
}, 1000)
},
ting(){
clearInterval(this.intervalId);
this.intervalId=null;
}
},
})
</script>
</body>
</html>
事件修饰符：
prevent取消默认事件stop 阻止事件冒泡capture 捕获事件处理事件由外向内（当有capture时stop就不起作用了）self 会使标签必须是直接点击才能触发once 只生效一次
<!-- <div id="app" @click.capture="showBoxInfo"> -->
<!-- self 直接点击当前元素才触发-->
<div id="app" @click.self="showBoxInfo">
<!-- prevent 阻止默认事件 -->
<a href="https://www.baidu.com" @click.prevent="showInfo">GO Baidu</a>
<!-- stop 阻止事件冒泡 -->
<button @click.stop="showBtnInfo">阻止冒泡</button>
<!-- once只生效一次 -->
<button @click.once="showBtnInfo">self</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
showInfo() {
console.log("测试信息");
},
showbuInfo() {
console.log("按钮信息");
},
showboxInfo() {
console.log("打印box信息");
}
},
})
</script>
v-model双向绑定
<div id="app">
<input type="text" v-model="num">
<p >共{{num}}人</p>
<input type="checkbox" name="" id="" :checked="fa">
<button @click="toggle">切换</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
num:0,
fa:true
},
methods: {
toggle(){
this.fa=!this.fa
}
},
})
</script>
练习：建议计算机
<!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>
</head>
<body>
<div id="app">
<input type="text" v-model="fist">
<select name="" id="" v-model="c">
<option value="+">+</option>
<option value="-">-</option>
<option value="x">x</option>
<option value="÷">÷</option>
</select>
<input type="text" v-model="er">
<p><button @click="dentyu">等于</button></p>
<input type="text" v-model="deng">
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
fist:'',
er:'',
deng:'',
c: '+'
},
methods: {
dentyu(){
console.log(1);
if(this.c=='+'){
this.deng= parseFloat(this.fist)+parseFloat(this.er)
}
if(this.c=='-'){
this.deng= parseFloat(this.fist)-parseFloat(this.er)
}
if(this.c=='x'){
this.deng= parseFloat(this.fist)*parseFloat(this.er)
}
if(this.c=='÷'){
this.deng= parseFloat(this.fist)/parseFloat(this.er)
}
}
},
})
</script>
</body>
</html>
网友评论