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('');
    }
  }
})