一、Vue簡介
學過前端的人都懂JQuery,我們通過簡單比較JQuery來認識Vuejs框架:
JQuery:
使用選擇器($)操作DOM對象(賦值、取值、事件綁定等),屬於原生的HTML開發(數據與界面一體化)。
vue:
通過Vue對象將數據和View頁面完全分離。對數據進行操作無需引用相應的DOM對象,通過Vue對象實現雙向數據綁定,通過對數據的操作就可以完成對頁面視圖的渲染。就是MVVM開發模式。
jquery 是以操作dom爲主,vue.js是以操作數據爲主,你只需要操作數據就好,dom自動更新
簡單總結
jquery是直接操作dom元素的前端腳本語言。
vue是將頁面元素封裝成一個數據對象來操作的前端框架。
二、安裝方式
1、 下載並安裝node.js
網址:https://nodejs.org/en/ 根據自己電腦系統選擇合適的版本,安裝方式跟普通Win軟件一樣,安裝完成在cmd命令窗口使用 node -v查詢版本號
node -v
2、安裝npm
打開cmd,使用淘寶NPM鏡像下載安裝(國內鏡像網速快):
輸入命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完成在cmd命令窗口使用 npm -v查詢版本號;
npm -v
3、vue-cli安裝
在cmd命令窗口運行 cnpm install -g vue-cli
cnpm install -g vue-cli
安裝完成輸入 vue 查看安裝結果:
4、創建Vue項目
創建一個文件夾workspace_webstorm,並用cmd命令行進入此文件夾下(cd D:\workspace_webstorm),執行命令:vue init webpack web-cus-vue,按下圖提示輸入 Yes和No進行組件安裝:
vue init webpack web-cus-vue
之後按Enter鍵選擇安裝插件。就可發現workspace_webstorm文件夾下多了個web-cus-vue文件夾,使用cd命令進入這個文件夾內,執行 npm install 命令進行項目安裝,安裝完成後項目中多了node_modules文件夾:
npm install
5、啓動vue項目
使用cmd命令進入web-cus-vue文件夾內,執行npm run dev即可運行項目:
npm run dev
打開瀏覽器即可訪問項目:http://localhost:8080
三、實現第一個HelloWorld
修改項目中的文件src/APP.vue如下,引入HelloWorld組件(後面會深入學習組件):
<!-- 展示模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
// 導入組件
import Hello from './components/HelloWorld'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<!-- 樣式代碼 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
接下來,修改src/components/HelloWorld.vue文件如下代碼:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'HelloWorld,這個是我的第一個VUE項目!'
}
}
}
</script>
END.