JavaWeb『Vue.js』快速入门_java vue.js-程序员宅基地

技术标签: java  web  前端  vue.js  javascript  

Vue快速入门

第一节 准备Vue.js环境

1、开发中的最佳实践

『最佳实践』是实际开发中,针对特定问题提炼出来的最好的解决方案。把『最佳实践』抽取出来,封装到各自编程语言的程序包中,就是框架的基础。

  • Java语言的程序包:jar包
  • JavaScript语言的程序包:外部js文件

对于Java程序来说,框架=jar包+配置文件。对于Vue来说,导入Vue的外部js文件就能够使用Vue框架了。

2、Vue框架的js文件获取

官网提供的下载地址:https://cdn.jsdelivr.net/npm/vue/dist/vue.js

3、本地创建vue.js文件

此教程是在idea中直接操作。

第一步:在idea中创建javaweb工程

在这里插入图片描述

第二步:在工程web目录下创建script目录用来存放vue.js文件

第三步:创建空vue.js文件

第四步:将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中

在这里插入图片描述

4、创建HTML文档并引入vue.js

在demo01.html中引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
</head>
<body>

</body>
</html>

第二节 Vue.js基本语法:声明式渲染

1、概念

①声明式

『声明式』 是相对于 『编程式』 而言的。

  • 声明式:告诉框架做什么,具体操作由框架完成
  • 编程式:自己编写代码完成具体操作

②渲染

在这里插入图片描述

  • 蓝色方框:HTML标签
  • 红色圆形:动态、尚未确定的数据
  • 蓝色圆形:经过程序运算以后,计算得到的具体的,可以直接在页面上显示的数据、
  • 渲染:程序计算动态数据得到具体数据的过程

2、demo

①HTML代码

		<!-- 使用{
   
    {}}格式,指定要被渲染的数据 -->
		<div id="app">{
  
   {message}}</div>

②vue代码

// 1.创建一个JSON对象,作为new Vue时要使用的参数
var argumentJson = {
   
    
	
	// el用于指定Vue对象要关联的HTML元素。el就是element的缩写
	// 通过id属性值指定HTML元素时,语法格式是:#id
	"el":"#app",
	
	// data属性设置了Vue对象中保存的数据
	"data":{
   
    
		"message":"Hello Vue!"
	}
};

// 2.创建Vue对象,传入上面准备好的参数
var app = new Vue(argumentJson);

在这里插入图片描述

3、查看声明式渲染的响应式效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function (){
     
      
            var argumentJson = {
     
      

                // el用于指定Vue对象要关联的HTML元素。el就是element的缩写
                // 通过id属性值指定HTML元素时,语法格式是:#id
                "el":"#app",

                // data属性设置了Vue对象中保存的数据
                "data":{
     
      
                    "message":"Hello Vue!"
                }
            };

            // 2.创建Vue对象,传入上面准备好的参数
            var app = new Vue(argumentJson);
        }
    </script>

</head>
<body>
<div id="app">{
  
   {message}}</div>

</body>
</html>

在这里插入图片描述

第三节 Vue.js基本语法:绑定元素属性

1、基本语法

v-bind:HTML标签的原始属性名

2、demo

①HTML代码

<div id="app">
	<!-- v-bind:value表示将value属性交给Vue来进行管理,也就是绑定到Vue对象 -->
	<!-- vueValue是一个用来渲染属性值的表达式,相当于标签体中加{
   
    {}}的表达式 -->
	<input type="text" v-bind:value="vueValue" />
	
	<!-- 同样的表达式,在标签体内通过{
   
    {}}告诉Vue这里需要渲染; -->
	<!-- 在HTML标签的属性中,通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 -->
	<p>{
  
   {vueValue}}</p>
</div>

②Vue代码

// 创建Vue对象,挂载#app这个div标签
var app = new Vue({
   
    
	"el":"#app",
	"data":{
   
    
		"vueValue":"太阳当空照"
	}
});

3、小结

本质上,v-bind:属性名="表达式"它们都是用Vue对象来渲染页面。只不过:

  • 文本标签体:使用形式
  • 属性:使用v-bind:属性名="表达式"形式

第四节 Vue.js基本语法:双向数据绑定

1、提出问题

在这里插入图片描述

而使用了双向绑定后,就可以实现:页面上数据被修改后,Vue对象中的数据属性也跟着被修改。

2、demo

①HTML代码

<div id="app">
	<!-- v-bind:属性名 效果是从Vue对象渲染到页面 --
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45987063/article/details/125098929

智能推荐

SpringBoot实现注册操作_springboot不同身份注册-程序员宅基地

文章浏览阅读2.1k次,点赞3次,收藏10次。这段时间开始做后台接口的测试都是在自己电脑上做的一些简单的界面来测试自己写的接口有没有出现什么问题。_springboot不同身份注册

oracle em-application.log 占用空间_oracle中em-application.log-程序员宅基地

