Vue基础语法与todolist功能开发

1、Vue基础语法

1.1、挂载点、模板与实例

挂载点：vue实例里面el属性，后面id所对应的dom节点，vue实例只会处理挂载点下面的内容。

模板：在挂载点内部的内容，我们都把它叫做模板内容。

实例： new Vue() 创建出来一个实例，就是一个vue的组件，模板是写在实例里面，是实例的属性。

1.2、属性绑定和双向数据绑定

• 属性绑定：v-bind（可简写为":"）
• 双向数据绑定:v-modle

1.3、Vue中的计算属性和侦听器

• 计算属性：computed
• 侦听器：watch
  监听某个数据的变化，一旦发生变化，就可以在侦听器中写业务逻辑

var vm=new Vue({
	el:"#root",
	data:{
		content:"hello",
		name:"world"
	},
	methods:{
		handleClick:function(){
			this.content="world"
		}
	},
	computed:{
		fullName:function(){
			return this.content+" "+this.name;
		}
	},watch:{
		name:function(){
			mui.alert("name发生变化，变成了："+this.name)
		}
	}
})

1.4、v-if、v-show与v-for指令

• v-if:清除或添加元素
• v-show:显示和隐藏元素
• v-for:循环
  语法：v-for=“item of list”
  如果需要下标：v-for=“(item,index) of list”

2、todolist功能开发

2.1、组件拆分

• 创建组件方法

Vue.component('todo-item',{
    //接收外部传入的值
    props:['content','index'],
    //模板
    template:'<li>{{content}}</li>'
})

调用：

<todo-item v-for="(item,index) of  list" :content="item"></todo-item>

• 局部组件

var TodoItem={
    template:'<li>hello</li>'
}

局部组件不能直接调用，需要在Vue实例里进行注册

components:{
    'todo-item':TodoItem
}

2.2、组件与实例之间的关系

• Vue中的每一个组件也就是一个实例，组件里也可写method，也有它的data、、、

2.3、子组件向父组件传递事件

子组件：

this.$emit('delete',this.index)//第一个参数是方法名，第二个参数是传递的值

父组件：

<todo-item 
v-for="(item,index) of  list"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>

handleDelete:function(index){
    //index是传过来的值
}

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Hello World！

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，如下：

<div id="content">
  {{ message }}
</div>

var app = new Vue({
  el: '#content',
  data: {
    message: 'Hello World!'
  }
})

运行结果：Hello World!