2.Vue 声明式渲染
Hello，我是 Alex 007，一個熱愛計算機編程和硬件設(shè)計的小白，為啥是007呢？因為叫 Alex 的人太多了，再加上每天007的生活，Alex 007就誕生了。
2.創(chuàng)建第一個Vue應(yīng)用
這篇文章我將帶領(lǐng)大家創(chuàng)建第一個Vue應(yīng)用，并且講解一下什么是聲明式渲染。
預(yù)備知識：
那我接下來呢，我們看這個 Vue.js 的起步和聲明式渲染，Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進 DOM 的系統(tǒng)，它的應(yīng)用可以分為兩個重要部分，一個是視圖，另一個是腳本。
我們還是來寫寫代碼吧，新建一個index.html文件，在body中創(chuàng)建一個id為app的div標(biāo)簽：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="app"></div></body> </html>然后我們要通過script標(biāo)簽引入Vue.js：
<script type="text/javascript" src="vue.js"></script>當(dāng)我們引入Vue.js的時候呢，會聲明一個全局變量，它的名字就叫作Vue，通過new Vue的方式可以獲得一個Vue對象，這個對象被我們稱之為應(yīng)用對象或者是Vue.js對象。
在new Vue的時候呢，需要注意傳遞一個對象作為參數(shù)，這個對象有兩個非常重要的屬性，第一個是el(element)，利用id選擇器的方式綁定一個div，第二個重要的屬性是data，data是一個用于保存數(shù)據(jù)的對象，我們在視圖中使用了哪些變量就需要在data里面聲明這些變量。
我們可以聲明一個message1變量，值為Hello World，然后在綁定的div中通過h3以雙大括號的形式渲染它，就可以就可以看到頁面中已經(jīng)渲染出來了。
<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中準(zhǔn)備好的數(shù)據(jù)一個一個插進入，這就叫插值表達式。
雙大括號中除了可以插入data中的數(shù)據(jù)，還可以直接插入數(shù)字、字符串、對象（注意括號）、表達式、函數(shù)返回值等等。
<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>現(xiàn)在我們已經(jīng)創(chuàng)建了第一個Vue應(yīng)用，看起來這就是渲染一個字符串模板，但是Vue在背后做了大量的工作。
在Vue中數(shù)據(jù)和DOM已經(jīng)被建立了關(guān)聯(lián)，所有的東西都是響應(yīng)式的，這也正是Vue的魅力所在。
好了，這篇文章的內(nèi)容就講到這里，我們創(chuàng)建了一個Vue應(yīng)用，然后用了插值表達式，下一篇文章我們講講如何在Vue中的條件渲染。
總結(jié)
以上是生活随笔為你收集整理的2.Vue 声明式渲染的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 378. Kth Smallest El
- 下一篇： 32. Longest Valid Pa