初步认识vue
介绍：
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中的数据", //stringnum: 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>