乐趣区

关于vue.js:Vue项目的第一个Hello-world组件Hello-Vue讨论一下Vue的核心特性以及webpack式开发的项目特点

jiezi

上一节把一个 Vue 的残缺目录及其意义记录了一下，接下来就来写一个咱们的第一个 Vue 组件，一个最简略的 Hello Vue

咱们在上回说的 components 文件夹上面新建一个 HelloVue.vue 文件。
而后在外面写上上面的代码：

<template>
  <div>
    <p>Hello, Vue!</p>
    <p>{{msg}}</p>
  </div>
</template>
<script>
export default ({
  name: 'HelloVue',
  data () {
    return {msg: 'Fala oviara'}
  }
})
</script>

这样第一个组件咱们就算写好了。察看一下组件外部的一些小细节：

    • 在 template 标签外部写咱们原先的 html 代码

    • 在 script 标签外部写组件封装的 JS 代码

      • 其中 export default 为当别的中央引入这个组件时，组件裸露给内部的办法、变量等等
    • 当然，如果针对这个组件有非凡的款式需要的话，能够在这个组件文件里写 style 标签去申明款式

    看一下咱们第一个 Hello Vue 组件进去的成果：
    这里我想探讨两个 Vue 框架的个性。

    • 申明式渲染

      vue.js 的外围是容许采纳简洁的模板语法来申明式地将数据渲染进 DOM

      依据文档上形容，Vue 中的数据都是以申明的形式渲染进 DOM 的，在 Hello Vue 中咱们用了一个最简略的模板，即：

      // HTML
<div id="app">
  {{msg}}
</div>
// JS
var app = new Vue({
  el: '#app'
  data: {msg: 'Fala oviara'}
})

      并且从此以后，msg 这个变量就变成了 响应式 变量，咱们不用去辛辛苦苦操作 DOM 上的元素，而是在 JS 中去操作 app 这个 Vue 对象即可。也就是说组件中的所有数据，咱们都是在组件的对象里去操作，至于对象怎么变成 HTML，所有都交给 Vue 就行了。响应式是什么意思呢？只有你在 JS 中批改了 msg 的值，（例如 app.msg = 'another value'）HTML 相应地就会被批改。
      然而你们可能会发现，我下面的代码如同和文档上的不太一样？文档上新建了一个 Vue 的对象，而我的 Hello Vue 代码里并没有，这是怎么回事呢？这里就引出我想探讨的第二点：

    • Vue 组件中须要新建 Vue 对象吗？

      答案是不须要。这里就引申出咱们创立的 vue 我的项目的个性了，它是基于 webpack 开发模式的。我将来会用另一篇博文论述它和其余开发模式的不同。而这个开发模式最大的特点，就是整一个我的项目之中会有一个 ** 入口文件 **，在咱们这个我的项目中，就是 main.js, 在这个文件里，咱们会申明一个 Vue 对象，这个对象就作为整个我的项目的 App，所有其余的组件应该在这个 app 外面去援用。咱们写的组件，都会被 vue 的 loader 主动重载为实例或组件对象。

      如果不明确这个个性，很可能会对组件的写法上产生一些纳闷或者误会。

    Hello Vue 的内容补充

    所以，如果你是在我的项目之中写 Hello Vue 组件的，你可能会找不到本人写好的组件在哪里，因为入口文件中并找不到你刚刚写好的组件。之前我没有说的是，在我写好 Hello Vue 组件之后，还有一步就是把这个组件放到咱们的 路由文件 里。路由文件其实就是一个地图，通知你上哪去找咱们的组件。
    在 router > index.js 中，

    1. 在文件头引入咱们的组件。
    import HelloVue from '@/components/views/HelloVue'
    1. 在 Router 对象的 routes 属性外面新增加一个组件 path 对象：
        {
      path: '/views/hellovue', // 门路
      name: 'Hello,Vue', // 名称
      component: HelloVue // 组件
    }

    这样一来，在 URL 中输出以下地址，就能让咱们我的项目 APP 的路由局部跳转到方才写好的 Hello Vue 外面了。

    入口页面

    地址栏写入 http://localhost:8080/#/views/helloVue 跳转：

    当然，咱们一个我的项目中，页面的跳转必定不能让用户本人去地址输出，须要用一些按钮之类的点击跳转，这些内容当前再记录分享给大家。
    通过第一个 Hello Vue 我的项目，咱们探讨了 Vue 框架的外围：申明式渲染，它带来的渲染个性，以及一个 webpack 式的 Vue 我的项目的特点。将来的博文还会持续摸索 vue，目前为止，我还是很喜爱这个框架的 :P

    退出移动版