初学Vue.js，从头来过~初识vue很多还屡不清，所以按照文档，敲了下，留下来理解. 以上是根据官方文档敲出来的，可忽

之前上课也学过vue.js，但是一遍过下来，实话，没有记住什么，所以决定自己在对照着文档过一遍，所以之后会弄一些基础的东西，还请大神们莫喷~~~~

今天先给平台打一个预防针，Young C  要来啦~~  吼吼，基础中的基础。

那这里，不能全是大白话，咱们先说点干的吧，比如说 如何安装Vue.js。。。。

哈哈 ~~  是不是被简单的惊到了，  慢慢来。。。。。所以要淡定，淡定。。。。。

安装Vue.js 方法

- 直接引用 vue.js 文件
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
-NPM安装

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev

初识vue很多还屡不清，所以按照文档，敲了下，留下来理解.


   <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>index</title>
          <script src="../../node_modules/vue/dist/vue.js"></script>
        </head>
        <body>
        <!--app-->
        <div class="app">
          <p style="color: brown">app</p>
          {{message}}
        </div>
        <!--app2-->
        <div class="app2">
          <p style="color: brown">app2</p>
          <span :title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
        </div>
        <!--app3-->
        <div class="app3">
          <p style="color: brown">app3</p>
          <p v-if="start">现在看到我了</p>
        </div>
        <!--app4-->
        <div class="app4">
          <p style="color: brown">app4</p>
          <ul>
            <li v-for="item in list">{{item.text}}</li>
          </ul>
        </div>
        <!--app5-->
        <div class="app5">
          <p style="color: brown">app5</p>
          <p>{{message}}</p>
          <button @click="fanzhuan">点击翻转</button>
        </div>
        <!--app6-->
        <div class="app6">
          <p style="color: brown">app6</p>
          <p>{{message}}</p>
          <input v-model="message">
        </div>
        <!--app7-->
        <div class="app7">
          <p style="color: brown">app7</p>
          <ol>
            <todo-item
            v-for="item in app7List"
            :todo="item"
            :key="item.id"
            >
            </todo-item>
          </ol>
        </div>
        <script>
          let app = new Vue({
            el:'.app',
            data:{
              message:'hello,word'
            }
          });
          //-----------------------app2
          let app2 = new Vue({
            el:'.app2',
            data:{
              message:'页面加载于' + new Date().toLocaleString()
            }
          });
          //--------------------app3
          let app3 = new Vue({
            el:'.app3',
            data:{
              start:true
            }
          });
          //--------------------app4
          let app4 = new Vue({
            el:'.app4',
            data:{
              list:[
                {text:'从头'},
                {text:'再来'},
                {text:'一遍'}
              ]
            }
          });
          app4.list.push({
            text:'测试'
          });
          //--------------------app5
          let app5 = new Vue({
            el:'.app5',
            data:{
              message:'hello,js.vue'
            },
            methods:{
              fanzhuan(){
                this.message = this.message.split('').reverse().join('');
              }
            }
          });
          //-------------------app6
          let app6 = new Vue({
            el:'.app6',
            data:{
              message:'hello,js.vue'
            }
          });
        
          //-------------------app7
          Vue.component('todo-item',{
            props:['todo'],
            template:'<li>{{todo.text}}</li>'
          });
          let app7 = new Vue({
            el:'.app7',
            data:{
             app7List:[
               {
                 id:1,
                 text:'蔬菜'
               },
               {
                 id:2,
                 text:'水果'
               },
               {
                 id:3,
                 text:'主食'
               }
             ]
            }
          })
        </script>
        </body>
        </html>

以上是根据官方文档敲出来的，可忽略。