Jquery项目中使用vue.js

news2024/11/28 21:40:39

大家在工作的情况中,可能会遇到之前的老项目采用jq书写,或者修改或者新增功能在jq中,原始jq的项目,代码可维护性很差,一个页面几千行jq,可维护性很差,工作量巨大,所以这个时候大家可以引入vue.js。

第一步:引入vue.js

这里给大家提供两种方式

cdn:

	<!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

本地文件导入:

<script src="./vue/vue.min.js" type="text/javascript"></script>

下载地址:

阿里云地址:阿里云盘分享https://www.aliyundrive.com/s/JwJppQFQCQB提取密码:t59b

注意:vue.js要在jq.js之前引入

第二步:创建一个vue实例

 在自己的js文件代码中创建一个vue实例,测试一下

	    var app = new Vue();
	    console.log(app);

打印结果:

 到这步,就说明我的vue实例创建成功可以使用vue的语法和生命周期函数了。

 

复制代码:

这里的el后面跟的是整个页面最大父级的id 我这边取名就叫app 大家写的时候,别忘在页面最大的父级绑定一个id,然后el的值就是大家绑定的id。这个很重要

// 使用vue实例 可以使用vue的方法和生命函数
new Vue({
    el:'#app',
    data:{
        text:'这是一个vue实例',
        list:['1','2','3']
    },
    methods:{
        initData(){
            this.list=['我爱你','你爱我','哈哈哈哈']
        }
    },
    created(){
        this.initData()
    },
});

最后希望可以帮助到大家,创作不易,请点个赞再走!

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

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

相关文章

Proj-9.0.0源码编译(Windows)

源码下载&#xff1a;下载地址官网教程&#xff1a;官网教程使用osgeo4w在线安装&#xff0c;时间较长且到后面会报错&#xff0c;尝试多次无法安装成功&#xff0c;只能切换源代码编译安装&#xff0c;官网教程如下&#xff1a;&#xff08;补充一下对vcpkg的简单介绍&#xf…

音质好的运动蓝牙耳机有哪些、最好的运动蓝牙耳机推荐清单

而作为一名运动爱好者&#xff0c;我非常喜欢在运动时听音乐&#xff0c;简直不要太轻松&#xff01;不过在换了多款蓝牙耳机之后&#xff0c;我终于找到了几款非常适合运动的耳机&#xff0c;戴着它们运动&#xff0c;不仅不会出现不适感&#xff0c;还能享受清晰动听音乐&…

executor行为相关Spark sql参数源码分析

0、前言 参数名和默认值spark.default.parallelismDefault number of partitions in RDDsspark.executor.cores1 in YARN mode 一般默认值spark.files.maxPartitionBytes134217728(128M)spark.files.openCostInBytes4194304 (4 MiB)spark.hadoop.mapreduce.fileoutputcommitte…

snap使用interface:content的基础例子

snap做包还在学习阶段&#xff0c;官网文档可查看&#xff1a;The content interface | Snapcraft documentation该例子由publiser和consumer两部分组成&#xff0c;一个提供一个只读的数据区&#xff0c;一个来进行读取其中的信息&#xff0c;这样就完成了content的交互。publ…

华为机试题:HJ90 合法IP(python)

文章目录&#xff08;1&#xff09;题目描述&#xff08;2&#xff09;Python3实现&#xff08;3&#xff09;知识点详解1、input()&#xff1a;获取控制台&#xff08;任意形式&#xff09;的输入。输出均为字符串类型。1.1、input() 与 list(input()) 的区别、及其相互转换方…

ICASSP 2023论文模型开源|语音分离Mossformer

人类能在复杂的多人说话环境中轻易地分离干扰声音&#xff0c;选择性聆听感兴趣的主讲人说话。但这对机器却不容易&#xff0c;如何构建一个能够媲美人类听觉系统的自动化系统颇具挑战性。 本文将详细解读ICASSP2023本届会议收录的单通道语音分离模型Mossformer论文&#xff0…

EXCEL职业版本(3)

Excel职业版本&#xff08;3&#xff09; 公式与函数 运算符 算数运算符 关系运算符 地址的引用 相对引用&#xff1a;你变它就变&#xff0c;如影随形 A2&#xff1a;A5 绝对引用&#xff1a;以不变应万变 $A$2 混合引用&#xff1a;识时务者为俊杰&#xff0c;根据时…

tkinter实现悬浮文字

