Vue简明实用教程(01)——Vue框架入门
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
Vue概述
Vue是一个渐进式的JavaScript框架。
官方网站
主要特征
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>
测试
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码