初步认识vue

最新推荐文章于 2024-09-10 20:26:21 发布

猿究院-Cu-Sn合金

最新推荐文章于 2024-09-10 20:26:21 发布

阅读量324

点赞数 4

分类专栏： vue 文章标签： vue.js html5 vscode

本文链接：https://blog.csdn.net/qq_64669006/article/details/140934916

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

介绍：

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>