Javascript

Vue学习

本文主要是介绍Vue学习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

传送门

  • 1、定义
  • 2、下载VUE.JS
  • 3、进入实战
  • 4、小结

1、定义

1.1 官网地址：https://cn.vuejs.org/

                  官网解释为：渐进式JavaScript框架（对原始JS的封装）

1.2 渐进式：
在这里插入图片描述
1.3 具体来说：html中JavaScript常用语句——document.getElementByid("")，为了简化这些语句，建议使用Vue，是前后端分离的架构核心

1.4 前后端分离的交互：Vue(前)———JSON————>Springboot（后）

2、下载VUE.JS

2.1 需要联网的两种方式：

直接向html中导入两种之一（版本对应要一致）
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2.2 无需联网的方式：

https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

https://cdn.jsdelivr.net/npm/vue@2

以上两个网址分别对应不同版本，网页搜索下载后导入项目即可、

3、进入实战

3.1 代码01：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE01</title>
</head>
<body>
<div id="apa">
{{ ml }}<br/>
<h2>{{bl}}</h2>
</div>
</body>
</html>
<!-- 引入开发vue版本 -->
<script src="js/vue.js"></script>
<script>//vue元素数据要放在作用块的下面，否则找不见
var apa=new Vue({
	el:"#apa" ,//元素作用：用来指定VUE实例作用范围
	data:{       //数据作用：用来给VUE实例对象绑定一系列数据
		ml:"CSDN欢迎您！",
		bl:"你爱我我爱你 mxbc甜蜜蜜"
	}
});
</script>

运行界面：
在这里插入图片描述

3.2 代码02：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE02</title>
</head>
<body>
<div id="app">
{{ml}}<br/>
{{user.name}}<br/>
{{girls[0]}}<br/>
{{users[0].name}}<br/>
{{users[2].age}}<br/>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
 var app=new Vue({
	el:"#app",//作用范围
	data:{
		ml:"小李",
		user:{name:"小米",age:33,sex:"男"},//对象属性
		girls:["lia","lee","lisa"],//数组
		users:[
			{name:"张三",age:09,sex:"男"},
			{name:"王五",age:88,sex:"男"},
			{name:"李四",age:02,sex:"女"},
		]//数组对象属性结合
	}
	
})
</script>

运行界面：
在这里插入图片描述
3.3 代码03：

<div id="app">
<h2>{{ml}}您好</h2><!-- 不会覆盖标签内数值 -->
<h2  v-text="ml">您好</h2><!-- 覆盖标签内数值 -->
</div>

运行界面：
在这里插入图片描述

<div id="app">
<h2>{{ml}}您好</h2><!-- 不会覆盖标签内数值 -->
<h2> <span  v-text="ml"></span>您好</h2><!-- 不会覆盖标签内数值 -->
</div>

运行界面：
在这里插入图片描述

4、小结

  • 导入的VUE.JS标签放在html体外或作用域标签块后
  • 先创建Vue对象，在el中定义作用范围，在data中定义数据名与数据值。在除却作用范围的区域内想要获取数据都是无效行为
  • 获取数组值时结合下标，获取对象属性值时“对象.属性”
  • 不要把作用域指向body、html，一般指向div
  • 除了{{}}可以取值以外，v-text或v-html也可以取值。不同的是，前者不会重置标签内原始数据，后者会将标签内原始数据覆盖
这篇关于Vue学习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航