2018-09-10

一、Vue.js简介

1、Vue.js是什么？

Vue.js也称为Vue,

版本 v1.0 v2.0

是一个用来构建用户界面的框架

是一个轻量级的MVVM框架(Model-View-ViewModel)框架，其实就是数据的双向绑定

数据驱动+组件化的前端开发(核心思想)

通过简单的API可以实现响应式的数据绑定和组合的视图组件

更容易上手、小巧

参考官网：vuejs.org

2.vue

由个人维护，尤雨溪，华人，目前就职于阿里巴巴

2014 2月开源了vue.js的源代码

都不兼容低版本的IE

v-for: 对数组或对象进行循环操作

1.v-for:循环数组对象

{{val.num}}

{{val.name}}

{{val.price}}

new Vue({

el:'#itany',

data:{

arrs:[

{num:1,name:'苹果',price:3},

{num:2,name:'香蕉',price:2},

{num:3,name:'鸭梨',price:1}

]

}

})

v-model:双向数据绑定，常用于表单元素

2.v-model

{{msg}}

new Vue({

el:'#itany',

data:{

msg:''

}

})

v-on:时间绑定,用法：v-on:事件

3.v-on:时间绑定

按钮

var vm=new Vue({

el:'#itany',

data:{

msg:'hello vue'

},

methods:{

alt:function(){

alert(vm.msg)

alert(this.msg)

}

}

})

v-show/v-if：控制元素的显示隐藏

此内容可见

v-if此内容不可见

此内容可见

v-if此内容不可见

      new Vue({

          el:'#itany',

          data:{

              see:true

          }

      })

v-bind 绑定属性 v-bind:属性='值'