Vue.js学习之路—项目中实战学习（一）

在three中已经创建好了工程，接下来就在工程中开始学习。

首先我们跟着官网中的第一个小例子来学习，先来看看这个小例子。

     <div id = "app-6">
        <p>{{message}}</p>
        <input v-modal="message" n>
      </div>
    var app6 = new Vue({
      el:"#app-6",
      data:{
        message:'Hello Vue!'
      }
    })

最后的结果是：

打开工程目录下的App.vue（template中写html）

注意：这里有两个问题需要注意

• 一个组件下之能有一个并列的div，这里的div是指第一层
• 数据要写在return里面，而不能像写文档那样写

组件

组件是什么，可以查看官网下面来看看组件的定义及使用。
在工程目录/src/components（没有的可以自己创建一个component文件夹）文件夹下创建一个testonecomponent.vue，仿照App.vue的格式写一个组件。

    <template>
        <div id="testonecomponent">
            <h1>This is a component</h1>
            <a>{{author}}</a>
        </div>
    </template>
    <script>
        export default{
            name:'tesone',
            data:function(){
                return {
                    author:"Reliable-Ronni"
                }
            }
        }
    </script>

然后再App.vue使用组件（因为在 index.html 里面定义了 <div id="app"></div>所以就以这个组件作为主入口，方便 ）

使用

在 router文件下的index.js修改为以下样子

    import Vue from 'vue'
    import Router from 'vue-router'
    // import Hello from '@/components/Hello'

    Vue.use(Router)

    export default new Router({
      routes: [
        {
          path: '/',
          component: require('../components/TestOneComponent.vue')
        }
      ]
    })

注意： 在这里特别说明，一定要注意，组件的name 不能有空格，代码中的缩进一定要注意，规范，特别是使用webstorm的童鞋们
现在让我们来运行

    npm run dev

运行结果如下

漂亮的图标，本次到此为止，接下来在（二）中会继续学习新的内容