Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了。
2.创建第一个Vue应用
这篇文章我将带领大家创建第一个Vue应用,并且讲解一下什么是声明式渲染。
预备知识:
- HTML基础知识。HTML的编程水平要达到中级水平,熟悉基本的标签并且自己制作过简单的页面;
- CSS基础知识。CSS的水平也要达到中级,最好有半年以上的切图和布局经验;
- JavaScript基础知识。要求对基本的语法有了解;
- Node.js基础知识。不做要求,最好了解npm的基本使用。
那我接下来呢,我们看这个 Vue.js 的起步和声明式渲染,Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,它的应用可以分为两个重要部分,一个是视图,另一个是脚本。
我们还是来写写代码吧,新建一个index.html文件,在body中创建一个id为app的div标签:
<!DOCTYPE html>
<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>
到这里之后你可能会有点懵,我们来做一个类比,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中的条件渲染。