1 第一个vue程序

复习次数 :✔

1.1 vue优势

1.2 vue环境

        直接在idea的插件搜vue.js,然后下载。

        接着创建一个空项目,并添加模块。然后,创建一个html文件。

1.3 vue例子

        完整的html代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--view层--><h1 id="bottom-h">{{message2}}</h1><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script> <!--CDN,视图层和数据层的中间件--><script>var vm = new Vue({el: "#bottom-h", /*绑定id*//*model层*/data: {message :"hello!",message2:"nihao!"}});</script>
</body>
</html>

        运行结果如下:

1.4 注意点

            其中,使用CDN来安装和管理vue的依赖:

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>

        注意点:

        1.创建Vue对象:var vm = new Vue(); 其中,Vue的V是大写的,然后在小括号里面写花括号;

        2.花括号里有el和data属性;

        3.el用来绑定id,"#id名";

        4.data用来存储数据,作为model层,格式是:data:{key = "xxx"},如果存在两个key,用逗号隔开;

        5.el和data用逗号隔开;

        6.在视图层(view层)用{{key}}来接收数据;

1.5 通过网页,不刷新改变视图层的值

        打开网页,点击console:

         输入vm.key名 = "修改的内容",然后回车,即可改变视图层的数据:

         这里的key是message。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/9474.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【VUE】npm打包报错 Syntax Error: Error: Cannot find module ‘imagemin-gifsicle‘

一. Syntax Error: Error: Cannot find module ‘imagemin-gifsicle’ npm run build 报错&#xff0c;报错如下 原因 这个错误消息显示缺少了 imagemin-gifsicle 模块&#xff0c;而它是 image-webpack-loader 的依赖项&#xff0c;导致构建失败。解决 &#xff08;1&#xf…

MyBatis学习笔记之缓存

文章目录 一级缓存一级缓存失效 二级缓存二级缓存失效二级缓存相关配置 MyBatis集成EhCache 缓存&#xff1a;cache 缓存的作用&#xff1a;通过减少IO的方式&#xff0c;来提高程序的执行效率 mybatis的缓存&#xff1a;将select语句的查询结果放到缓存&#xff08;内存&…

睡眠健康数据分析

项目背景 背景描述 本数据集涵盖了与睡眠和日常习惯有关的诸多变量。如性别、年龄、职业、睡眠时间、睡眠质量、身体活动水平、压力水平、BMI类别、血压、心率、每日步数、以及是否有睡眠障碍等细节。 数据集的主要特征&#xff1a; 综合睡眠指标&#xff1a; 探索睡眠持续时…

重庆市北斗新型智慧城市政府项目

技术栈&#xff1a;使用vue2JavaScriptElementUIvuexaxiosmapboxcesium 项目描述&#xff1a;重庆市北斗新型智慧城市政府项目是基于千寻孪界开发的一款智慧城市项目&#xff0c;包含车辆实时位置定位&#xff0c;智能设备的报警&#xff0c;基础设施的部设等等功能 工作内容&a…

WebSocketServer的使用(@ServerEndpoint)

