Vue超简单入门级教程

最新推荐文章于 2024-07-10 18:13:56 发布

樂笒

最新推荐文章于 2024-07-10 18:13:56 发布

阅读量193

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_49413017/article/details/116602318

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

Vue零基础入门
小问题
- el挂载点相关问题

Vue零基础入门

一.导入开发版vue.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

二.创建Vue实例对象，设置el属性和data属性

var app = new Vue({
    el:'#app',
    data:{
        
    }
})

三.data数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

四.小练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app p {
            margin: 0 auto;
            
        }
    </style>
</head>

<body>
    <div id="app">
       <h3 >{{name}}</h3> 
       <p>{{love}}</p><br>
       <p>{{qq}}</p>
       <strong>太好笑了啊</strong>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                name:'我是猪猪',
                love:'daisiki的you',
                qq:'xxx'
            }
        })
    </script>
</body>

</html>