Vue03-HelloWord

一、Hello World

1-1、示例1

1、现有html容器;

2、再有vue实例。

new Vue({});中的{}是配置对象。配置对象是:key:value的格式。

el:element元素。id对应#,class对应.

把容器中变化的数据,交给Vue实例去保管:

const x多余,去掉即可。

1-2、示例2

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--VUEde 引入 cdn方式-->
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <!-- view层 模板 视图层 -->
    <div class="app">
        {{message}}
    </div>

    <script>
        // 创建一个Vue的实例
        var vm = new Vue({
            el: ".app",
            // model层:数据模型
            data:{
                message: "hello world!"
            }
        });
    </script>

</body>
</html>

浏览器展示:

双向绑定:ViewModel层

不用刷新页面,就能展示页面信息的变化。vue不改变DOM对象,是虚拟DOM。

1-3、小结

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

二、Hello 案例分析

2-1、一个Vue实例,不能同时接管两个实例

页面展示:

只接管第一个实例。

2-2、多个实例不能对应一个容器

2-3、一个Vue实例对应一个容器

容器和Vue实例的关系是:一一对应!

三、注意

3-1、Vue的组件简介

以后开发的时候,一个.Vue文件中,只有一个容器,和一个Vue实例。当容器中需要维护的数据很多时,可以如下分配:

用多个组件管理。

3-2、JS表达式 VS JS代码

HTML容器中,并不是Vue实例有什么,容器才能放什么。

页面展示:

页面展示:

3-3、小结

相关推荐
马可家的菠萝32 分钟前
自动保存已经有了,为什么笔记软件还需要“历史版本”?
前端·后端·架构
半个落月1 小时前
从 "use client" 到 Route Handler:用 Todos 理解 Next.js 水合与全栈请求
前端·react.js·next.js
qq_452396231 小时前
第七篇:《大型前端项目的模块化与目录结构设计》
前端
你脑门上的脚印1 小时前
Vue 项目从零实现语音转文字、文字转语音功能(完整可用 + 踩坑指南)
前端·vue.js
paopaokaka_luck1 小时前
基于springboot3+vue3的车间生产管理系统(Echarts图形化分析、BI报表)
java·前端·spring boot·学习·echarts
程序员鱼皮1 小时前
3 大 DeepSeek Harness 进阶玩法,招多个大肥鱼帮我干活!
前端·后端·ai编程
KoPa1 小时前
HeySmart:大模型开源网关基座-请求生命周期与钩子引擎
前端·后端
七牛开发者2 小时前
Coding Agent 如何跑稳长任务?从上下文管理到运行时状态
前端·javascript·后端
半个落月2 小时前
从 CSR 到 Server Component:吃透 Next.js 16 App Router 路由、布局与 SEO
前端·next.js
七牛开发者2 小时前
拆解 DeepSeek Harness:Profile 与 Bundle 如何装配运行时
前端·javascript·后端