版权声明

本文原创作者：谷哥的小弟
作者博客地址：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>

测试

Vue简明实用教程(01)——Vue框架入门相关推荐

Vue简明实用教程(13)——Vue的生命周期
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl Vue生命周期图示 Vue生命周期详解理解Vue的生命周期可以帮助我们更好地理解Vue的运行 ...
REDM库使用教程01（详细入门）
写这篇文章初衷在于,虽然开发这套框架的作者很叼,但是教程写的有点糟糕,坑了我一个晚上研究. REDM库的简单介绍 https://gitee.com/hgy413/REDM 然后要先装好VS2010; ...
廖雪峰python3爬虫教程_Scrapy爬虫框架入门教程（1）——爬取廖雪峰老师的博客...
最近一直在学习scrapy,但是网上关于scrapy的教程实在是太少,能找到的教程大多都是基于py2.7/scrapy0.2以下,甚至很多教程都是互相抄袭,连代码都抄漏了好多,更别提各种缩进错误.变量 ...
DOXYGEN简明实用教程
代码写多了难免需要做文档,给自己还是给别人看都需要如此,这次XBOX360制作,前期没怎么写注释,回头改Bug都要猜半天自己写的代码是什么意思.更别提别人写的东西,100行代码也没有一句注释,幸好不是 ...
vi(vim)入门简明实例教程---总览全局快速入门
正文 1.Starting And Stopping vi 启动和退出vi 我们需要学习的第一件事就是如何启动和退出vi. 启动vim只需要键入 qiaoqiao@ubuntu:~$ vi 即可, ...
Rational Rose简明实用教程
UML中各种图形概要: 图名对照说明用例图 use case diagram 用例图表明系统做什么,与谁交互.用例是系统提供的功能,参与者是系统与谁交互,参与者可以是人.系统或其他实体.一个系统 ...
Vue 所有实用插件集合汇总
Vue 所有实用插件集合汇总框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 ...
React从入门到精通教程01
React从入门到精通教程 React从入门到精通教程 React简介官方文档 React使用来干什么的为什么需要React React特点 React基础 React的使用 Hello Worl ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...

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

版权声明

Vue概述

官方网站

主要特征

官方文档

入门示例

开发环境搭建

创建项目

调整项目

引入Vue文件

页面开发

测试

Vue简明实用教程(01)——Vue框架入门相关推荐

最新文章

热门文章