interaction
interaction copied to clipboard
Published
20 hours ago •
BestACE
BestACE
第01讲 课程概述
课程概述
- 课程简介
- 课程定位
- 课程资源
- 课程活动
Vue概述
- 简单介绍
- 学习资源
体验Vue
了解与原生JS的不同
使用原生JS的方式实现一个简单的交互，单机按钮实现内容的显示控制
<button id="btn">按钮</button>
<div class="content">
写几个字
</div>
<script type="text/javascript">
//DOM操作
var oBtn=document.querySelector('#btn');
var oCon=document.querySelector(".content");
oBtn.addEventListener("click",function(){
oCon.style.display="none";
});
</script>
数据绑定
<!--单向绑定-->
<!DOCTYPE html>
<html lang="zh">
<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>
<!--1.导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--2.html里面声明式的方式使用数据 -->
<div id="app">
<h1>{{message}}</h1>
<a href="#" v-bind:title="message">鼠标悬停看看效果</a>
</div>
<script type="text/javascript">
//3. JS初始化一个Vue对象
var app=new Vue({
//绑定的html元素，利用CSS选择器的方式选择元素
el:'#app',
//数据
data:{
message:'hello vue!'
}
})
</script>
</body>
</html>
<!--双向绑定-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<h1>Hello {{name}}</h1>
<input type="text" v-model="name" />
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
name:'whq'
}
})
</script>
事件处理
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<button v-on:click="ok=!ok">切换</button>
<h1 v-if="ok">Hello {{name}}</h1>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
name:'whq',
ok:true
},
methods:{
changeState:function(){
this.ok=!this.ok;
}
}
})
</script>
重点点化
- 极简Vue程序写法
- 几个指令
v-bind、v-model、v-on、v-if、v-for的使用 -
v-bind:title='message'可以简化为:title='message' -
v-on:click=''可以简化为@click=''
