3.快速入門
接下來，我們快速領略下vue的魅力
3.1.創建工程
創建一個新的空工程：
然后新建一個module：
選中static web，靜態web項目：
位置信息：
3.2.安裝vue
3.2.1.下載安裝
下載地址：https://github.com/vuejs/vue
可以下載2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下載解壓，得到vue.js文件。
3.2.2.使用CDN
或者也可以直接使用公共的CDN服務：
<!-- 開發環境版本，包含了用幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3.2.3.推薦npm安裝
在idea的左下角，有個Terminal按鈕，點擊打開控制台：
進入hello-vue目錄，先輸入：npm init -y 進行初始化
安裝Vue，輸入命令：npm install vue --save
然后就會在hello-vue目錄發現一個node_modules目錄，並且在下面有一個vue目錄。
node_modules是通過npm安裝的所有模塊的默認位置。
3.3.vue入門案例
3.3.1.HTML模板
在hello-vue目錄新建一個HTML
在hello.html中，我們編寫一段簡單的代碼：
h2中要輸出一句話：xx 非常帥。前面的xx是要渲染的數據。
3.3.2.vue聲明式渲染
然后我們通過Vue進行渲染：
<body>
<div id="app">
<h2>{{name}}，非常帥！！！</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
// 創建vue實例
var app = new Vue({
el:"#app", // el即element，該vue實例要渲染的頁面元素
data:{ // 渲染頁面需要的數據
name: "峰哥"
}
});
</script>
- 首先通過 new Vue()來創建Vue實例
- 然后構造函數接收一個對象，對象中有一些屬性：
- el：是element的縮寫，通過id選中要渲染的頁面元素，本例中是一個div
- data：數據，數據是一個對象，里面有很多屬性，都可以渲染到視圖中
- name：這里我們指定了一個name屬性
- 頁面中的
h2元素中，我們通過{{name}}的方式，來渲染剛剛定義的name屬性。
打開頁面查看效果：
更神奇的在於，當你修改name屬性時，頁面會跟着變化：
3.3.3.雙向綁定
我們對剛才的案例進行簡單修改：
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{{name}}，非常帥！！！有{{num}}位女神為他着迷。
</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
// 創建vue實例
var app = new Vue({
el: "#app", // el即element，該vue實例要渲染的頁面元素
data: { // 渲染頁面需要的數據
name: "峰哥",
num: 5
}
});
</script>
- 我們在data添加了新的屬性：
num - 在頁面中有一個
input元素，通過v-model與num進行綁定。 - 同時通過
{{num}}在頁面輸出
效果：
我們可以觀察到，輸入框的變化引起了data中的num的變化，同時頁面輸出也跟着變化。
- input與num綁定，input的value值變化，影響到了data中的num值
- 頁面
{{num}}與數據num綁定，因此num值變化，引起了頁面效果變化。
沒有任何dom操作，這就是雙向綁定的魅力。
3.3.4.事件處理
我們在頁面添加一個按鈕：
<button v-on:click="num++">點我</button>
- 這里用
v-on指令綁定點擊事件，而不是普通的onclick，然后直接操作num - 普通click是無法直接操作num的。
效果：
