【笔记】前端笔记

目录

VUE

HTML

CSS

JavaScript

VUE

1.安装环境

• 安装node.js，官网下载安装包并添加环境变量
  • 控制台执行node –version来检查安装是否成功
• 安装vue

  npm install -g @vue/cli

  • 控制台执行vue –version来检查安装是否成功

2.搭建veu2.0脚手架

• 创建项目

  vue create xx

• 启动

  npm run server

3.vue2.0目录

• public里放的是图标
• src负责写项目
  • assets放静态资源css等
  • components放组件
  • router放路由
  • store放VueX
  • view放显示页面，里面的每个.vue代表一个路由走到的页面
  • app.vue会战胜view里面的所有页面
  • main.js写导入逻辑
• package.json放版本号

4.添加一个组件的步骤

• 在components里面用vue component模板写一个hello.vue
• 然后在home.view里
  • import Hello from “@/components/Hello”;
  • 并在components里面加上Hello
  • 然后就可以在想引入的位置加上就会展示组件里写的内容了

5.Element的使用方法

• 在main.js里面额外加上

  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  
  Vue.use(ElementUI);

• 在一个组件文件里写(这部分代码直接用element网页上给的)

  <template>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
  </template>
  
  <script>
  export default {
    name: "myInput",
    data() {
      return {
        input: ''
      }
    }
  }
  </script>

• 然后再在要展示的页面里引入这个组件即可

5.引入已有html中的head->link里的样式

• 在view的template和import中间按以下格式引入

  <style>
  @import '/src/assets/css/bootstrap.min.css';
  @import '/src/assets/css/owl.carousel.min.css';
  </style>

6.组件不同状态的切换显示/隐藏

• 不同component
• 同文件不同标签

HTML

1.基本语法

• 标题

  <h1>-<h6> xx </h1>-</h6>

• 段落

  <p> xx </p>

• 超链接

  <a href="url"> xx </a>
  <a target="_blank" href="url"> xx </a>表示在新窗口打开

• 图像

  <imag src="xx.jpg" width="xx" height="" />

• 换行

  <br />

• 水平线

  <hr />

• 注释

  <!-- xx -->