前端代码 function initWebSocket() {if (typeof WebSocket "undefined") {console.log("您的浏览器不支持WebSocket");} else {console.log("您的浏览器支持WebSocket");//实现化WebSocket对象&#xff0c;指定要连接的服务器地址与端口 建立连…

React的hooks---自定义hooks

通过自定义 Hook&#xff0c;可以将组件逻辑提取到可重用的函数中&#xff0c;在 Hook 特性之前&#xff0c;React 中有两种流行的方式来共享组件之间的状态逻辑&#xff1a;render props和高阶组件&#xff0c;但此类解决方案会导致组件树的层级冗余等问题。而自定义 Hook 的使…

【LeetCode】75.颜色分类

题目 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 sort 函数的情况…

Flink状态的理解

Flink是一个带状态的数据处理系统&#xff1b;系统在处理数据的过程中&#xff0c;各算子所记录的状态会随着数据的处理而不断变化&#xff1b; 1. 状态 所谓状态State&#xff0c;一般指一个具体的 Task 的状态&#xff0c;即线程处理过程中需要保存的历史数据或历史累计数据…

数据结构【排序】

第七章 排序 一、排序 1.定义&#xff1a;将无序的数排好序 &#xff1b; 2.稳定性&#xff1a; Kᵢ和Kⱼ中&#xff0c;Kᵢ优先于Kⱼ那么在排序后的记录中仍然保持Kᵢ优先&#xff1b; 3.评价标准&#xff1a;执行时间和所需的辅助空间&#xff0c;其次是算法的稳定性&#xf…

[算法很美打卡] 多维数组篇 (打卡第一天)

文章目录 顺时针打印二维数组0所在的行列清零 顺时针打印二维数组 package 每日算法学习打卡.算法打卡.七月份.七月二十六号;public class test1 {public static void main(String[] args) {int[][] matrix {{1,2},{5,6},{9,10},{13,14},};print(matrix);}static void print(i…

62 | Python 操作 PDF

文章目录 Python 操作 PDF 教程1. 安装 PyPDF22. 读取 PDF 文件3. 创建 PDF 文件4. 修改 PDF 文件练习题1. 创建一个新的 PDF 文件,其中包含两个页面。第一个页面包含一段文本和一张图片,第二个页面包含一个表格。2. 打开练习题中创建的 PDF 文件,并将第一个页面中的文本修改…

LangChain Agents深入剖析及源码解密上(一)

LangChain Agents深入剖析及源码解密上(一) LangChain Agents深入剖析及源码解密上 Agent工作原理详解 本节会结合AutoGPT的案例,讲解LangChain代理(Agent)为核心的内容。我们前面已经谈了代理本身的很多内容,也看了绝大部分的源代码,例如:ReAct的源代码,还有mrkl的源代…

P3183 [HAOI2016] 食物链

题目描述 如图所示为某生态系统的食物网示意图&#xff0c;据图回答第 1 小题 现在给你 n 个物种和 m 条能量流动关系&#xff0c;求其中的食物链条数。物种的名称为从 1 到 n 编号 M 条能量流动关系形如 1,2,3​,…,am−1​,bm−1​,am​,bm​。其中 ai​ 和 bi​ 表示能量从物…

Java反射 -- 详细介绍 (框架核心)

反射 是 Java框架 的核心 &#xff0c;无论是Tomcat、SpringMVC、Spring IOC、Spring AOP、动态代理 &#xff0c;都使用到了 反射 反射的作用简单讲就是 无需 new 对象&#xff0c;就可以动态获取到一个类的全部信息&#xff0c;包括 属性、方法&#xff0c;构造器&#xff0…

边写代码边学习之全连接Dense

1. 全连接原理 全连接神经网络&#xff08;Fully Connected Neural Network&#xff09;是一种最基本的神经网络结构&#xff0c;也被称为多层感知器&#xff08;Multilayer Perceptron&#xff0c;MLP&#xff09;。其原理是模拟人脑神经元之间的连接方式&#xff0c;通过多个…

pytorch学习——多层感知机

一.感知机 感知机——神经网络基本单元&#xff0c;最简单的深度网络称为多层感知机。多层感知机由多层神经元组成&#xff0c;每一层与它上一层相连&#xff0c;从中接收输入&#xff0c; 同时每一层也与它的下一层相连&#xff0c;影响当前层的神经元。 解释&#xff1a;如果…

生态系统景观指数-聚集度指数AI计算

景观指数是景观生态学的常见指标&#xff0c;可用于不同生态系统的特征识别。景观指数是反映景观结构与空间格局的定量指标&#xff0c;目前已成为景观生态学领域常用的分析景观格局、度量空间异质性的重要方法。不同水平下的指数结果往往代表不同含义&#xff0c;应在把握指数…

决策树学习

决策树学习 决策树决策树基础适用决策树学习的经典目标问题样本的表示训练样本决策树的概念发展历史 经典决策树算法ID3算法属性选择和节点混杂度&#xff08;Impurity&#xff09;ID3 Q1: 哪个属性是最佳属性&#xff1f;当前最佳属性节点选择熵&#xff08;Entropy&#xff0…

如何高效实现文件传输:小文件采用零拷贝、大文件采用异步io+直接io

一般会如何实现文件传输&#xff1f; 服务器提供文件传输功能&#xff0c;需要将磁盘上的文件读取出来&#xff0c;通过网络协议发送到客户端。如果需要你自己编码实现这个文件传输功能&#xff0c;你会怎么实现呢&#xff1f; 通常&#xff0c;你会选择最直接的方法&#xf…

交叉编译----宿主机x86 ubuntu 64位-目标机ARMv8 aarch64

1.交叉编译是什么&#xff0c;为什么要交叉编译 编译&#xff1a;在一个平台上生成在该平台上的可执行代码交叉编译&#xff1a;在一个平台上生成在另一个平台上的可执行代码交叉编译的例子&#xff1a;如51单片机的可执行代码&#xff08;hex文件&#xff09;是在集成环境kei…