Java自学——VUE简单入门

VUE简介

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

快速入门

1. 新建 HTML 页面，引入 Vue.js文件
2. 在JS代码区域，创建Vue核心对象，进行数据绑定

	new Vue({
		el: "#app",
		data() {
		return {
		username: ""
		}
	}
	});

创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
el ： 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data ：用来定义数据模型
methods ：用来定义函数。这个我们在后面就会用到
3. 编写视图

<div id="app">
		<input name="username" v-model="username" >
		{{username}}
	</div>

{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

Vue 指令

指令 作用
v-bind 为HTML标签绑定属性值，如设置 href , css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性

Vue生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法

mounted ：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据