一.VUE基础——初识vue

最新推荐文章于 2024-06-03 21:54:25 发布

Wu_967

最新推荐文章于 2024-06-03 21:54:25 发布

阅读量82

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41841658/article/details/115014428

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.vue简介

vue特点：

JavaScript框架
简化Dom操作
响应式数据驱动

2.第一个vue程序

写vue程序所需的步骤：

1.使用<script>导入vue文件，可以是下载下来的本地文件，也可以是CDN加速。

本地下载网址：https://vuejs.org/js/vue.min.js
CDN加速网址：https://cdn.staticfile.org/vue/2.2.2/vue.min.js

2.创建vue实例对象，设置el属性和data属性。
3.使用简洁的模板语法把数据渲染到页面。

<!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>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"第一个vue程序"
            }
        })
    </script>
</body>
</html>

3.el挂载点

1.el挂载点的作用范围？

el命中的元素内部及其后代元素

2.el适用于其他的选择器吗？

el:"#app" //id选择器
el:".app" //class选择器
el:“div” //标签选择器

建议使用id选择器，因为id选择器是唯一的，其他的选择器都会命中多个元素。容易造成语义的不清晰。

3.是否可以选择其他的DOM元素？
可以选择其他的元素，包括p标签，h2标签等。

注意：
(1).只支持双标签，不支持单标签。
(2).<body></body>此双标签不支持el挂载点。

4.data数据对象

vue中用到的数据定义在data中
vue可以定义复杂类型的数据，包括对象类型、数组类型等
渲染复杂类型的数据时，遵守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>
</head>
<body>
    <div id="app">
        {{message}}   
        <h4>{{school}}</h4>
        <h5>{{school.name}}{{school.mobil}}</h5>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
            <li>{{campus[2]}}</li>
        </ul>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
       var app=new Vue({
           el:"#app",
           data:{
               message:"vue基础",     //字符串数据
               school:{      //对象数据
                   name:"第一中学",
                   mobil:"12345678"
               },
               campus:["中区","北区","南区"]    //数组数据
           }
       })
    </script>
</body>
</html>

Wu_967

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一.VUE基础——初识vue

1.vue简介vue特点：JavaScript框架简化Dom操作响应式数据驱动2.第一个vue程序写vue程序所需的步骤：1.使用<script>导入vue文件，可以是下载下来的本地文件，也可以是CDN加速。本地下载网址：https://vuejs.org/js/vue.min.jsCDN加速网址：https://cdn.staticfile.org/vue/2.2.2/vue.min.js2.创建vue实例对象，设置el属性和data属性。3.使用简洁的模板
复制链接

扫一扫