vue入门案例
安裝vue
下載安裝
下載地址：https://github.com/vuejs/vue
可以下載2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下載解壓，得到vue.js文件。
使用CDN
或者也可以直接使用公共的CDN服務：
<!-- 開發環境版本，包含了用幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者：
<!-- 生產環境版本，優化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>推薦npm安裝
在idea的左下角，有個Terminal按鈕，點擊打開控制臺：
進入hello-vue目錄，先輸入：npm init -y 進行初始化
安裝Vue，輸入命令：npm install vue --save
然后就會在hello-vue目錄發現一個node_modules目錄，并且在下面有一個vue目錄。
node_modules是通過npm安裝的所有模塊的默認位置。
vue入門案例
HTML模板
在hello-vue目錄新建一個HTML
在hello.html中，我們編寫一段簡單的代碼：
h2中要輸出一句話：xx 非常帥。前面的xx是要渲染的數據。
?
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屬性時，頁面會跟著變化：
總結
- 上一篇： vue介绍及环境安装
- 下一篇： vue入门案例详解