介绍:
vue是一种自下而上的渐进式框架,当实现简单的应用时,只需一个轻量小巧的核心库;当实现复杂的应用时,可以引入各式各样的Vue插件
Vue特点:
1. 遵循MVVM模式
2. 编码简洁,体积小,运行效率高,适合移动/PC端开发
3. 它本身只关注UI,可以引入其它第三方库开发项目
Vue周边库:
vue-cli:vue脚手架
vue-resource
axios
vue-router:路由
vuex:状态管理
element-ui:基于vue的UI组件库(PC端)
Vue中的布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<stype>
//样式
</stype>
<body>
<!-- 1.创建一个容器 -->
<div id="app">
</div>
</body>
<!-- 引入核心库 -->
<script src="../js/vue.min.js"></script>
<script>
// 2.创建一个Vue实例
let vm = new Vue({
data() {
return {
str: "<h2>这是Vue中的数据</h2>", //string
}
}
})
// 绑定视图
vm.$mount("#app");
</script>
</html>
Vue创建实例的方式:
使用后面的方式
由于数据前端和后端是相通的,前端数据改动会影响后端数据,但是如果我们不想改后端数据怎么办呢
前面就是一个全局唯一实例
第二个是每次调用都new一个
创建实例的同时绑定视图
new Vue({
el:"#app", // 绑定视图
data:{ //数据模型
str:"这是Vue中的数据"
}
})
// 写法二 先创建实例,再绑定视图
// 创建实例
let vm = new Vue({
data() {
return {
str: "<h2>这是Vue中的数据</h2>", //string
}
}
})
// 绑定视图
vm.$mount("#app");
常用的语法:
插值语法{{}}:
用来传递后台数据显示到前端的
<body>
<div id="app">
<!-- 插值语法 {{数据}} -->
<div>{{str}}</div>
<div>{{num * 2}}</div>
<div>{{bol}}</div>
<div>{{arr[1]}}</div>
<div>{{obj.uname}}</div>
<div>{{obj.phone}}</div>
</div>
</body>
<script>
data() {
return {
str: "这是Vue中的数据", //string
num: 10,
bol: true,
arr: ["1111", "2132", "吼吼吼"],
obj: {
uname: "saggg",
phone: "1231123432123"
}
}
}
})
vm.$mount("#app");
</script>
v-show和v-if
v-show:
1.css层面控制元素的显示和隐藏,当状态为false时,元素隐藏,但依然存在,只是在当前元素上设置了display:none
2.当频繁切换状态时使用
使用场景:背景音乐,下拉列表,点击弹窗...
v-if:
1.真正的条件渲染,当状态为true时,元素创建,当状态为false时,元素直接销毁
2.不频繁切换状态时使用
使用场景:条件判断...
<body>
<div id="app">
<div v-show="strIsShow">{{str}}</div>
<div v-if="strIsShow">{{str}}</div>
<hr>
<!-- v-if条件判断 -->
<div v-if="surpriseMoney <= 2000000">give you 1000</div>
<div v-else-if="surpriseMoney > 2000000 && surpriseMoney <= 3000000">give you 2000</div>
<div v-else-if="surpriseMoney > 3000000 && surpriseMoney <= 4000000">give you 3000</div>
<div v-else>nothing~~</div>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
let vm = new Vue({
data(){
return{
str:"我无我无我无我无为?",
strIsShow:false,
surpriseMoney:4000000
}
}
})
vm.$mount("#app")
</script>
v-bind,指令用来单向绑定数据
使用v-bind来进行操作,实现数据的动态更新和响应式渲染。
<style>
.bg{
background-color: aqua;
}
</style>
<body>
<!-- 1.创建一个容器 -->
<div id="app">
<!-- v-bind指令:单向绑定数据(动态绑定数据) -->
<a v-bind:href="aLink">点我跳转</a>
<hr>
<!-- 简写 : 代替v-bind:-->
<img :src="path" alt="" style="width: 200px;">
<hr>
<!-- 动态绑定样式 -->
<div :class="{bg:bol}">{{str}}</div>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
// 2.创建一个实例
let vm = new Vue({
data(){
return{
str:"这是一个div",
aLink:"https://www.baidu.com",
path:"../img/img01.webp",
bol:true
}
}
})
vm.$mount("#app")
</script>
v-for遍历
v-for用来循环遍历,包括数组,字符串,甚至对象都可以
<body>
<!-- 1.创建一个容器 -->
<div id="app">
<!-- v-for指令:循环遍历 -->
<!-- 循环遍历数字 -->
<div v-for="item in num">{{item}}</div>
<!-- 循环遍历字符串 -->
<div v-for="(item,index) in str">{{item}}--{{index}}</div>
<!-- 循环遍历数组 -->
<div v-for="(item,index) in arr">{{index}}--{{item}}</div>
<!-- 循环遍历对象 -->
<!-- <div v-for="item in obj">{{item}}</div> -->
<div v-for="(item,key) in obj">{{item}}--{{key}}</div>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
let vm = new Vue({
data(){
return{
num:10,
str:"JavaScript",
arr:["元素1","元素2","元素3","元素4"],
obj:{
uname:"张三",
age:50
}
}
}
})
vm.$mount("#app");
</script>
v-if和v-for的优先级
v-if和v-for的优先级:
v-for的优先级更高;v-if和v-for在同时使用时,需要将v-if放在父元素上使用
原因:如果在li上进行v-if的判断那么就会先遍历v-for,再if判断False,对遍历的结果进行销毁,如果li中有几十上百条数据,那么就会销毁上百次,极大的影响性能,所以在父元素上直接销毁。
<body>
<!-- 1.创建一个容器 -->
<div id="app">
<ul v-if="bol">
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
let vm = new Vue({
data(){
return{
arr:["列表项1","列表项2","列表项3","列表项4"],
bol:false
}
}
})
vm.$mount("#app");
</script>