Vue.js学习系列（三）---第一个vue.js程序

按照之前的操作。我们在桌面上创建了一个新的vuejs项目。点开文件夹，我们可以看到文件夹包含以下内容

 

但是在使用vuejs框架中，我们主要是使用src这个文件夹下的App.vue这个文件，在这里编写代码。这里我们使用的是Sublime来打开该文件。打开之后的代码如下：

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <h1></h1>

    <h2>Essential Links</h2>

    <ul>

      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>

      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>

      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>

      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>

    </ul>

    <h2>Ecosystem</h2>

    <ul>

      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>

      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>

      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>

      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>

    </ul>

  </div>

</template>

 

<script>

export default {

  name: 'app',

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  }

}

</script>

 

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

 

h1, h2 {

  font-weight: normal;

}

 

ul {

  list-style-type: none;

  padding: 0;

}

 

li {

  display: inline-block;

  margin: 0 10px;

}

 

a {

  color: #42b983;

}

</style>

这是模板初始化的代码，它实现的界面如下图：

就是我们创建新项目成功，显示的界面。

在这段代码中，有以下大部分，

1. <template> ：写html

2. <script>：写js

3.<style>：写样式

 

下面我们就在使用vuejs框架实现我们的第一个程序，在页面上显示Hello，vuejs

我们可以将<template></template>内的代码修改为

<template>

  <div id="app">

  <div>{{msg}}</div>

  </div>

</template>

在<script> </script>中来编写如下代码

<script>

export default {

  name: 'app',

  data () {

    return {

      msg: 'Hello, vuejs'

    }

  }

}

</script>

此时页面显示如下图：

这样我们就完成了第一个vuejs程序的编写。