<!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>vue基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<!-- {{ message }}
<h1>{{ school.name }} {{school.mobile}}</h1> -->
<h2 v-html="message"></h2>
<!-- 引入鼠标点击方法 -->
<input type="button" value="事件绑定1" v-on:click="doit">
<!-- 鼠标移入方法 -->
<input type="button" value="事件绑定2" v-on:mouseenter="doit">
<!-- 双击事件方法 -->
<input type="button" value="事件绑定3" v-on:dblclick="doit">
<!-- 等效于下面这个方法 -->
<input type="button" value="事件绑定4" @dblclick="doit">
<h2>{{ message+'hello' }}nihao</h2>
<ul>
<li v-html="campus[0]"></li>
<li v-html="campus[1]"></li>
<li v-html="campus[2]">}</li>
</ul>
<h2 @click="changeFood">{{ food }}</h2>
<div class="input-num">
<button @click="subnum">-</button>
<span>{{ num }}</span>
<button @click="addnum">+</button>
</div>
</div>
<!-- 不要把vue挂载到body或者html上 -->
<script>
var app = new Vue({
// 挂载点,设置vue实例并挂载
el:"#app",
// 数据对象
data:{
message:"<a href='https://www.bilibili.com/video/BV12J411m7MG?p=8&spm_id_from=pageDriver'>nihao!</a>",
school:{
name:"nihao",
mobile:"131313",
},
num:1,
food:"苦瓜炒蛋",
campus:["<h1>背景</h1>","<a href ='https://www.bilibili.com/video/BV12J411m7MG?p=8&spm_id_from=pageDriver'>任务</a>","<h2>心情</h2>"]
},
methods:{
doit:function(){
alert("do it!");
},
changeFood:function(){
// console.log(this.food);
this.food+="贼难吃"
},
addnum:function(){
if(this.num<10){
this.num+=1
}else{
alert('已经取到最大值了');
}
// this.num+=1
},
subnum:function(){
if(this.num>0){
this.num-=1
}else{
alert('已经取到最小值了');
}
}
},
})
</script>
</body>
</html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
