什么是vue.js

官方说明：是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js的特性

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

安装vue.js

官网：https://cn.vuejs.org/v2/guide/installation.html

点击下载

使用vue.js

Vue.js提供了一个vue对象，要使用vue.js 需要把它new出来
<script>new Vue({el:’#xxxx’,data:{}})</script>
el的作用是声明vue对象的作用边界，绑定上面dom标签的id
data的作用是存放显示在页面中的数据，在标签中以{{}}来获取。
我们知道vue是一个mvvm框架，前端的html页面相当于view，data对应的是后端的model，而我们new出来的vue对象则代表桥接前后端的view-model。也是整个mvvm框架的核心！

绑定文本data

下面是一个简单的hello world小栗子

举个栗子

运行页面显示hello world

绑定元素特性

不光可以绑定文本值，还可以对一些元素特性进行绑定 如：

<div id="app2" v-bind:title='message'>
        <span>鼠标悬停触发</span>
</div>

Js文件：

let app2 = new Vue({
    el:'#app2',
    data:{
        message:'hi~~ 平田君~~'
    }
})

展示效果，是不是很方便啦

hi,又见面了平田君~~

绑定函数

例如：

    <div id="root">
        <div v-on:click="handleClick" ><h1>{{content}}</h1></div>
    </div>

Js：

let root = new Vue({
    el : "#root",
    data:{
        content : "hello"
    },
    methods: {
        handleClick: function(){
            if(this.content === 'hello')
            this.content = "world"
            else
            this.content = "hello"
        }
    }
})

这段代码通过v-on将鼠标点击事件click与vue函数handleclick绑定到一起，当发生鼠标点击事件的时候执行handleclick函数，将在hello 和 world之间来回切换
同样的v-on:click也可以简写为@click

双向绑定

<div id='shuru'>
       <input :value="content"/>
       <div>{{content}}</div>
   </div>

单项属性绑定value的时候 输入东西content不发生变化

    <div id='shuru'>
        <input v-model="content"/>
        <div>{{content}}</div>
    </div>

使用v-model 可以实现双向绑定，效果如下，当输入框中数据发生变化的时候vue对象中data里的content属性也会跟着发生相应的变化。

计算属性

<div id='ex'>
    <input v-model='one'/> +
    <input v-model='two'/> =
    {{sum}}
</div>

Js代码：

let ex = new Vue({
    el:"#ex",
    data:{
        one : "",
        two : "",
    },
    computed:{
        sum : function(){
           return Number(this.one) + Number(this.two)
        }
    }
})

通过computed将sum绑定到div，可以实现函数运算返回

侦听器

watch:{
    sum : function(){
        this.count++
    }
}

使用watch可以对元素进行侦听，上面例子是对sum进行监听，当sum值发生变化的时候count进行自增，用来统计计算sum的次数

因为是即时计算，输入了5次也就说明计算了5次

条件与循环指令

控制一个元素的显示与否也是很简单的 我们可以使用v-if和v-show来做
我们变个戏法

<div id='root'>
    <div v-if="show">{{count}}</div>
    <button @click="oneTick">{{fashu}}</button>
</div>

Js代码：

let ex = new Vue({
    el:"#root",
    data:{
        count:"戏法---->",
        show:true,
        fashu:"雾隐雷藏"
    },
    methods:{
        oneTick:function(){
            this.show = !this.show;
            if(this.fashu==="雾隐雷藏")
                this.fashu = "明心见性";
            else if(this.fashu==="明心见性")
                this.fashu = "雾隐雷藏";           
        }
    } 
})

消失了

而当v-show的时候则是增加一条css属性display:none，显示的时候再去掉。

<div id="root1">
        <ul>
            <li v-for="tool of tools">{{tool}}</li>
        </ul>
  </div>

Js代码：

let ab = new Vue({
    el:"#root1",
    data:{
    tools:["A","B","C"]
}

展示效果

总结

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

• v-bind：指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性，v-bind:可以缩写为“：”
• v-on：指令用于给监听DOM事件，它的用语法和v-bind是类似的，v-on:可以缩写为“@”
• v-model：双向绑定
• v-if：是条件渲染指令，它根据表达式的真假来删除和插入元素
• v-show：也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
• v-else：可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。
  如果if指令为true，则else不会被渲染，如果show指令为true则else一样会渲染到html页面，不过是style为none
• v-for：基于一个数组渲染一个列表，它和JavaScript的遍历语法相似。