初学Vue.js，从头来过~

之前上课也学过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-itemv-for="item in app7List":todo="item":key="item.id"></todo-item></ol></div><script>let app = new Vue({el:'.app',data:{message:'hello,word'}});//-----------------------app2let app2 = new Vue({el:'.app2',data:{message:'页面加载于' + new Date().toLocaleString()}});//--------------------app3let app3 = new Vue({el:'.app3',data:{start:true}});//--------------------app4let app4 = new Vue({el:'.app4',data:{list:[{text:'从头'},{text:'再来'},{text:'一遍'}]}});app4.list.push({text:'测试'});//--------------------app5let app5 = new Vue({el:'.app5',data:{message:'hello,js.vue'},methods:{fanzhuan(){this.message = this.message.split('').reverse().join('');}}});//-------------------app6let app6 = new Vue({el:'.app6',data:{message:'hello,js.vue'}});//-------------------app7Vue.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>复制代码