vue2.0基础知识学习心得

vue2.0基础知识学习心得

概述：
首先vue是建立在JS之上的一种框架。所以vue中的一切指令、事件和组件都是JS中方法、事件和对象的延伸和包装。结合JS知识，看清vue中新概念的在JS中的本质，有助于同时加强对vue和JS两者的理解。

不难看出Vue就是一个精心设置的类，其中包括了component()方法自定义组件，也包括了filter()自定义过滤器。而组件其本质也是一个类。

一.组件
先来看一个最简单的vue实例

new Vue({
        el: '#itany',
        data:{
          flag:true,
          name: 'tom',
          arr:[1,2,3,4,5,2,3,4,5],
          user:{name:'yth', age:24, gender:'male'},
        },
        methods:{
          show:function(){
            console.log('hi');
          },
          add(){
            this.arr.push(666);
          },
          change(){
            this.flag = !this.flag;
          },
        }
      }) 

可以看出一个Vue的实例中，有el、data、methods等等属性，用来指定作用的元素、存储自身的数据和自定义的方法。这和ES6中类的结构是完全一致的。Vue这个类，则是为了更好地控制元素的展示以及协调浏览器呈现的数据与后台存储数据的关系而设计出来的。

一个组件，就是一个可以复用的Vue实例。

定义一个组件有两种方式
1.直接使用Vue.component()方法定义，定义的是全局组件。
2.是在创建Vue实例中，用components属性定义，定义的是局部组件。

组件定义的两种方式可以类比JS中实例化一个对象的两种方式。
(因为components是Vue对象的一个属性，而其本身也是一个对象，component()方法，就可以看作是他的构造函数。)

1. 使用构造函数法
   new 对象名(参数1， 参数2，…)

2. 直接定义对象内容法
   对象名={…}

二.指令
指令都是作用于元素上的，相当于给元素定义了一个新的属性。
vue中的指令均已"v-"开头，后面跟上指令的名称。
指令的用法举例：

• v-model：双向绑定数据。直白的说，当你在浏览器上修改被绑定的数据，后台数据跟着改变，当你修改后台数据时，浏览器上显示的数据也跟着改变。
  多用于<input>、<select>、<textarea>元素上。

<input type="text" v-model="name">{{msg}}

则{{msg}}与对应组件中的data属性中的msg属性的值双向绑定。

• v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
  直白的说，给元素的属性动态的绑定一个值。

<img v-bind:src="url">

则img的src属性的值与对应的组件的data中的url属性的值绑定。

三.过滤器
用于文本的格式化。
{{ message | capitalize }}
message为未被过滤的原始文本，capitalize为过滤器的名称。
自定义过滤器的方式：

Vue.filter('number', (data,n)=>{
            return data.toFixed(n);
        })

在上代码中，number就为自定义过滤器的名称。第一个形参data自动接受message的数据，而第二个形参为使用时接受使用者人为添加的数据。