初学Vue——part 1

Vue采用的开发模式

MVVM模式：面向数据编程 方便操作数据，简化了dom的操作，会减少代码量。

与MVP模式比较：MVP常用于JQuery，面向dom进行开发

Vue中的常见指令

指令	含义
v-bind	绑定
v-if	用于判断
v-for	绑定数组渲染列表
v-on	事件监听
v-model	表单输入与应用状态的双向绑定

指令简写

1.v-on可用@符号代替，如：v-on：index就等于@index
2.v-bind可以直接省略，如：v-bind：index就等于：index

Vue的实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

Vue实例的创建：

var vm = new Vue({//通常使用vm（ViewModel）变量名表示Vue实例
  // 选项
})

实例拥有很多属性和方法

并且所有的组件都是Vue实例

数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生==“响应”==，即匹配更新为新的值。

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

组件

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

组件的注册

1.全局组件的使用
在script中：

Vue.component("TodoItem",{//定义一个名为“TodoItem”的全局组件
		props:['content'],//props用于接收父组件传递的信息
		template:"<li>{{content}}</li>",//组件将content渲染出来
})

2.局部组件的使用
在script中：

var TodoItem = {
            props:['content','index'],
            template:"<li>{{content}}</li>",                     
            }       
}//局部组件
var app = new Vue({
            el:'#root',            
            components:{
                            TodoItem:TodoItem            
            },//使用局部组件时需要在这里注册
            data:{
                            list:[],                
                            inputValue:''            
            },
            methods:{
                            handleBtnClick: function() {
                                                this.list.push(this.inputValue)                    
                                                this.inputValue=''               
                            }                                                                   	                         
	   }	                                                                                  
})