Vue教程2-实例

最新推荐文章于 2024-04-01 09:33:30 发布

ruby___ruby

最新推荐文章于 2024-04-01 09:33:30 发布

阅读量201

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/ruby___ruby/article/details/107335982

版权

Vue实例是通过new Vue()创建的，主要关注数据data和方法methods。数据data需声明，方法methods用于一系列操作。实例生命周期包括beforeCreate、Created、beforeMounte、Mounted、beforeUpdate、Updated、beforeDestroy和Destroyed。Created时可进行网络请求，Mounted阶段DOM已挂载，适合进行DOM操作。

摘要由CSDN通过智能技术生成

实例

创建一个Vue实例是通过 new Vue（） 创建的。我们在项目的main.js里面就看到了创建一个Vue实例代码，很显然，我们的项目里面总共就一个Vue实例。

var app = new Vue({
	el: '#app', // 绑定的HTML模版
	data: {
		//...
	},
	methods:{
		//...
	}
})

创建之后，我们就要关注实例里面的 数据data与方法methods。

数据与方法

数据data

所谓的数据，便是实例里面的data，data是一个对象，在对象里面便要声明一个个属性property，可以去教程3里面看看原理，Vue是使用的声明式渲染，只有在data对象中声明的的属性才有响应式的属性，必须在实例创建之前便在data里面声明，因此如果有些属性没有初始值，我们就帮助添加一个初始值，例如：0、’’、false、[]、null等。

var app = new Vue({
	el: '#app',
	data: {
		// 数据声明
		newTodoText: '',
		visitCount: 0,
		hideCompletedTodos: false,
		todos: [],
		error: null
	}，
	methods: {
		getOne(){