创建第一个Vue应用(声明式渲染)

Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了。

这篇文章我将带领大家创建第一个Vue应用,并且讲解一下什么是声明式渲染。

预备知识:

  1. HTML基础知识。HTML的编程水平要达到中级水平,熟悉基本的标签并且自己制作过简单的页面;
  2. CSS基础知识。CSS的水平也要达到中级,最好有半年以上的切图和布局经验;
  3. JavaScript基础知识。要求对基本的语法有了解;
  4. Node.js基础知识。不做要求,最好了解npm的基本使用。

那我接下来呢,我们看这个 Vue.js 的起步和声明式渲染,Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,它的应用可以分为两个重要部分,一个是视图,另一个是脚本。

我们还是来写写代码吧,新建一个index.html文件,在body中创建一个id为app的div标签:


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">div>
	body>
html>

然后我们要通过script标签引入Vue.js:

<script type="text/javascript" src="vue.js">script>

当我们引入Vue.js的时候呢,会声明一个全局变量,它的名字就叫作Vue,通过new Vue的方式可以获得一个Vue对象,这个对象被我们称之为应用对象或者是Vue.js对象。

在new Vue的时候呢,需要注意传递一个对象作为参数,这个对象有两个非常重要的属性,第一个是el(element),利用id选择器的方式绑定一个div,第二个重要的属性是data,data是一个用于保存数据的对象,我们在视图中使用了哪些变量就需要在data里面声明这些变量。

我们可以声明一个message1变量,值为Hello World,然后在绑定的div中通过h3以双大括号的形式渲染它,就可以就可以看到页面中已经渲染出来了。

		<div id="app">
			<h3>{{ message1 }}h3>
		div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message1:'Hello World',
				},
			})
		script>

创建第一个Vue应用(声明式渲染)_第1张图片

到这里之后你可能会有点懵,我们来做一个类比,id为app的div就好像一块地,通过Vue被我们工作室承包了,然后我们想在这块地上种点瓜果蔬菜,这个双大括号就类似于刨的一个个坑,然后把data中准备好的数据一个一个插进入,这就叫插值表达式。

双大括号中除了可以插入data中的数据,还可以直接插入数字、字符串、对象(注意括号)、表达式、函数返回值等等。

		<div id="app">
			<h3>{{ message1 }}h3>
			<h3>{{ 123 }}h3>
			<h3>{{ "Alex" }}h3>
			<h3>{{ {name: 'Alex',age: 18} }}h3>
			<h3>{{ 1 != 2 ? 'Nice' : 'Fuck' }}h3>
			<h3>{{ getName(0) }}h3>
		div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message1: 'Hello World',
				},
				methods: {
					getName(userId) {
						return 'Alex';
					},
				}
			})
		script>

现在我们已经创建了第一个Vue应用,看起来这就是渲染一个字符串模板,但是Vue在背后做了大量的工作。

在Vue中数据和DOM已经被建立了关联,所有的东西都是响应式的,这也正是Vue的魅力所在。

好了,这篇文章的内容就讲到这里,我们创建了一个Vue应用,然后用了插值表达式,下一篇文章我们讲讲如何在Vue中使用条件判断和循环。

你可能感兴趣的:(Vue从入门到核心)