文章浏览阅读2.3k次。运行一段时间后,发现磁盘空间剧减,除了数据占用空间外,日志文件也占用空间.如下两个文件占用空间较大home/oracle/rda/outpu/*.loghome/oracle/product/10.2.0/db/oc4j/j2ee/OC4J_DBConsole_gxdb1_gxdb1/log/http-web-access.loghttp-web-access.log_oracle中em-application.log

mini2440 简单按键中断模式驱动程序_make -c $(kern_dir) m=`pwd` modules clean-程序员宅基地

文章浏览阅读853次。MakefileKERN_DIR = /home/grh/kernel_source_code/linux-2.6.32.2all : make -C $(KERN_DIR) M=`pwd` modules arm-linux-gcc key_interrupt_app.c -o key_interrupt_appclean : make -C $(KERN_DIR) M=`pwd_make -c $(kern_dir) m=`pwd` modules clean

subprocess.Popen BrokenPipeError: [Errno 32] Broken pipe-程序员宅基地

文章浏览阅读5.1k次,点赞3次,收藏9次。BrokenPipeError: [Errno 32] Broken pipe在向管道中写入参数的时候,一段时间正常写入数据后,若长时间未写入数据,则会报错BrokenPipeError: [Errno 32] Broken pipe,且该进程会进入睡眠原代码 # 定义管道及ffmpeg命令,输出rtmp流的时候使用command = ['ffmpeg', '-y', '-v', '24', # 日志显示等级 '-f', 'rawv_brokenpipeerror: [errno 32] broken pipe

身价1亿日元的“机器人观音”问世,为普罗大众讲解佛义 ...-程序员宅基地

文章浏览阅读81次。只有人们想不到的,没有机器人做不到的。 日前,日本高台寺展示了智能机器人观音“Minder”,旨在向现代人简单易懂的阐明佛教的教义。 据了解,“Minder”由大阪大学教授石黑浩等人协助研发,研发费用为1亿日元(约600万人民币)。外形方面,“Minder”高约195厘米、重约60公斤,头部、手臂和躯体可以转动,左眼内装有摄像头。 研究..._养猪起家身价1296亿

pandas获得指定行_pandas取dataframe特定行/列_pandas选取特定值所在的行-程序员宅基地

文章浏览阅读1.6w次,点赞13次,收藏96次。转自他人博客:https://blog.csdn.net/weixin_39586825/article/details/1117585061.按列取、按索引/行取、按特定行列取import numpy as npfrom pandas import DataFrameimport pandas as pddf=DataFrame(np.arange(12).reshape((3,4)),index=[‘one’,‘two’,‘thr’],columns=list(‘abcd’))df[‘a’]_pandas选取特定值所在的行

随便推点

php 判断post编码格式,php如何判断get或post的值是否存在-程序员宅基地

文章浏览阅读717次。php如何判断get或post的值是否存在,这个问题困扰了我很长时间,是用isset还是empty还是is_array啥的,请大神给一个指点回复内容:php如何判断get或post的值是否存在,这个问题困扰了我很长时间,是用isset还是empty还是is_array啥的,请大神给一个指点isset()是判断这个变量是否定义,empty()是在这个变量已经定义的情况下(如果变量没定义,将报错var..._isset empty $_get

计算机系统课程 笔记总结 CSAPP第七章 链接(7.1-7.13)_csapp 7.6.1-程序员宅基地

文章浏览阅读2.6k次,点赞16次,收藏45次。GitHub计算机系统CSAPP课程资源 计算机系统课程 笔记总结 CSAPP第二章 信息的表示和处理(2.1-2.2) 计算机系统课程 笔记总结 CSAPP第二章 信息的表示和处理(2.3-2.4) 计算机系统课程 笔记总结 CSAPP第三章 程序的机器级表示(3.2-3.4) 计算机系统课程 笔记总结 CSAPP第三章 程序的机器级表示(3.5-3.7) 计算机系统课程 笔记总结 ..._csapp 7.6.1

Redis总结-程序员宅基地

文章浏览阅读248次。目录概述Redis是什么?简述它的优缺点?为什么要使用Redis/缓存Redis为什么这么快?Redis相比Memcached有哪些优势?Redis的常用场景有哪些?数据类型Redis的数据类型有哪些?线程模型Redis为何选择单线程?Redis真的是单线程?Redisv6.0为何引入多线程?过期键的删除策略Redis过期键的删除策略?过期键的删除策略都有哪些?内存相关MySQL里有2000w数据,redis中只能存20w的数据,如何保证redis中的数据都是热点数据?Redis内存淘汰机制?Redis如何

nginx平滑重启和升级-程序员宅基地

文章浏览阅读77次。平滑重启 kill -HUP `cat /usr/local/www/nginx/logs/nginx.pid`平滑升级nginxcd /yujialinwget http://nginx.org/download/nginx-1.0.6.tar.gztar zxvf nginx-1.0.6.tar.gzcd nginx-1.0.6/usr/local/www/nginx/sbin/nginx -..._php 平滑升级

什么是ip6-程序员宅基地

文章浏览阅读3.9k次。相比于IPv4来说,IPv6的地址更加充足,安全性也更高,可以解决如今IP地址枯竭的问题,为物联网时代的发展提供网络基础;Pv6具有更大的地址空间,使用更小的路由表,加入了对自动配置的支持。ipv6是什么Pv6是第六代互联网协议,被设计用于替代使用了30多年的第四代互联网协议的下一代IP协议。由于IPv4最大的问题在于网络地址资源有限,严重制约了互联网的应用和发展,所以出现了替代版本的IP协议。..._ip6

android bluetooth stack-enable_android bluetooth stack-enable-程序员宅基地

文章浏览阅读2.5k次。android bluetooth stack_android bluetooth stack-enable