vue.js 基礎知識篇

vue.js什麼

  • Vue.js 被定義成一個用來開發 Web 界面的前端庫,是個很是輕量級的工具。 Vue.js自己具備響應式編程和組件化的特色。

  • Vue.js是一套構建用戶界面(view)的MVVM框架。Vue.js的核心庫只關注視圖層,而且很是容易學習,很是容易與其餘庫或已有的項目整合。

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
  • vue.js的特性:

  • 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!"
}
  • v-if條件例如:

<div id="app">
    <h1 v-if="kanjian">我能看到</h1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            kanjian:true
        }
    });
</script>
  • v-for循環渲染例如:

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('');
    }
  }
})
相關文章
相關標籤/搜索