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]联系笔者删除。
笔者:苦海

你可能感兴趣的:(vue,vue,前端)