从0开始学习vue——一个简单的vue使用

193 阅读3分钟

一个简单的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>

渲染结果

image.png

我们来逐个解释一下:

  • 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>

image.png

可以看到,原本的<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的了解和使用是不是又加深了一点呢?至于配置中的其他属性,会在下一节中来详细描述。


以上内容仅供学习参考,可能会有不够严谨的地方还望见谅,欢迎讨论。