vue.js什麼
Vue.js 被定義成一個用來開發 Web 界面的前端庫,是個很是輕量級的工具。 Vue.js自己具備響應式編程和組件化的特色。
Vue.js是一套構建用戶界面(view)的MVVM框架。Vue.js的核心庫只關注視圖層,而且很是容易學習,很是容易與其餘庫或已有的項目整合。
vue.js簡介:
全局安裝 vue-cli
$ npm install --global vue-cli
建立一個基於 webpack 模板的新項目
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
- 1 . 數據雙向綁定
- 2 . 指令
- 3 . 模板
- 4 . 組件
MVVM模式
M: model 業務模型,用處:處理數據,提供數據
V: view 用戶界面、用戶視圖
業務模型model中的數據發生改變的時候,用戶視圖view也隨之變化。用戶視圖view改變的時候,業務模型model中的數據也能夠發生改變。
1組件化
2指令系統
3.js 2.0開始支持虛擬DOM(Vue.js 1.0 是操做的真是DOM,而不是虛擬DOM)虛擬DOM能夠提高頁面的刷新速度。
一個基本的vue示例是由三部分組成 1:視圖。2:數據。3:viewmodel。
聲明式渲染例如:
<div id="app">
{{msg}}
</div>
<script>
var data={
msg:"hello world" // model數據
};
new Vue({ // viewmodel視圖模型
el:"#app",
data:data
});
//vue 是一個 mvvm框架
//model-view-viewmodel 這三部分的組合
</script>
<div id="app">
{{massage}}
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}
<div id="app">
<p>{{message}}</p>
<input v-model="message" />
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}
<div id="app">
<h1 v-if="kanjian">我能看到</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
kanjian:true
}
});
</script>
v-for 指令能夠綁定數組的數據來渲染一個項目列表:
<div id="app1">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<script>
var app1 = new Vue({
el:"#app1",
data:{
todos:[
{text:"學習Vue"},
{text:"學習node"},
{text:"學習jQuery"}
] }
});
</script>
v-on 指令綁定一個事件監聽器,經過它調用咱們 Vue 實例中定義的方法:
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
el: "#app",
data:{
message:"Hello Vue.js!"
},
methods:{
reverseMessage:function()
{
this .message = this.message.split('').revserse().join('');
}
}
})