一个简单的vue使用
gitee仓库地址:get-you-kown-vue
上一节我们介绍了什么是vue以及vue的安装 点我跳转,这一节我们来看看如何使用vue。这里主要是让大家对vue有一个简单的了解,不需要太过扣细节。后面会针对细节进行讲解。
创建vue实例
vue 本身是一个构造函数(类),最终需要通过new一个实例,并向传入对应的配置参数。 配置参数有很多,但这一节我们主要关注几个比较常用和基础的配置参数:
- el
- data
- methods
- template
<div id="app">
<p>{{title}}</p>
<button @click="alert">点我</button>
</div>
<script>
let config = {
el: '#app',
data: {
title: '一个简单的vue实例'
},
methods: {
alert() {
alert('弹出了一点什么东西')
}
}
}
let vm = new Vue(config)
</script>
渲染结果
我们来逐个解释一下:
- el:el可以传入一个选择器或者一个dom元素,他最主要的作用是做一个容器绑定的作用,vue最终会将template编译后的dom替换该目标元素。我们一直说vue是数据驱动视图变化,那么驱动的目标是谁呢?就是我们绑定的这个元素。如果你还有点懵,别着急,接着向下看。
- data:data是最主要的数据域,这里面的数据最终都会被转化成响应式数据,当这些响应式数据发生变化的时候会使得视图进行更新(若视图中有绑定值)的操作。这里需要注意的是,并不是所有的响应式数据发生变化都会使得视图产生更新,主要取决于视图中是否有绑定响应式数据,这个部分后面会详细说。
- methods:methods是实例中的方法逻辑,这些方法最终都会被绑定到实例上,可以被实例中任意地方调用,不过要注意this指向,也可以像示例中作为事件回调被调用。
- template:template是html模板字符串,也是最终渲染到容器中的html代码。有些同学可能会发现,config中好像没有template这个参数。是的,当配置中没有template模板的时候,vue会将el绑定的dom元素的html作为template模板来使用。
举个简单的例子: el好比是某个地皮,template则是毛坯房图纸,当template不存在的时候,我们就会将原本地皮上的房子结构作为图纸进行构建,而data和methods就像是房子的装饰品,在搭建时候就将装饰品都放在对应的地方。最终渲染出来后就是一个成品房。
template
在配置中存在template的时候,vue会将template中的模板渲染到目标容器 比如:
<script>
let config = {
el: '#app',
data: {
title: '一个简单的vue实例'
},
methods: {
alert() {
alert('弹出了一点什么东西')
}
},
template: `
<div>
<h1>{{title}}</h1>
<button @click="alert">别tm点我</button>
</div>
`
}
let vm = new Vue(config)
</script>
可以看到,原本的<div id="app">...</div>
dom结构已经被template中的替换了,所以对于el绑定的dom元素来说,内部的结构并不是必须的,我们只是需要有一个渲染的目标而已,其最终渲染到目标容器的还是template中的html模板字符串。也就是我们可以这样:
<div id="app"></div>
<script>
let config = {
el: '#app',
...
template: `
<div>
<h1>{{title}}</h1>
<button @click="alert">别tm点我</button>
</div>
`
}
let vm = new Vue(config)
</script>
最终实现的效果也是相同的。
你需要知道,不管是template还是el绑定的元素,都不是最终渲染到页面上的结果,而是会通过编译器结合配置和模板生成新的dom结构并渲染到页面上。
模板 + (data|methods|...) -> 编译器 -> 最终的dom -> 渲染到页面上
看到这里,你对vue的了解和使用是不是又加深了一点呢?至于配置中的其他属性,会在下一节中来详细描述。
以上内容仅供学习参考,可能会有不够严谨的地方还望见谅,欢迎讨论。