自学Vue（笔记1）

最新推荐文章于 2024-07-16 01:47:39 发布

置顶 Mr顺

最新推荐文章于 2024-07-16 01:47:39 发布

阅读量2.7k

点赞数 4

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_46144237/article/details/109561920

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

自学Vue笔记1

- el的简单使用
- data简单介绍和使用

el的简单使用

三步：1：导入开发版本Vue.js
2：创建Vue实例对象（设置el属性和data属性）
3：使用简介的模板语法把数据熏染到页面上

el的三个思考
1 .Vue实例的作用范围是什么呢？ Vue会管理el选项命中的元素及其内部的 后代元素
2 .是否可以使用其他是选择器？可以使用其他选择器，但是建议使用ID选择器。
3 . 是否可以设置其他啊的dom元素呢？可以使用其他的双标签，但是不能使用 HTML 和 BODY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <!-- 导入开发版本的Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =new Vue({
            el:"#app",     // el 为挂载点，后面可以挂载：id选择器、class选择器、标签选择器
            data:{          
                message:"你好Vue！"
            }
        })
    </script>
</body>
</html>

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

data简单介绍和使用

data:数据对象
重点:
1.Vue中用到的数据定义在data中。
2.data中可以写复杂类型的数据。
3 .渲染类型数据时，遵循js的语法即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>data：数据对象</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>{{person.name}}{{person.IdentityCard}}</h2>
        <ul>
            <li>兴趣爱好：</li>
            <li>{{hobby[0]}}</li>
            <li>{{hobby[2]}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =new Vue({
            el:"#app",
            data:{
                message:"你好 Vue data!",
                person:{
                    name:"小明",
                    IdentityCard:41272720001215
                },
                hobby:["足球","篮球","撸代码 ","搞算法"]
            }
        })
    </script>
</body>
</html>

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

Mr顺

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
3
评论
自学Vue（笔记1）

第一个Vue程序三步：1：导入开发版本Vue.js2：创建Vue实例对象（设置el属性和data属性）3：使用简介的模板语法把数据熏染到页面上el的三个思考1 .Vue实例的作用范围是什么呢？ Vue会管理el选项命中的元素及其内部的后代元素2 .是否可以使用其他是选择器？可以使用其他选择器，但是建议使用ID选择器。3 . 是否可以设置其他啊的dom元素呢？可以使用其他的双标签，但是不能使用 HTML 和 BODY<!DOCTYPE html><htm
复制链接

扫一扫