vue.js基础笔记（一）！！！！

Vue.js是什么？

Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue.js的目的

Vue.js的产生核心是为了解决如下三个问题：
- 解决数据绑定的问题；
- Vue.js框架生产的主要目的是为了开发大兴单页面应用（SPA：Single Page Application）Angular.js中对PC端支持的比较良好，但是对移动端支持就一般。而Vue.js主要支持移动端，也支持PC端。
- 它还支持组件化。也就是可以将页面封装成若干个组件，采用积木式编程，这样是页面的复用度达到最高（支持组件化）。

Vue.js特性

MVVM模式
- M: model 业务模型，用处：处理数据，提供数据
- V: view 用户界面、用户视图
业务模型model中的数据发生改变的时候，用户视图view也随之变化。用户视图view改变的时候，业务模型model中的数据也可以发生改变。
- 组件化
- 指令系统
- Vue.js 2.0开始支持虚拟DOM（Vue.js 1.0 是操作的真是DOM，而不是虚拟DOM）虚拟DOM可以提升页面的刷新速度。

一、起步

1、v-model(绑定数据)
2、v-for（循环）
3、v-on（绑定事件）
4、data（数据）
5、methods（方法）
6、$index（索引）

二、概述

1、data（绑定 DOM 文本到数据）
2、v-if（不满足条件的话则不会出现在dom中）
3、v-show（不满足条件，则样式会设置成隐藏 display:none;）
4、组件:

<div id="app3">
    <app-nav></app-nav>                     <!--导航-->
    <app-view>
       <app-sidebar></app-sidebar>         <!--侧边栏-->
       <app-content></app-content>         <!--展示内容-->
    </app-view>
</div>
<script type="text/javascript">
 var vm2=new Vue({
    el:"#app2",
    data:data2
});
</script>

三、Vue实例

1、构造器：Vue.extend
2、数据属性：vm.a
3、实例属性和方法：
　1）vm.$el
　2）vm.$data
　3）vm.$watch
　4）实例生命周期：

 var vm4 = new Vue({
        el:".box",
        data:{
            a:"声明周期"
        },
        beforeCreate(){
            console.log("组件创建之前")
        },
        created(){
            console.log("组件创建之后")
        },
        beforeMount(){
            console.log("组件挂载之前")
        },
        mounted(){
            console.log("组件挂载之后")
        },
        beforeUpdata(){
            console.log("组件更新之前")
        },
        updata(){
           console.log("组件更新完毕")
        },
        beforeDestroy(){
            console.log("组件销毁之前")
        },
        destroyed(){
        console.log("组件销毁之后")
        },
    })

四、数据绑定语法

1、文本插值：

    <span>Message:{{ msg }}</span>                       //每当这个属性变化时它也会更新
    <span v-once>This will never change:{{ msg }}</span> //一次性绑定

2、纯 HTML：

    <div v-html="rawHtml"></div>                         
//大括号会将数据解释为纯文本，为了输出真正的 HTML ，
需使用 v-html 指令，你不能使用 v-html 来复合局部模板，
组件更适合担任 UI 重用与复合的基本单元

3、属性：

    <div v-bind:id="dynamicId"></div>

4、绑定表达式：

    {{ number + 1 }}
    {{ ok ? ‘YES‘ : ‘NO‘ }}
    {{ message.split(‘‘).reverse().join(‘‘) }}
    一个限制是每个绑定只能包含单个表达式，因此下面的语句是无效的：
    {{ var a = 1 }}                                     //这是一个语句，不是一个表达式
    {{ if (ok) { return message } }}                    //流程控制也不可以，可改用三元表达式

5、过滤器：

    {{ message | capitalize }}                          //这个过滤器其实只是一个 JavaScript 函数，返回大写化的值
    {{ message | filterA | filterB }}                   //过滤器可以串联
    {{ message | filterA ‘arg1‘ arg2 }}                 //过滤器也可以接受参数：第一个参数—为过滤器函数，带引号的参数—为字符串，不带引号的参数—按表达式计算

6、指令：职责是—当其表达式的值改变时把某些特殊的行为应用到 DOM 上

    <p v-if="greeting">Hello!</p>                       //v-if 指令将根据表达式 greeting 值的真假删除/插入 <p> 元素

7、参数：

    <a v-bind:href="url"></a>                           //v-bind 指令，用于响应地更新 HTML 特性，用特性插值 href="{{url}}" 可获得同样的结果，但实际上它也是在内部特性插值，转为 v-bind 绑定
    <a v-on:click="doSomething"></a>                    //v-on 指令，用于监听 DOM 事件，参数是被监听的事件的名字

8、修饰符：以半角句号 . 开始的特殊后缀，表示指令应当以特殊方式绑定

<a v-bind:href.literal="/a/b/c"></a>

9、缩写：

   <a v-bind:href="url"></a>                            //完整语法
   <a :href="url"></a>                                  //缩写
   <a v-on:click="doSomething"></a>                     //完整语法
   <a @click="doSomething"></a>                         //缩写

五、class与style绑定（数据绑定在data上）

1、绑定class
　1）对象语法

  <div id="box" v-bind:class="{ ‘class-a‘: isA, ‘class-b‘: isB }"></div>
  <div id="box2" v-bind:class="classObject"></div>

2）数组语法

<div id="box3" v-bind:class="[classA,classB]"></div>
    <div id="box4" v-bind:class="[classA,isB?classB:‘‘]"></div>
    <div id="box5" v-bind:class="[classA,{classB:isB,classC:isC}]"></div>  <!--当有多个条件 class 时，在 1.0.19+ 中，可以在数组语法中使用对象语法

2、绑定内联样式style
　1）对象语法

    <div id="box6" v-bind:style="{color:activeColor,fontSize:fontSize+‘px‘}"></div>
    <div id="box7" v-bind:style="styleObject"></div>