Vue基础

最新推荐文章于 2023-05-17 19:46:30 发布

^O^Wanna

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量42

点赞数

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

本文链接：https://blog.csdn.net/qq_54088653/article/details/117903604

版权

vue基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、初识Vue

官网（https://cn.vuejs.org/）

1、什么是Vue？

Vue是一个渐进式的js框架(渐进式是指由浅入深都可使用)

2、为什么使用Vue？

Vue可以简化dom操作

Vue页面是由数据生成的

3、怎么使用Vue？

第一个Vue程序

第一步：引入Vue.js

Vue.js可以在官网下载或者使用在线的

在线Vue.js：

相当于完整版

相当于压缩版

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

<!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>
<body>
    <div id="app">
        {{message}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello word Vue!"
            }
        })
    </script>
</body>
</html>

el：挂载点（设置Vue实例挂载的元素）

el是选择相应的选择器

作用范围：选中的元素及其内部后代元素
可以使用其他选择器：id class等
可以使用其他的双标签，但是不能挂载到body以及html上

data：数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据

渲染复杂类型数据时遵守js语法即可对象.属性

<!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>

<body>
    <div id="app">
        {{message}}
        <h4>
            {{school}}
        </h4>
        <h3>
            班级： {{school.class}}
        </h3>
        <h3>
            姓名： {{school.name}}
        </h3>
        <h3>
            性别： {{school.sex}}
        </h3>
        <h2>{{city[0]}}</h2>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好啊",
                school: {
                    class: "1801",
                    name: "Wanna",
                    sex: "男"
                },
                city: ["北京", "上海", "西安"]
            }
        })
    </script>
</body>

</html>