前端程序员必学的Vue3
提示:什么是vue框架vue.js是一套构建用户界面的渐进式框架vue只关注图层,采用自底向上增量的开发设计vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。文章目录一、vue的引入方式?二、使用步骤1.引入库2.vue的创建三、vue的多重条件四、vue的v-show和v-if的区别五、vue事件处理六、vue生成选项卡六、vue步进器一、vue的引入方式?示例:vue
·
提示:什么是vue框架
- vue.js是一套构建用户界面的渐进式框架
- vue只关注图层,采用自底向上增量的开发设计
- vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
一、vue的引入方式?
示例:vue.js跟JQuery的引入方式一样,有网络引入和本地引入。
二、使用步骤
1.引入库
代码如下(示例):
<script src='https://unpkg.com/vue@next'></script>
2.vue的创建
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src='https://unpkg.com/vue@next'></script>
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
<p>{{msg}}</p>
</div>
<script>
//创建一个APP (application应用)
const app = Vue.createApp({
//定义数据data
data() {
//返回msg
return {
msg: '你好vue'
}
}
})
//把vue实例挂载到#app节点上
var vm = app.mount('#app')
</script>
</body>
</html>
三、vue的多重条件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../vue.js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p v-if="score>=90">优</p>
<p v-else-if="score>=80">良</p>
<p v-else-if="score>=70">中</p>
<p v-else-if="score>=60">及格</p>
<p v-else>差</p>
</div>
<script>
Vue.createApp({
data() {
return{score:90}
}
}).mount('#app')
</script>
</body>
</html>
四、vue的v-show和v-if的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../vue.js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p v-if="saber">呆毛王</p>
<p v-show="saber">呆毛王</p>
</div>
<script>
Vue.createApp({
data() {
return{saber:true}
}
}).mount('#app')
</script>
<!-- v-if通过移除节点隐藏
v-show通过css隐藏dispiay:none
若果频繁隐藏和显示用v-show
偶尔用v-if -->
</body>
</html>
五、vue事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../vue.js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p>
<button @click="say">按钮</button>
</p>
</div>
<script>
Vue.createApp({
data() {
return{num:1}
},
methods:{
say(e){
alert('呆毛王吃了'+this.num+'碗饭')
this.num++;
}
}
}).mount('#app')
</script>
</body>
</html>
六、vue生成选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../vue.js/vue.js"></script>
<style>
.active{
color: black;
background-color: #00FFFF;
}
</style>
<title></title>
</head>
<body>
<div id="app">
<p>
<button @click="num=1" :class="num===1? 'active':''">css</button>
<button @click="num=2" :class="num===2? 'active':''">html</button>
<button @click="num=3" :class="num===3? 'active':''">js</button>
</p>
<div v-if="num===1">css内容</div>
<div v-if="num===2">html内容</div>
<div v-if="num===3">js内容</div>
</div>
<script>
Vue.createApp({
data() {
return {
num: 1
}
}
}).mount('#app')
</script>
</body>
</html>
六、vue步进器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../vue.js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<button @click="add(-1)">-</button>
<span>{{num}}</span>
<button @click="add(1)">+</button>
</div>
<script>
Vue.createApp({
data() {
return{num:1}
},
methods:{
add(n){
this.num+=n;
}
}
}).mount('#app')
</script>
</body>
</html>
更多推荐
已为社区贡献2条内容
所有评论(0)