悬浮文字效果如下图&#xff1a;不可点击&#xff0c;不可选中&#xff0c;任务栏不显示图标&#xff0c;文字背景完全透明。 实现方法&#xff1a; root.wm_overrideredirect(True) wm_overrideredirect方法&#xff0c;在Windows平台下&#xff0c;这个函数的作用&#xff…

项目规模估算如何精准 4大注意事项

项目报价&#xff0c;需要首先进行项目规模估算&#xff0c;如何估算更精准&#xff0c;6大注意事项。 1、项目范围规划 在项目估算前&#xff0c;需要对项目范围进行规划&#xff0c;这包括所有活动以及开发可交付产品所需的流程。范围规划是前提&#xff0c;它明确定义了项目…

操作系统内核与安全分析课程笔记【1】链表、汇编与makefile

文章目录链表循环双向链表哈希链表其他链表汇编内联汇编扩展内联汇编makefile链表 链表是linux内核中关键的数据结构。在第二次课中&#xff0c;重点介绍了循环双向链表和哈希链表。这两种链表都在传统的双向链表的基础之上进行了针对效率的优化。(ps&#xff1a;这部分可以通…

smp_init过程解析

当你看到这样的log&#xff0c;会不会很慌张&#xff1f;竟然由CPU没有启动成功&#xff0c;除了什么故障&#xff1f;本文将结合我遇到的一个问题&#xff0c;将启动过程中bringup secondary cpu的过程分析一下。smp_init代码如下&#xff1a;602 void __init smp_init(void) …

合肥工业大学密码学课设-RSA

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;课设-密码学课设-RSA &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#…

牛客刷题第一弹

1.异常处理 都是Throwable的子类&#xff1a; ①.Exception&#xff08;异常&#xff09;:是程序本身可以处理的异常。 ②.Error&#xff08;错误&#xff09;: 是程序无法处理的错误。这些错误表示故障发生于虚拟机自身、或者发生在虚拟机试图执行应用时&#xff0c;一般不需…

百丽时尚×优维科技×道客战略启动「云原生一体化项目」

3月7日&#xff0c;由百丽时尚集团&#xff08;以下简称&#xff1a;百丽时尚&#xff09;联合优维科技、道客共同举办的「云原生一体化项目启动会」在深圳百丽国际大厦圆满落幕&#xff0c;项目合作三方齐聚一堂&#xff0c;就云原生一体化建设战略方案达成合作共识&#xff0…

【LeetCode每日一题】——783.二叉搜索树节点最小距离

文章目录一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【解题思路】七【题目提示】八【题目注意】九【时间频度】十【代码实现】十一【提交结果】一【题目类别】 深度优先搜索 二【题目难度】 简单 三【题目编号】 783.二叉搜索树节点最小距…

Hands-on C++ Game Animation Programming阅读笔记(九)

Chapter 12: Blending between Animations This fade is usually short—a quarter of a second or less. (动画之间的fade一般很快&#xff0c;0.5s甚至更短) 本章重点&#xff1a; 两个Pose的Blending不同Animations的CrossFading&#xff0c;会有一个cross fade controller…

OpenCV入门(六)快速学会OpenCV5图像处理基础(二)像素处理

OpenCV入门&#xff08;六&#xff09;快速学会OpenCV5图像处理基础&#xff08;二&#xff09; 像素是图像构成的基本单位&#xff0c;像素处理是图像处理的基本操作&#xff0c;可以通过位置索引的形式对图像内的元素进行访问、处理。 1.二值化操作 需要说明的是&#xff…

2023年上半年北京杭州/广州深圳软考中/高级报名入口

软考是全国计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff08;简称软考&#xff09;项目&#xff0c;是由国家人力资源和社会保障部、工业和信息化部共同组织的国家级考试&#xff0c;既属于国家职业资格考试&#xff0c;又是职称资格考试。 系统集成…

【人脸识别】ssd + opencv Eigenfaces 和 LBPH算法进行人脸监测和识别

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言ssd opencv Eigenfaces 和 LBPH算法进行人脸监测和识别1. ssd 目标监测2.opencv的三种人脸识别方法2.1 Eigenfaces2.2 LBPH前言 ssd opencv Eigenfaces 和 LB…

hadoop的补充配置与常用脚本

目录 历史服务器的配置&#xff1a; 添加配置&#xff1a; 分发集群&#xff1a; 日志聚集功能的配置&#xff1a; 添加配置&#xff1a; 分发配置给集群其他服务器&#xff1a; 集群的启动与停止&#xff1a; 整体启动和停止hdfs&#xff1a; 整体启动/停止YARN 启动…