vue项目目录结构分析过滤器vue文件中基础templatescriptstyle

Posted 2021-06-24 苦海123

项目目录结构：

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

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