项目目录结构：

	1.在一个项目中一般的目录结构为：my_project------------项目文件夹|____src--------------------------------存放人可以看懂的源代码，具备一定功能划分，mvc思想|____dist-------------------------------存放真实上线的代码（减少请求、混淆代码）|____webpack.config.js------------------把src下面的代码打包生成dist下的代码， 1. 命令行(终端)输入：webpack  ，立即读取webpack.config.js文件，并生成代码到dist文件夹中，此为生产时使用 |                                                                             2.测试时使用：webpack-dev-server运行src下面的代码，虚拟出build.js进行测试。                                                                          |____package.json-----------------------包管理文件，管理项目所依赖的包，供npm init初始化使用|____node_module------------------------依赖的包2.使用脚手架vue-cli初始化的项目中基本文件结构：build------------打包的配置所在的文件夹|____build.js--------------------------------构建生产版本,打生产的包|____check-versions.js-----------------------|____dev-client.js---------------------------|____dev-server.js---------------------------|____utils.js--------------------------------|____vue-loader.conf.js----------------------|____webpack-base.conf.js--------------------webpack打包核心配置|____webpack-dev.conf.js---------------------|____webpack-prod.conf.js--------------------config-----------webpack的配置文件夹|____dev.env.js------------------------------|____index.js--------------------------------核心配置，和webpack-base.conf.js基本一样，webpack把他分开架构|____prod.env.js-----------------------------src--------------开发项目的源码文件夹|____assets----------------------------------静态资源文件夹|____components------------------------------组件文件夹|____router----------------------------------路由文件夹|____App.vue---------------------------------入口组件，后缀为.vue的文件都是组件|____main.js---------------------------------项目入口文件static-----------静态资源文件夹|____.gitkeep--------------------------------|____.babeirc--------------------------------es6解析的配置,开发ES6项目需要加这个配置文件 或者 在 webpack中代码配置|____.editorconfig---------------------------编辑器的配置|____.gitignore------------------------------配置Git提交时要忽略的文件|____.postcssrc.js---------------------------html添加前缀的配置|____index.html------------------------------单页面的入口文件|____package.json----------------------------项目的基本配置，可以得知项目的基础配置，如包的版本号之类的|____README.md-------------------------------说明文档

过滤器：

	1.vue中没有提供内置过滤器，但是可以自定义过滤器，过滤器：把结果处理后渲染。2.过滤器分为：组件内的过滤器 和 全局过滤器1.组件内的过滤器：export default中的filters对象属性，key就是过滤器名，value就是与key对应的过滤方式函数体2.全局过滤器:vue.filter(名,function(){})3.当全局过滤器和组件内过滤器重名时，组件内过滤器执行。如案例：将一个message变量的第一个首字符转为大写后输出：<div id="app">{{ message | uppercase }}</div><!--  message为输出的值，uppercase为处理message定义在filters的函数名,即过滤器第一个参数为值，第二个参数为处理函数 --><<script>new Vue({el:'#app',data:{message:'hello'},filter:{uppercase(value){return value.toString().charAt(0).toUpperCase() + value.slice(1)}}})</script>

