[VUE框架学习笔记]第一个Vue程序(el挂载点和data数据对象！)

最新推荐文章于 2024-04-04 12:21:11 发布

钧桐

最新推荐文章于 2024-04-04 12:21:11 发布

阅读量673

点赞数

分类专栏： VUE框架学习笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_42136832/article/details/115857913

版权

VUE框架学习笔记专栏收录该内容

27 篇文章 10 订阅

订阅专栏

第一个Vue程序

什么是Vue框架？
Vue的优缺点？
我的第一个Vue程序

在这里插入图片描述

什么是Vue框架？

为了实现前后端分离的开发理念，开发前端 SPA（single page web application）项目，实现数据绑定，路由配置，项目编译打包等一系列工作的技术框架。

Vue的优缺点？

其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。

Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。

Vue.js的特性如下：

1.轻量级的框架(相对而言)
2.双向数据绑定
3.指令
4.插件化

优点：

简单：官方文档很清晰，比 Angular 简单易学。（国内框架，demo，文档多）
快速：异步批处理方式更新 DOM。（同时进行）
组合：用解耦的、可复用的组件组合你的应用程序。（功能由不同的单个功能组件构成）
紧凑：~18kb min+gzip，且无依赖。
强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

我的第一个Vue程序

加入Vue框架

加入link

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

通过node.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>第一个vue程序</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello vue!"
            }
        })
    </script>
</body>
</html>

代码解释

el挂载点

Vue实例的作用范围是什么呢？

Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用ID选择器

是否可以设置其他的dom元素呢？

可以使用其他的双标签，不能使用HTML和BODY

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>第一个vue程序</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>{{school.name}} {{school.moblie}}</h2>
        <ul>
            <li>{{campus[1]}}</li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello vue!",
                school:{
                    name:'41',
                    moblie:"123456"
                },
                campus:['北校区','南校区']
            }
        })
    </script>
</body>
</html>

钧桐

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
[VUE框架学习笔记]第一个Vue程序(el挂载点和data数据对象！)

第一个Vue程序什么是Vue框架？Vue的优缺点？我的第一个Vue程序加入Vue框架代码代码解释el挂载点Vue实例的作用范围是什么呢？是否可以使用其他的选择器？是否可以设置其他的dom元素呢？data:数据对象什么是Vue框架？为了实现前后端分离的开发理念，开发前端 SPA（single page web application）项目，实现数据绑定，路由配置，项目编译打包等一系列工作的技术框架。Vue的优缺点？其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库
复制链接

扫一扫