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、组件:

三、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、文本插值：

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

2、纯 HTML：

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

3、属性：

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 上

Hello! //v-if 指令将根据表达式 greeting 值的真假删除/插入

元素

7、参数：

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

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

9、缩写：

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

1、绑定class
　1）对象语法

2）数组语法