【小白学习Vue | 2】学习Vue基本语法

最新推荐文章于 2024-08-19 10:00:00 发布

cungudafa

最新推荐文章于 2024-08-19 10:00:00 发布

阅读量564

点赞数

分类专栏： # Vue Java前后端开发学习文章标签： vue基本语法

本文链接：https://blog.csdn.net/cungudafa/article/details/98747114

版权

Java前后端开发学习同时被 2 个专栏收录

58 篇文章 5 订阅

订阅专栏

Vue

12 篇文章 10 订阅

订阅专栏

一、Vue基本语法资源

学习Vue基本语法：
本篇完全参考vue官网介绍：https://vuejs.org/v2/guide/index.html
也有官方给出了视频教学例子：在Scrimba上学习本课程
(这里需要外网，速度快一些；当然也是全英文教学，可以参考)
本文写了如何测试及基本语法，更多语法参考官网介绍。

二、学习Vue基本语法

1.文本传值

1.1静态插值

html:

语法（双花括号）: {{message}}
功能: 向页面输出数据
可以调用对象的方法

js:

el:挂载到指定名称的html标签上
data:绑定的数据 -->相当于给html中使用的时候所传的值
methods：绑定的方法 [注意：其中this代表Vue对象]

我在HBuilder进行验证性学习：【小白学习Vue | 1】安装Vue并配置HBuilder
在之前的vuetest.html中添加如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  {{ message }}
		</div>
		<script>
		new Vue({
		    el:'#app',
		    data: {
		        message:'Hello World!'
		    }
		});
		</script>
	</body>
</html>

这里是创建vue实例与html上的元素进行绑定

el：让vue的实例接管哪一个element，上面的代码是接管app；

data：为message实例里面的数据。
在这里插入图片描述

1.2动态传值

将vuetest.html中修改为如下代码：

<div id="app-2"></div>
var app2 = new Vue({
  el: '#app-2',
  template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',
  data: {
    msg: "How old are you",
	number: 10086

  }
})