vue中template的基础语法：

	    <template><!-- 模板语法：vue内置了一套模板引擎，是数据驱动的，如下： --><div id='app'><span>输出num的值：{{hello}}</span> <!-- {{变量名}} -----Mustache语法，控制定义变量的输出 --><span v-html='hello'></span><!-- v-html='变量名' ---------Html赋值 （元素的innerHTML），注意这里变量的输出不能包含{{}}，直接写变量名字符串 --><span v-text='hello'></span><!-- v-text='变量名' ---------text赋值 （元素的innerText），注意这里变量的输出不能包含{{}}，直接写变量名字符串 ,只能在双标签中使用--><ul><li v-for='person in persons'>{{person.name}}</li><!-- v-for='item in array/object' ---------遍历数组或者对象，每一项为item --><li v-is='组件名称'></li><!-- 某些标签只能嵌套在特定的标签中才会正常显示，但是组件并不一定是这个特定的标签，此时可以使用特定标签加v-is='组价名'来实现渲染 --></ul><span v-bind:id='personid'></span><!-- v-bind:属性名='变量的key'------v-bind:  简写为  ：  给元素绑定属性，并给值 --><span :id='personid'></span><!-- v-bind简写形式 --><span v-bind:class="className ? 'red' : 'yellow'"></span><!-- v-bind:class="className ? 'red' : 'yellow'" 利用三元表达式控制两样式选其中一种，注意引号内使用引号的情况 --><a v-bind:href="url">新页面</a><!-- 动态设置url --><a v-bind:[id]="url"> 动态设置参数使用:[参数] </a><span>{{ true ? names : 'NO' }}</span><!-- {{ 表达式 ? 'true时输出的内容' : 'NO时输出的内容' }}--------使用表达式(三元表达式)，这里如果要输出变量，那么直接在后面跟上变量key即可，无需加{{}} --><input type='text' v-model='hello'><!-- v-model='变量名'---给元素（input、textarea、select）绑定双向数据,数据是双向改变的,js内存数据改变影响页面;在不同的标签上数据是不同的 --><span>{{message|capitalize}}</span><!-- {{message|capitalize}} 和 v-bind:id='rawld|formatld'-----过滤器,后面介绍 --><span v-bind:id='rawld|formatld'></span><!-- Class和Style绑定 --><span :class='{colors:isActive,fonts:isActive}'>{{hello}}</span><!-- 对象语法：v-bind:class='{colors:isActive,fonts:isActive}' ------colors和fonts是定义的class类名，无需在data中声明；isActive是定义的变量，当isActive为true时，显示定义类的样式内容，否则不显示。 --><span :class='[fontColor,fontSize]'>{{hello}}</span><!-- 数组语法:v-bind:class='[fontColor,fontSize]' ------fontColor和fontSize是定义在data中的变量名，它们的值为样式类名字符串；只要给数组加上变量，那么这个变量对应类名控制的样式就会添加给元素 --><span :style="{color:activeColor,fontSize:fontSize + 'px'}">{{hello}}</span><!-- style语法：v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}"----color和fontSize等指CSS样式属性，它们的值为定义在data中对应CSS属性的值 --><!-- 条件渲染： --><span v-if='isExist'>{{hello}}</span><!-- 条件渲染:v-if='isExist'---- v-if控制元素是否存在,当定义在data中的变量isExist值为false时,这个元素消失(控制台看不到此元素),并非隐藏；isExist值为true时出现 --><span v-show='isExist'>{{hello}}</span><!-- 条件渲染:v-show='isExist'---- v-show控制元素是否显示,当定义在data中的变量isExist值为false时,这个元素隐藏（display:none），并非消失；isExist值为true时显示--><!-- 条件渲染：v-else:此指令需要和v-if指令结合使用，当v-if中isExist变量值为false时出现v-else指令所在标签；值为true时消失 --><div v-if='isExist'>{{hello}}</div><div v-else>{{word}}</div><!-- 条件渲染：v-else-if:此指令需要和v-if及v-else指令结合使用(建议结合)，当v-if中isExist变量值为false时再判断v-else-if指令的条件，如值为true时执行，否则执行v-else指令；和原生中if/else if/else执行一样 --><div v-if='isExist'>{{hello}}</div><div v-else-if='isShow'>{{word}}</div><div v-else>{{jack}}</div><!-- 条件渲染组：当需要对多个元素进行条件渲染时，可以使用template进行包裹，渲染完后是没有template标签的--><template v-if="ok"><h3>h1</h3><p>P1</p></template><div v-cloak>{{hello}}</div><!-- 控制当编译完后才显示，可以隐藏未编译的 Mustache 标签，直到编译完在显示 --><!-- v-for in 遍历数组 --><li v-for='item in arrays'>{{item}}</li><!--arrays可以是一个整数，此时从1遍历到这个整数值--><li v-for='(item,index) in arrays'>{{item}}-{{index}}</li><li v-for='item of arrays'>{{item}}</li><!--也可使用of代替in--><li v-for='item in arrays' :key='item.id'>{{item}}</li><!--给每项通过key添加唯一标识，便于找到自己--><!-- 也可以在template 中使用v-for遍历一组内容 --><!-- v-for in 遍历对象 --><li v-for='value in objects'>{{value}}</li><li v-for='(value,key) in objects'>{{value}}-{{key}}</li><li v-for='(value,key,index) in objects'>{{value}}-{{key}}-{{index}}</li><!-- 事件处理器： --><button v-on:click.stop='alerts()'>弹框</button><!-- 绑定事件：v-on:事件='事件处理函数名（括号可以省略，处理函数是定义在methods中的函数）)';v-on：可以简写为@，注意直接在事件前面加@，如：@click --><a v-on:[even]="functionName"> 动态参数设置事件类型 </a><!-- 事件修饰符： --><button @click.stop='alerts()'>弹框</button><!--这里stop阻止冒泡事件  --><button @click.prevent='alerts()'>弹框</button><!--这里.prevent阻止默认事件  --><button @click.stop.prevent='alerts()'>弹框</button><!--这里stop.prevent也是阻止默认事件，只是是串联修饰符  --><button @click.self='alerts()'>弹框</button><!--这里self表示给自身绑定事件  --><button @click.once='alerts()'>弹框</button><!--这里once表示只触发一次事件  --><!-- 访问原始DOM事件：$event，如：$event.preventDefault()--><button @click='remove,show(e)'></button><!-- 给同一个事件绑定多个处理函数 --><!--按键修饰符：--><input @keyup.enter="submit" /><!--只有按enter键时触发事件函数--><input @keyup.KEY="submit" /><!--只有按下指定的键时触发事件函数，KEY可以是按键的key值--><!--鼠标按钮修饰符：.left  .right  .middle--><!-- 更多建议查阅相关文档 --><!-- Vue组件：全局组件和局部组件：单页面一般是局部组件，多页面一般是全局组件。父子组件通讯-数据传递：父组件向子组件通过Props传递数据，子组件是不允许给父组件传递的，但是可以通过Emit变相的底部触发实现传递。Slot：插槽，后面详细介绍。 --></div></template>

