1.Vue
1.介绍
vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
简单,高效,生态丰富(插件多)
vue的更新换代
2014年 Vue.js发布
2016年 Vue2.x发布
2022年 Vue3.x发布
2.Vue3的安装
<script src="https://unpkg.com/vue@next"></script>
可以直接引用script 或者 去Vue.js官网下载
3.创建应用的实例
在介绍vue之前先用vue写一个绑定实例让大家看看
先在body里面写入html样式
<div id="app">
<input type="text">
<p></p>
</div>
然后在script标签里面createApp 函数创建一个新的应用实例
const app = Vue.createApp({
data() {
return { msg: "你好vue" }
}
})
var vm = app.mount("#app")
然后在html样式里面添加指定的指令
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
在输入框输入然后下面的p标签文本里面的字就会随着输入框里面的字变化
这样一个简单的绑定案例就出来了
4.vue的内置指令
内置指令就是 -v 开头的特殊属性 联系html模板的javasc数据模型
<div>
<p v-text="msg"></p>
</div>
创建app
const app = Vue.createApp({
data(){
return{
msg:"你好你好",
canUse:true,
}
}
}).mount("#app")
//挂载 app.mount("#app")
1.文本渲染
只能写一行表达式
不能写复杂的js如if for
v-text {{}} v-html
2.属性渲染
v-bind:属性名="值";
:属性名 = 值
<p v-bind:title="msg">你好</p>
5.vue的多重条件案例
<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:70
}
}
}).mount("#app")
</script>
6.v-show与v-if
v-show 是通过css隐藏
v-if 直接移除节点隐藏
如果频繁切换显示与隐藏V-show
偶尔切换显示隐藏用v-if
7.vue的key属性
key属性为了让Vue内部给遍历的节点 给一个唯一的标识符 以便更好地去
排序过滤等操作 为了性能优化 key的值要唯一
8.vue对象的遍历 v-for
key给vue遍历的节点一个唯一的标识符更好的让vue去
做排序过滤等操作为了性能的优化key的值要唯一
<div id="app">
<div v-for="(value,key) in obj" :key="key">{{key}}:{{value}}</div>
</div>
<script>
Vue.createApp({
data(){
return{
obj:{title:"Vue3入门",author:"嗯嗯",padate:"2020-2-24"}
}
}
}).mount("#app")
9.vue v-for范围
<div id="app">
<div v-for="value in 10">{{value}}</div>
</div>
<script>
Vue.createApp({
data(){
return{
}
}
}).mount("#app")
10.v-for和v-if
v-if v-for 不能一起使用 如果非要一起的话
需要用template
<template v-for="item in 10">
<p v-if="item%2===0">{{item}}</p>
</template>
<div id="app">
<template v-for="item in 10">
<p v-if="item%2===0">{{item}}</p>
</template>
</div>
<script>
Vue.createApp({
data(){
return{
}
}
}).mount("#app")
</script>
11.v-on事件
当点击按钮的时候两个按钮上面的数字就会+1
12.如何用vue制作一个选项卡
<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>
选项卡效果