Vue简明实用教程(01)——Vue框架入门

Vue简明实用教程(01)——Vue框架入门Vue是一个渐进式的JavaScript框架。Vue主要特征如下:

大家好,又见面了,我是你们的朋友全栈君。


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

Vue概述

Vue是一个渐进式的JavaScript框架。

官方网站

https://cn.vuejs.org/

在这里插入图片描述

主要特征

Vue主要特征如下:

易用

以原生HTML、CSS、JavaScript为基础,入门简易。

灵活

不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。

高效

Vue运行时所需空间较小,性能优异。

官方文档

https://cn.vuejs.org/v2/guide/
在这里插入图片描述

入门示例

在此,以示例形式详细介绍Vue框架最简单的使用。

开发环境搭建

首先,我们来搭建开发环境

创建项目

使用IDEA以Maven方式创建项目Vue01
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

调整项目

创建好项目之后,我们对现有项目略微调整以便于前端开发。

要点概述:

  • 1、在main下创建webapp文件夹
  • 2、在webapp下创建vue文件夹
  • 3、在vue文件夹下创建js文件夹
    在这里插入图片描述

引入Vue文件

在js文件夹中引入Vue文件。

要点概述:

  • 1、vue.js为开发环境版本
  • 2、vue-min.js为生成环境版本

在这里插入图片描述

页面开发

在vue文件夹下创建前端页面001HelloWorld.html,并在页面中引入vue文件。

要点概述:

  • 1、一个页面中只能存在一个Vue实例,不能创建多个vue实例
  • 2、vue实例中元素属性(el属性)代表vue实例的作用范围
  • 3、vue实例中data属性用于为当前vue实例绑定自定义数据
  • 4、在vue实例作用范围内可以使用{
    {data属性中变量名}} 获取data中的变量名对应属性值
  • 5、使用{
    {}}进行data中数据获取时,可以在{
    {}}中进行算数运算、逻辑运算以及调用相关类型的相关方法
  • 6、vue实例中el属性可以书写任何css选择器。但是,推荐使用id选择器;因为一个vue实例只能作用于一个作用范围
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="js/vue.js"></script>
<script type="text/javascript"> // 入口函数 window.onload = function () { 
 new Vue({ 
 el: "#div1", data: { 
 name: "谷哥的小弟" } }); } </script>
</head>
<body>
<div id="div1">
<h1>{
{name}}</h1>
<span>{
{name}}</span>
<h1><span>{
{name}}</span></h1>
</div>
</body>
</html>

测试

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/136202.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Spring中Model、ModelMap、ModelAndView理解和具体使用总结

    Spring中Model、ModelMap、ModelAndView理解和具体使用总结在了解这三者之前,需要知道一点:SpringMVC在调用方法前会创建一个隐含的数据模型,作为模型数据的存储容器,成为”隐含模型”。也就是说在每一次的前后台请求的时候会随带这一个背包,不管你用没有,这个背包确实是存在的,用来盛放我们请求交互传递的值;关于这一点,spring里面有一个注解:@ModelAttribute:被该注解修饰的方法,会在每一次请求时优先执行,用于接收前台js…

    2022年6月29日
  • Zynq 7020 学习心得【1】

    Zynq 7020 学习心得【1】今天对照Miz702的板子,学习了EMIO的用法,遇到了一点问题,经过分析和尝试,解决了,写出来,给大家参考一下。第一个问题,约束文件报warning,并且生成bitstream出错。开发板教程中

    2022年8月5日
  • pycharmlinux安装教程_深度linux系统官网

    pycharmlinux安装教程_深度linux系统官网Linux系统下PyCharm的安装1.什么是PyCharm2.什么是IDE3.PyCharm的安装4.PyCharm的使用5.pycharm的一些快捷键1.什么是PyCharmPyCharm是一种PythonIDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试、语法高亮、Project管理、代码跳转、智能提示、自动完成、单元测试、版本控制。此外…

    2022年8月28日
  • 手机qq空间各种代码_QQ空间仅彼此可见

    手机qq空间各种代码_QQ空间仅彼此可见手表代码↓[em]e10026[/em]{uin:5720,nick:GoldVish,who:1}相机代码↓[em]e10022[/em]{uin:5720,nick:拍摄于07月22日,who:1}{uin:5720,nick:阿尔及利亚天气:阴,who:1}飞机代码↓[em]e10020[/em]{uin:5720,nick:乘坐于巴西天马航空JJ8280航班(A舱),who:1}认证代码↓[em]e10023[/em]{uin:5720,nick:文字已通过..

    2022年8月10日
  • java代码生成器,springboot代码生成器,加入oracle支持

    java代码生成器,springboot代码生成器,加入oracle支持续接上一篇博客,今天生成器又加入了oracle的支持,界面做了些许的微调,先看一下效果吧比之前好看了一点点吧,然后我们进行oracle配置在这里随便选了公司局域网oracle数据库中的一张表,名字有点长,然后点击数据项配置在这里对交互进行了优化,因为首次连接数据库有时会花费几秒的时间,加了一些提示,如果出现错误,也会出现友好提示,在这里就不一…

    2022年5月29日
  • Android MD5加密

    Android MD5加密概述在网络中传输明文是一件非常危险的事情,所以通常将密码加密后传至服务器,由服务器保存密文在登录判定时只需比较密文是否相同即可。MD5加密是一种常用的加密算法,全称为“Message-DigestAlgorithm5”,即消息摘要算法,由MD2、MD3、MD4演变过来的,是一种单向加密算法,是一种不可逆的加密方式MD5优点:压缩性:任意长度的数据,算出的MD5值长度都是固定的。容易计算:从原数…

    2022年7月11日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号