vue笔记——vue基础

最新推荐文章于 2024-11-18 18:03:48 发布

sadnessdry

最新推荐文章于 2024-11-18 18:03:48 发布

阅读量160

点赞数 1

本文链接：https://blog.csdn.net/weixin_44266163/article/details/108026355

版权

Vue基础

黑马程序员vue教程视频链接

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue基础</title>
</head>
<body>
    <div id="app" class="app"> 
        {{ message }}  
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            //el:".app",
            //el:"div",
            //一般使用id选择器（唯一的）
            data:{
                message:" Hello Vue! "
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

标签都可使用(单标签，body，html除外)，推荐使用div标签（没有额外的样式）

el设置vue实例挂载到的元素

data可以有数组、对象类型

data:{
                message:"你好，李云龙！",
                school:{
                    name:"李云龙",
                    mobile:"1808-1234",
                },
                campus:["延安","北平","广州"]
            }

div块里（依照js语法引用）

<h2> {{ school.name }} {{ school.mobile }}</h2>
        <ul>
            <li> {{ campus[0] }}</li>
            <li> {{ campus[1] }}</li>
            <li> {{ campus[2] }}</li>
        </ul>

在这里插入图片描述
如果有什么不对的地方，希望大佬们能给我指正