Vue入门练手小项目

项目内容

• 仿写时间科普网站，主要用以作为vue入门的练习，用到父组件传值、vue-cli3项目搭建、路由配置、动态绑定图片等；

环境配置

• 项目使用vue-cli3搭建，首先安装vue-cli3，创建一个项目；安装及创建流程参考官方文档或慕课网上视频；

设计思路

• 时间科普网站为一个在线flash，主要是些展示，没有复杂的功能，可以看到不论是主页还是从页面里都是由一个固定的标题栏，菜单栏，和一个主体部分构成，从页面不同处也只在于背景图片；
• 根据vue组件化开发的思想，可以按照上述拆分组件：
  • 标题栏组件：内容固定，可直接由父组件调用；
  • 菜单栏组件：根据父组件传入数组生成菜单内容，及不同的样式，可向父组件传递点击的为第几个菜单项；
  • 主页面组件：用于主页显示，可获取点击菜单项绑定路由跳转界面；
  • 从页面组件：用于从页面显示，可获取点击菜单项切换主体中显示内容及图片；

知识点记录

Vue相关

• 父子组件传值：用于实现可复用的菜单组件
  • 父→子：在子组件注册时写入props，并指定验证要求，父组件时使用v-bind绑定传入数据；

	 //父组件：
	<Menu class="Menu" :MenuList="MenuList"  :showUnderLine="showUnderLine"></Menu>
	data(){
            return{
                showUnderLine:true,
                MenuList:[
                    '时间是什么?',
                    '时间性质',
                    '大尺度时间',
                    '精密时间',
                    '关于时间的传说',
                    '时间简史'
                ],
          }
   }
   
   //子组件Menu ：
   props: {
            MenuList: Array,
            showUnderLine: {
                type: Boolean,
                default: false
            }
        },

- 子→父：子组件将要渲染的数据绑定触发事件，将数据在事件函数中通过this.$emit("父组件函数名"，数据)将数据传给父组件；

//父组件，绑定自定义事件jumpTo等待触发：
	<Menu @jumpTo="jumpTo"></Menu>
	methods:{
            jumpTo(index){
                this.$router.push({path:"/MenuPage"+index})
            }
        },
   
   //子组件Menu ,先在标签上绑定事件，再在函数中传值：
  jumpTo(index){
                this.$emit('jumpTo', index)
            },

• 路由配置：

  • 若创建项目时未选择router，先npm install一下；

  • 在要挂在路由显示界面的组件中，必须加上<router-view></router-view>;

  • 路由显示模式分为history模式和hash模式，默认为hash模式，地址栏中带#符号，但是常用为history模式，地址栏中不带#，需要在export default new Router中routes前加上一行mode:'history';

  • vue中路由跳转链接用法：

    • 提供跳转标签，写css时识别为a标签<router-link to="/">首页</router-link>

    • 在router.js中先import作为显示的组件，再配置进路由表,’/'代表主页
      `import Home from ‘@/Home’

       export default new Router({
       mode:'history',
       routes: [
           {
               path: '/',
               component: Home
           },
       ]
      })`
      

  • 给标签绑定跳转事件：通过绑定事件中调用this.$router.push({path:"/MenuPage"+index})；该项目主页中菜单栏跳转可通过菜单栏子组件向父组件传递被点击的index，父组件根据index跳转，需要事先在路由表中配置好跳转对应的页面；

• 动态绑定图片：动态绑定，首先得使用v-bind动态绑定src，其次当img标签里图片地址是动态变化的，如果图片资源是放在assets中，需要使用require引入图片；

//在data中放入images的数组，根据传入的index不同动态渲染图片；
  <img :src="images[index]" alt="">
  images:[
                    require("../public/MenuPage0/0.jpg"),
                    require("../public/MenuPage0/1.jpg"),
                    require("../public/MenuPage0/2.jpg"),
                    require("../public/MenuPage0/3.jpg"),
                    require("../public/MenuPage0/4.jpg"),
                    require("../public/MenuPage0/5.jpg"),
                    require("../public/MenuPage0/6.jpg"),
                ],  

• vue插值文本中，换行符“\n”失效解决方法：
  • 使用v-html：先将字符串的\n替换成
    ，然后用v-html渲染字符串为innerHTML；该方法不推荐；
  • 设置white-space属性，将需要显示文字的标签加上 white-space: pre-wrap;的样式即可识别换行符；
• vue中鼠标移入/移出添加或移除class实现：
  • 在标签上绑定mouseenter或者mouseover事件
    • mouseover表示鼠标划过元素或其子元素，都会触发事件。与之对应的是mouseout.
    • mouseenter表示鼠标滑过指定元素，不包含子元素，才会触发事件。与之对应的是mouseleave.
  • 添加/移除class：

<li class="List"  @mouseenter="changeBackground($event)"   @mouseleave="removeBackground($event)"
            >{{item}}</li>
		//对应事件处理函数
		changeBackground($event){
              if(this.showBackground){
             //需要注意的是添加class时一定要在添加的class前加一个空格，以免跟标签本身存在的class名拼接导致样式失效
                  $event.currentTarget.className += " active";
              }else {
                  $event.currentTarget.className += " changeColor";
              }
          },
    	removeBackground($event){
              if(this.showBackground){
              //移除时使用空字符替换掉想要去掉的class名即可
                  $event.currentTarget.className = $event.currentTarget.className.replace('active','');
              }else {
                  $event.currentTarget.className = $event.currentTarget.className.replace('changeColor','');
              }
          },

CSS相关

• 实现渐变色：linear-gradient()
• 背景和图片尺寸不一致时平铺整个界面，不重复：

		background-image: url('../public/MenuPage0/left_01.jpg');
        background-repeat:no-repeat;
        background-size:100% 100%;
        -moz-background-size:100% 100%;

• flex和position冲突解决方法：
  • 当一个标签同时设置了flex和position:absolute/fixed时，会导致flex不生效，此时可以通过在需要设置flex的div外再套一层div，并且使用定位即可；
• flex盒子内元素指定宽度失效：
  • flex内元素设置宽度需要通过flex:0 0 200px;进行设置；
  • flex的三个参数分别为flex-grow、flex-shrink、flex-basis；
    • flex-grow：用于设置弹性盒子的扩展比率，默认为0，即存在剩余空间也不放大；
    • flex-grow：用于设置弹性盒子的收缩比率，默认为1，即空间不足时该项目自动缩小 ；
    • flex-basis： 用于设置弹性盒伸缩基准值，即盒子的本身宽度；

---

总结

• 以上内容为本项目中遇到过的问题记录，个人觉得比较适合刚入手vue的新手做练习；
• 强烈推荐大家使用scss，非常好用，慕课网sass入门篇；