vue项目目录结构分析、过滤器、vue文件中基础template、script、style

项目目录结构：

	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>
    <<script>
		new Vue({
			el:'#app',
			data:{
				message:'hello'
			},
			filter:{
				uppercase(value){
					return value.toString().charAt(0).toUpperCase() + value.slice(1)
				}
			}
		})
	script>

vue中template的基础语法：

	    <template>
    
        <div id='app'>
          <span>输出num的值：{{hello}}span> 
    
          <span v-html='hello'>span>
          <span v-text='hello'>span>
    
          <ul>
            <li v-for='person in persons'>{{person.name}}li>
            <li v-is='组件名称'>li>
          ul>
    
          <span v-bind:id='personid'>span>
          <span :id='personid'>span>
          <span v-bind:class="className ? 'red' : 'yellow'">span>
          <a v-bind:href="url">新页面a>
          <a v-bind:[id]="url"> 动态设置参数使用:[参数] a>
    
          <span>{{ true ? names : 'NO' }}span>
          
          <input type='text' v-model='hello'>
        
          <span>{{message|capitalize}}span>
          <span v-bind:id='rawld|formatld'>span>
    
    
          <span :class='{colors:isActive,fonts:isActive}'>{{hello}}span>
          <span :class='[fontColor,fontSize]'>{{hello}}span>
          <span :style="{color:activeColor,fontSize:fontSize + 'px'}">{{hello}}span>
    
    
          <span v-if='isExist'>{{hello}}span>
          <span v-show='isExist'>{{hello}}span>
          
          
          <div v-if='isExist'>{{hello}}div>
          <div v-else>{{word}}div>
         
          
          <div v-if='isExist'>{{hello}}div>
          <div v-else-if='isShow'>{{word}}div>
          <div v-else>{{jack}}div>
          
          
          <template v-if="ok">
      			<h3>h1h3>
      			<p>P1p>
    			template>
    
          <div v-cloak>{{hello}}div>
    			
    			
    			<li v-for='item in arrays'>{{item}}li>
    			<li v-for='(item,index) in arrays'>{{item}}-{{index}}li>
    			<li v-for='item of arrays'>{{item}}li>
    			<li v-for='item in arrays' :key='item.id'>{{item}}li>
    			
    			
    			<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>
          <a v-on:[even]="functionName"> 动态参数设置事件类型 a>
            
            <button @click.stop='alerts()'>弹框button>
            <button @click.prevent='alerts()'>弹框button>
            <button @click.stop.prevent='alerts()'>弹框button>
            <button @click.self='alerts()'>弹框button>
            <button @click.once='alerts()'>弹框button>
    				
    				<button @click='remove,show(e)'>button>
    					
    				
    				<input @keyup.enter="submit" />
    				<input @keyup.KEY="submit" />
    	
    				
    
            
    
    
        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根节点中添加：即可实现数据双向绑定（主要是v-model指令的功劳）
                  list: [{ name: jack }, { naem: join }, { name: qun }] //将此列表渲染：在*.veu 文件头部template中根节点写入，如下：
                      // 

                      //   
 //v-for指令用于遍历
                      //     {{persons.name}}
                      //   
                      // 
              }
          },
          //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>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[email protected]联系笔者删除。
笔者：苦海