阅读 524
教你0基础,速成web前端

教你0基础,速成web前端

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

前言: 今年公司没什么移动前端的活,闲来无事,我也学习起了前端。从我的博客上也能看出端倪。看到掘金在搞征集好文的活动,我也来参加下。就来分享一下我学习前端的路线吧。(目前我接触了2-3个月了。vue框架,加上原生写官网已经算是成功入门了。希望能帮助想学习前端的同学)

接下来,详细说说我的步骤。它来了。

一、准备工作

打开百度,搜索菜鸟教程,把以下几处过一遍。当然了,重点是过一遍,其中你觉得感兴趣的可以好好看看。以后正式写的时候,不懂就来查。当然你又有空的时候还可以来过一遍。第二次过一遍的时候重点是就像读书时候的默写,不会了再查看。

建议开始用txt文本,如果你觉得没必要可以下载个vscode。具体本文是讲解思路和方法,就不对工具具体介绍。不懂的可以自行学习。要看的内容包括以下

  • html5教程
  • css教程,如果是很小白,建议可以把css先写在标签的style里
  • JavaScript教程
  • jQuery教程
  • vue我不建议看文字教程,因为看视频来的更简洁和清晰,同时我建议初学者看vue2开始,vue2更成熟,学习资料多。vue3还是有很多与vue2不同的
  • Element和Bootstrap这2个站在android同学的视角其实就是第三方控件,可以先不用看

以上资料可以简单过。

二、巩固基础及学习vue框架及后台管理系统开发

掌握了这些以后我建议你可以先从后台管理系统触发,所以这个时候你可以看下,

静心走完了这个流程,我们大概对vue开发后台管理有个了解了

三、官网开发及学习Bootstrap

为什么学习了vue,不可以用来开发官网呢。当然是可以的,但是不利于搜索引擎seo。当然也有方法去解决这个问题,有些公司为了性能还是会要求你用原生开发。所以这个时候我们就得学习一下内容:

学习完以上内容呢,我们就可以找个好看大型的官网,去模仿。比如楼主就模仿了一个小红书的。原生开发也包含很多封装。因为这个时候我们没有完全模仿完,等完了页会陆续放到我的github里。那就先来看看效果吧

hongshu.gif

好了,学习完我这些内容。你也能达到我的水平。哈哈哈,我也还算是前端小白吧。不过咱们已经入门了啊

四、补充

因为本来是android开发,开发有些年头了。这里就以android的视角去补充一下想说的话把。

  • vue框架里的node_modules,就像android项目里的build。package.json就像是build.gradle。在vue里,比如你给你项目安装axios,用到的命令是这样的:npm install --save axios。运行完之后,package.json里就多了axios的引用。所以当项目要剔除这个axios,我们可以把package.json的引用删掉,然后执行npm install。对了,npm install就相当于是重新build。比如我们把代码传到代码管理工具上,node_modules也是不传的。下下来是不是要build下。这样说不知道有没有说明白。

  • 这里再放上我在印象笔记关于vue的笔记。如果你学到这个地步后,希望能帮助到你


自定义控件在主页上的使用:


例如主页引用控件canvas-item,
<canvas-item

        :lineCenterX="50"

        :value_50="50"
         @uploadSuccess="uploadSuccessFather"

        :textFont="14"

        ref="mychild"

 ></canvas-item>



自定义属性值,并传值(父传子):
这里通过:textFont = "14",的形式,将值14传给自定义控件(自定义属性)textFont。
那么在自定义控件canvas-item中,在props(静态)里就需要定义textFont的属性,如下:
props: ['textFont'],多个属性以逗号隔开;



传值(子传父)
父组件里通过
@uploadSuccess="uploadSuccessFather" 去监听
子组件里通过
this.$emit("uploadSuccess", res.data, this.index); 去触发父组件的监听,同时传递了res.data和this.index两个值

那么触发监听就会走父组件里的uploadSuccessFather()方法,同时会获取到这两个值



在父页面,获取子组件对象,并调用其方法
在上述通过定义ref="mychild",那么我们可以通过refs直接拿到canvas-item对象,调用其属性和方法
this.$refs.mychild.initDataSon(dataList) 这里就直接调用了它的initDataSon()方法



特别注意点
this.$nextTick(() => {}异步方法
当dom还未渲染就进行数据操作等,无异是徒劳的。或者在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,
这个时候都需要放进Vue.nextTick()里操作



如果使用了饿了么组件如何修改样式?

打开浏览器,用左上角箭头定位到元素后,在右边的style里,找到响应的css,拷贝到代码里的<style>里。
这里需要注意,不能放在<style  scoped>里。最好是新建一个style里,这样的话会变成全局变量。
怎么修改成scoped呢?
只需要在最外层的div里加上一层class ="father"。最后在style里用.father{}包裹起来即可。



当要把文件放在本地,并读取本地文件的内容时?
要将文件放在public里,然后可以通过axios读取,如下:
axios.get('/js/data.json').then(
      (response) => {
        this.list = Object.assign([], this.list, response.data.list)
        this.initData()
      },
      (response) => {
        console.log('error')
      }
    )



localStorage的使用?
将数据存储在localStorage里:
localStorage.setItem(key,value)
将数据从localStorage里取出:
localStorage.getItem(key)



跳转路由?
this.$router.push('/home/list')



子路由的配置?
例如:
  {
    path: '/home',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'list',
        name: 'list',
        component: () => import(/* webpackChunkName: "list" */ '../views/List.vue')
      },
      {
        path: 'user',
        name: 'user',
        component: () => import(/* webpackChunkName: "user" */ '../views/User.vue')
      }
    ]
  }



配置完子路由怎么主页显示?
<template>
  <div>
    <router-view></router-view>

    <ul class="footer">
      <li class="icons">
        <router-link :to="{ name: 'list' }">新闻列表</router-link>
      </li>

      <li class="icons">
        <router-link :to="{ name: 'user' }">个人中心</router-link>
      </li>
    </ul>
  </div>
</template>

首先需要一个router-view,配置好router-link里的 :to属性后,点击即可实现在同一页面,子路由里配置的子页面切换。



集合添加元素?
lists.push(value)

判断集合里是否包含某个元素?
lists.includes(value)

一个集合添加另一个集合的操作,相当于android里的addAll
this.list = Object.assign([], this.list, res.data.list)

复制代码
文章分类
前端
文章标签