vue学习-初识

最新推荐文章于 2024-04-12 04:51:26 发布

加油吧qaq

最新推荐文章于 2024-04-12 04:51:26 发布

阅读量155

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43368682/article/details/108241700

版权

vue

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

写一个简单的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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--
        视图层：负责页面布局和渲染
    -->
    <div id="app">
        <h1>hello{{msg}}</h1>
    </div>
   <!--
        数据层逻辑层：交互和数据的控制
    -->
    <script>
    var app=new Vue({
        //哪个元素是使用vue框架渲染
        el:"#app",
        //视图层的变量
        data:{
            msg:" miss you"
        }
    })
    </script>

</body>
</html>

修改上面的变量值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--
        视图层：负责页面布局和渲染
    -->
    <div id="app">
        <h1>hello{{msg}}</h1>
        <button @click="toggleFn">切换信息</button>
    </div>
   <!--
        数据层逻辑层：交互和数据的控制
    -->
    <script>
    var app=new Vue({
        //哪个元素是使用vue框架渲染
        el:"#app",
        //视图层的变量
        data:{
            msg:" miss you"
        },
        //将视图和交互方法写到methods属性里
        methods:{
            toggleFn:function(){
                this.msg=" vue";
            }
        }
    })
    </script>

</body>
</html>

用this.msg可以修改的原因是此时app这个vue对象中已经包含了变量信息
在这里插入图片描述

条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--
        视图层：负责页面布局和渲染
    -->
    <div id="app">
        <h1>hello{{msg}}</h1>
        <h2 v-if="userInfo=='VIP'">欢迎vip用户回来</h2>
        <h2 V-else>充值会让你更强大</h2>
        <button @click="toggleFn">切换信息</button>
        <button @click="pass">VIP过期</button>
        <!-- @就是v-on -->
    </div>
   <!--
        数据层逻辑层：交互和数据的控制
    -->
    <script>
    var app=new Vue({
        //哪个元素是使用vue框架渲染
        el:"#app",
        //视图层的变量
        data:{
            msg:" miss you",
            userInfo:"VIP"
        },
        //将视图和交互方法写到methods属性里
        methods:{
            toggleFn:function(){
                this.msg=" vue";
            },
            pass:function(){
                this.userInfo="normal";
            }
        }
    })
    </script>

</body>
</html>

在元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

列表渲染

用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--
        视图层：负责页面布局和渲染
    -->
    <div id="app">
        <h1>hello{{msg}}</h1>
        <!--列表 -->
        <ul>
            <li v-for="(item,i) in cps" >{{i+1}}-{{item}}</li>
        </ul>
         <!--列表 -->
         <ul>
            <li v-for="(item,i) in students" >姓名：{{item.name}}，性别：{{item.sex}}</li>
        </ul>
        <!-- @就是v-on -->
    </div>
   <!--
        数据层逻辑层：交互和数据的控制
    -->
    <script>
    var app=new Vue({
        //哪个元素是使用vue框架渲染
        el:"#app",
        //视图层的变量
        data:{
            msg:" miss you",
            cps:["麻绳","乐事","markgun","缪糕"],
            students:[
              {name:"乐乐",sex:"男"},
              {name:"书书",sex:"男"},
              {name:"甜心",sex:"男"}
            ]
        },
    })
    </script>

</body>
</html>

结果：
在这里插入图片描述