Vue概述
Vue是一款构建用户界面的渐进式javaScript框架
引入和实例化
<script src="./vue.js"></script>
引用与JQuery一样
const app = Vue.createApp({
data() {
return {
msg: "你好Vue"
}
}
})
var vm = app.mount("#app");
实例化一个 Vue
内置指令
内部指令是以 v- 开头的特殊属性
用于连接html模板与JavaScript数据模型
文本渲染
v-text v-html 简写:{{msg}}
示例:
<!-- html部分 -->
<div id="app">
<p v-text="msg"></p>
<!-- 或者 -->
<p>{{msg}}</p>
</div>
// js部分
Vue.createApp({
data() {
return {
msg: "Vue3 看不懂!"
}
}
}).mount("#app");
网页显示效果:
属性渲染
v-bind:属性名="值" 简写::属性名="值"
示例:
<!-- html部分 -->
<div id="app">
<p v-bind:title="msg">{{msg}}</p>
<p :class="'color'">{{msg}}</p>
<button :disabled="!canUse">按钮</button>
</div>
/* css部分 */
.color {
color: red;
}
// js部分
Vue.createApp({
data() {
return {
msg: "芜湖~起飞!",
canUse: false
}
}
}).mount("#app")
网页显示效果:
条件渲染
v-if v-else-if v-else
示例:
<!-- html内容 -->
<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>
// js部分
Vue.createApp({
data() {
return {
score: 59
}
}
}).mount("#app")
网页显示结果:
v-show
示例:
<!-- html代码 -->
<div id="app">
<p v-if="can">我会显示的</p>
<p v-show="can">也我会显示的,show</p>
</div>
// js代码
Vue.createApp({
data() {
return {
can: true
}
}
}).mount("#app")
网页显示效果:
列表渲染
v-for="(item,index) in list" :key="item"
item 变量的当前数据
index 当前的下标
示例:
<!-- html部分 -->
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="item">{{item}}-{{index+1}}</li>
</ul>
</div>
// js部分
Vue.createApp({
data() {
return {
list: ["Vue", "react", "angular"]
}
}
}).mount("#app")
网页显示效果:
如果 v-if 和 v-for 一起使用的话需要注意
v-for 与 v-if 用 template
<template v-for="item in 10">
<p v-if="item%2===0">{{item}}</p>
<\template>
示例:
<!-- html内容 -->
<div id="app">
<template v-for="item in 10">
<p v-if="item%2===0">{{item}}</p>
</template>
</div>
// js内容
Vue.createApp({
data() {
return {}
}
}).mount("#app")
网页显示效果:
学会了这些,你就算入门Vue了
跟着我走,保你月入过万