vue文件script基本语法：

	    <script>// 引入子组件：在一个vue文件中可以引入另一个vue文件（一般是此组件的子组件）import headervue from 'headervue.vue';export default {//1.name:-------给组件定义一个名字name: 'test',//2.data:function(){}-------变量的声明，一般实际开发中采用es6简写,如下：data() {return { //放数据的对象，vue中的变量都要在这里进行声明：text: 'hello word!', //如果想要渲染text的内容，那么在*.veu 文件头部template中根节点使用{{}}包裹，即{{text}}，在template根节点中添加：<input type='text' v-model='text'>即可实现数据双向绑定（主要是v-model指令的功劳）list: [{ name: jack }, { naem: join }, { name: qun }] //将此列表渲染：在*.veu 文件头部template中根节点写入，如下：// <ul>//   <li v-for='persons in list'> //v-for指令用于遍历//     {{persons.name}}//   </li>// </ul>}},//3.methods:{}-----方法的声明，用于声明函数方法供vue使用：methods: {add() {},remove() {}},//4.components:{}------声明子组件，引入的组件要进行声明才可以正常使用，如果变量名和变量关键字相同，可以简写一个变量关键字即可：components: {headervue: headervue,footervue},//5.props:[]------设置接收父组件传递过来的参数:props: ['key1', 'key2'],//6.filters:{}------声明过滤器:filters: {myfilter: function(value) {return value;}},//7.created(){}------事件处理函数，数据已经初始化，但是DOM还未生成：created() {},//8.mounted(){}-----数据装载DOM后，DOM已经生成mounted() {},//9.计算属性：里面可以定义函数，但是此函数会自动执行，用于解决模板中表达式过长问题（将表达式定义在函数中并返回，模板中使用函数名即可）computed:{},//与methods不同的是computed是反应依赖缓存机制的；只要依赖数据不变，computed就不会再调函数，而是在缓存中拿数据//10.侦听器：不管什么时候待处理的事发生变化，都会执行watch里面的函数：（可执行异步操作）watch: {}}</script>

vue中style基础语法：

	<style scoped>/* 这里添加scoped表示这里定义的样式只在此组件中有效，如果没有加此标识，那么引入此组件的其他组件也是会使用到这里的样式的，建议添加 *//* 正常书写css代码即可 */</style>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海