1 Vue目录构造
build：我的项目构建webpack的相干代码config：配置目录，包含端口号等node_modules：npm加载的我的项目依赖模块src：开发的目录模块，蕴含assets（资源文件），components（组件文件），App.vue我的项目入口文件，main.js我的项目外围文件static：动态资源文件，如图片，字体等test：初始测试目录.xxx：配置文件，比方语法配置，git配置等等index.html：首页入口文件package.json：我的项目配置文件README.md：我的项目阐明文件
2 Vue对象
Vue对象的基本参数有：
el：DOM元素的iddata：用于定义属性methods：用于定义函数{{}}输入对象属性和函数返回值
一个Vue实例被创立时，会向Vue的响应式零碎退出了data中能找到的所有属性，当这些属性的值扭转时HTML视图也会产生相应变动。
3 Vue模板语法
Vue.js应用了基于HTML的模板语法，容许开发者申明式地将DOM绑定至底层Vue实例数据。
Vue.js的外围是一个容许你采纳简洁的模板语法来申明式的将数据渲染进DOM的零碎，联合响应零碎，在利用状态扭转时，Vue可能智能地计算出从新渲染组建的最小代价并利用到DOM操作上。
3.1 插值
插值分为两种形式：
- 纯文本
- HTML
纯文本能够应用{{}}插值，比方：
<div id="app">{{message}}</div><script>new Vue({ el:'#app', data:{ message:'text' }})</script>HTML应用v-html指令：
<div id="app" v-html="message"></div><script>new Vue({ el:'#app', data:{ message:'<h1>h1题目</h1>' }})</script>3.2 属性
属性绑定应用v-bind指令，比方：
<div v-bind:class="{'class1':use}"></div><script>new Vue({ el:'#app', data:{ use:false }})</script>3.3 表达式
能够在{{}}间接嵌入JS表达式，包含计算以及函数调用等等，比方：
<div id="app"> {{5.222-1.2345}} <br> {{ok ? 'YES' : 'NO'}} <br> {{message.reverse()}}</div><script> new Vue({ el:'#app', data:{ ok:true, message:'Reverse', }})</scirpt>3.4 指令
指令是带有v-前缀的非凡属性，指令用于在表达式的值扭转时，将某些行为利用到DOM上，比方：
<div id="app"> <p v-if="seen">看到了</p></div><script>new Vue({ el:'#app', data:{ seen:true }})</script>3.5 参数
参数在指令前面以冒号表明，比方v-bind指令用于响应地更新HTML：
<div id="app"> <a v-bind:href="url">某个网站</a></div><script>new Vue({ el:'#app', data:{ url:'https://www.xxx.com' }})</script>href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。
3.6 修饰符
修饰符是以.指明的非凡后缀，用于指出一个指令应该以非凡的形式绑定，例如.prevent修饰符告知v-on指令对于登程事件调用event.preventDefault()：
<form v-on:sbumit.prevent="onSubmit"></form> 3.7 v-model
v-model用来在input，select，textarea，chekcbox，radio等表单控件元素上创立双向的数据绑定，依据表单上的值更新绑定元素的值。比方：
<div id="app"> <p>{{message}}</p> <input v-model="message"></div><script>new Vue({ el:'#app', data:{ message:'text' }})</script>3.8 按钮事件
能够应用v-on:click监听按钮事件，比方：
<div id="app"> <p>{{message}}</p> <button v-on:click="reverse">反转字符串</button></div><script>new Vue({ el:'#app', data:{ message:'reverseeeeee' }, methods:{ reverse:function(){ this.message=this.messaage.split('').reverse().join('') } }})</script>3.9 过滤器
容许定义过滤器用作一些常见文本的格式化，比方：
<div id="app">{{message | f}}</div><script>new Vue({ el:'#app', data:{ message:'text' }, filters:{ f:function(value){ if(!value) return '' value = value.toString return value.charAt(0).toUpperCase()+value.slice(1) } }})</script>另外，过滤器能够串联以及承受参数：
{{message | filterA | filterB}}{{message | filterA('arg1','arg2')}} // message作为filterA的第一个参数，'arg1','arg2'别离为第二个，第三个参数将下面的过滤器改变一下：
<div id="app">{{message | f(10)}}</di><script>new Vue({ el:'#app', data:{ }, filter:{ f:function(value,times){ if(!value) return '' value = value.toString() value = value.charAt(0).toUpperCase()+value.slice(1) return value.repeat(times) } }})</script>3.10 缩写
v-bind:href能够缩写为:hrefv-on:click能够缩写为@click