Vue03-HelloWord

embedded/2024/9/24 23:27:51/

一、Hello World

1-1、示例1

1、现有html容器;

2、再有vue实例。

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

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

 

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

const x多余,去掉即可。

1-2、示例2

<!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、小结


http://www.ppmy.cn/embedded/46969.html

相关文章

Python GUI 库跨平台兼容问题及解决方案

在选择 Python GUI 库时&#xff0c;跨平台兼容性是一个重要的考虑因素。不同的 GUI 库可能在不同的操作系统上表现不同&#xff0c;因此需要选择一个能够在多个平台上运行良好的库。如果我们遇到下面的问题&#xff0c;可以尝试下我整理的方法。 1、问题背景 Python 作为一门…

实验五、IPv4地址的子网划分,第1部分《计算机网络》

但凡你有点本事&#xff0c;也不至于一点本事都没有。 目录 一、实验目的 二、实验内容 三、实验小结 一、实验目的 完成本练习之后&#xff0c;您应该能够确定给定 IP 地址和网络掩码 的网络信息。本练习旨在让您掌握如何根据给定 IP 地址计算网络 IP 地址信息。 二、实验…

Flutter生活服务类APP常用的第三方库总汇

Flutter生活服务类APP常用的第三方库总汇 生活服务类APP在日常生活中扮演着越来越重要的角色&#xff0c;从外卖、家政、美容到汽车服务等&#xff0c;几乎涵盖了生活的方方面面。Flutter作为一个高效的跨平台移动应用开发框架&#xff0c;为这类应用的开发提供了强大的支持。…

浅析嵌入式实时系统中信号量的概念

目录 概述 1. 认识信号量 1.1 定义信号量 1.2 信号量的类型 1.2.1 二值信号量 1.2.2 计数信号量 1.2.3 互斥信号量 1.2.3.1 认识互斥信号量 1.2.3.2 互斥信号量的其他特性 2 典型信号量的使用 2.1 等待和信号同步 2.2 多任务等待和信号同步 2.3 信用跟踪同步 2.…

vue+jave实现文件报表增加文件下载功能

需求背景:系统有文件交互功能。但没有做页面展示。为了测试方便&#xff0c;写了报表展示并可下载文件做检查。(所以下载是依赖表数据的) 使用语言和框架: 前端:vue-cli 后端:springBoot 前端实现 1、在报表vue文件&#xff0c;显示下载按钮并实现下载接口请求和处理。 //报…

如何用css实现两列布局?

1. 两列布局的基本方法 实现两列布局有多种方法&#xff0c;这里我会介绍几种常见的技术&#xff0c;包括浮动、Flexbox和Grid布局。 方法一&#xff1a;使用浮动&#xff08;Float&#xff09; 浮动是一种早期的布局方式&#xff0c;虽然现在不推荐&#xff0c;但仍然有必要…

编写一款2D CAD/CAM软件(二十)转存

为什么要转存? 持久化到硬盘或数据库的需求。数据的形式是硬盘上的文件或者是数据库中的表,用户可以根据需求随时加载到软件或内存。调试的需求。尽管调试工具GDB能够提供足够的信息,但是我们仍然有进一步快速调试的需求,比如将某一个类的全部数据以字符串形式打印或显示出…

RN:Error: /xxx/android/gradlew exited with non-zero code: 1

问题 执行 yarn android 报错&#xff1a; 解决 这个大概率是缓存问题&#xff0c;我说一下我的解决思路 1、yarn doctor 2、根据黄色字体提示&#xff0c;说我包版本不对&#xff08;但是这个是警告应该没事&#xff0c;但是我还是装了&#xff09; npx expo install --…