Vue—上手实践—快速入门
原文地址：Vue快速入門
目錄
3.快速入門
3.1.創建工程
3.2.安裝vue
3.2.1.下載安裝
3.2.2.使用CDN
3.2.3.推薦npm安裝
3.3.vue入門案例
3.3.1.HTML模板
3.3.2.vue聲明式渲染
3.3.3.雙向綁定
3.3.4.事件處理
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的。
效果：
?
總結
以上是生活随笔為你收集整理的Vue—上手实践—快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue—上手实践—环境搭建
- 下一篇： 为什么vue前端项目要使用nodejs