vue学习笔记系列（二）

动手第一个demo

我们多少都会了解vue的核心就是数据，实现了数据的双向绑定。话不多说先上代码：

<div>
	<input  type="text" v-model="name" placeholder="请输入你的名字">
	<h1>你好，{{name}}</h1>
</div>

<script>
	var app = new Vue({
		el:'#app',
		data:{
			name:''	
		}
	})
</script>

此时输入的表单的数据就会自动绑定到name这个值上面去，然后显示到页面上。
在这里插入图片描述
1 、 Vue实例与数据绑定

创建实例，这里的构造函数Vue就创建了一个app实例

var app = new Vue({
	el:'#app',
	data:{
		name:''	
	}
})

必不可少的就是el，用于指定一个已存在的DOM元素来挂载Vue实例，挂载成功后我们可以通过app.$el来访问该元素。Vue实例本身代理了data对象里的所有属性：

var myData={
	a:1
}

var app = new Vue({
	el:'#app',
	data:{
		myData
	}
})
console.log(app.a)   //1
app.a=2;
console.log(myData.a);  //2
myData.a=3;
console.log(app.a);  //3

以上例子可以说明，显式声明的数据指向一个已有的变量，并且它们之间默认建立了双向绑定，修改任意一个另一个就会跟着改变。
在这里插入图片描述
2 、生命周期

beforeCreate：在实例初始化之后，数据观察者（data observer）和event/watcher事件配置之前调用。
created：实例创建完成后立即调用。实例已完成数据观察者的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性不可见。
beforeMount：在挂载开始之前调用，相关的render函数首次调用。
mounted：el被新创建的vm.$el替换，并且挂载到实例上之后再调用该钩子。如果root实例挂载了一个文档内元素，当调用mounted时vm.$el也在文档内。
beforeUpdated：在数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy：实例销毁之前调用，此时实例完全可用。
destroyed：实例销毁后调用，实例指示的所有东西都接触绑定，所有的事件监听器会被移除，子实例也会被销毁。
activated：keep-alive组件激活时调用。
deactivated：keep-alive组件停用时调用。
ErrorCapture：捕获一个来自子孙组件错误时调用。

5和6这两个不常用，且不推荐使用

3 、指令和事件

v-if
v-for
v-show
v-on
v-model
v-bind
v-html

上面的指令为常用的指令，下面就来说一下它们的区别和用法：

v-if 和 v-show的区别：v-show是CSS级别的display:none;和display:block;之间的切换，而v-if 决定是否显示代码块的内容，是属于DOM级别的操作。频繁操作时使用v-show，一次性渲染完成的时候选择v-if。对于v-if的优化，由于v-if为false的时候内部组件是不会渲染的，所以在特定时候需要渲染组件的时候（或异步，如$nextTick是在下次更新循环结束之后延迟执行回调，用于获得更新后的DOM）设置为true，优先渲染其他内容。
v-bind用于动态更新HTML元素上的属性，如id、class等。而v-on表示给元素绑定一个点击事件，可以是原生的事件，如果绑定原生事件则需要@click.native这样写。它们的语法糖（简写）为：bind和 @click
v-model主要是实现数据的双向绑定的，用于表单元素上。
v-html主要是解析HTML文档，防止以字符串形式解析出来。

vue学习笔记系列（二）

动手第一个demo

猜你喜欢