2.Vue 声明式渲染
Hello，我是 Alex 007，一個熱愛計算機編程和硬件設計的小白，為啥是007呢？因為叫 Alex 的人太多了，再加上每天007的生活，Alex 007就誕生了。
2.創建第一個Vue應用
這篇文章我將帶領大家創建第一個Vue應用，并且講解一下什么是聲明式渲染。
預備知識：
那我接下來呢，我們看這個 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中的條件渲染。
總結
以上是生活随笔為你收集整理的2.Vue 声明式渲染的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 378. Kth Smallest El
- 下一篇： html5倒计时秒杀怎么做,vue 设