[学习日志][前端开发]HTML，Vue，JS基础知识点整理

最新推荐文章于 2021-03-02 16:34:28 发布

KuroSiroMurasaki

最新推荐文章于 2021-03-02 16:34:28 发布

阅读量343

点赞数

分类专栏：学习日志文章标签： vue js html javascript jquery

本文链接：https://blog.csdn.net/weixin_44714634/article/details/107635375

版权

学习日志专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端

vue文档：https://cn.vuejs.org/v2/guide/
html文档：https://www.w3school.com.cn/tags/index.asp
css文档：https://www.w3school.com.cn/cssref/index.asp
javascript文档：https://www.w3school.com.cn/js/index.asp
jquery文档：https://www.w3school.com.cn/jquery/index.asp
json在线解析：https://www.json.cn/

HTML

概述

HyperText Mark-up Language
超文本标记语言，用来开发网页的语言。

基本结构

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

< !DOCTYPE html>
- 是文档声明，指定页面所使用的html的版本
< html >…< /html >
整个网页的开始，开发人员告诉浏览器网页从这里开始。
< head >…< /head >
定义文档的头部，设置标题，编码格式，以及引入css。
< body >…< /body >
编写网页上显示的内容

注释

常用标签

单标签
- < br >
换行
< hr >
- 被水平线分割的标题和段落
< img src="" alt="" >
双标签
- < h1>…< /h1 >
- < div>…< /div >
- < p>…< /p >
- < a >< /a >
  百度网
```
- 百度网

列表

< ul > < /ul >
无序列表
< ol >< /ol >
有序列表
< li >< /li >
- 定义列表项目

表格

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td> 
    </tr>
</table>

姓名	年龄
张三	18

### 表单

< from >< /from >
定义整体的表单区域
< label >< /label >
表单元素的文字标注标签
< input >
- 输入标签
- 属性（type=" "）
  - 单行文本输入框 “text”
  - 密码输入框 “password”
  - 单选框 “radio”
    - name="" 同名判断单选才有效
  - 复选框 “checkbox”
  - 上传文件 “file”
  - 提交按钮 “submit”
  - 重置按钮 “reset”
  - 普通按钮 “button”
< textarea >< /textarea >
- 多行文本输入框
< select >< option >< /option >< /select >
- 下拉列表
提交属性设置
- 概述
  - 把用户输入的数据一起提交web服务器上
- action=""
  - 提交地址
- method=""
  - 提交方式
- name=""
  - 提交元素名称
- value=""
  - 提交元素值

CSS

概述

Cascading Style Sheet
层叠样式表，用于美化网页的一种语言。

基本语法

选择器{
属性名:属性值
}

引入方式

行内式
- 直接在标签style属性添加
  hello
```
- hello

内嵌式

<head>
<style type="text/css">
    h3{
       color:red;
    }
 </style>
</head>

外链式

另外创建 .css文件

在标签内用标签引入

<link rel="stylesheet" type="text/css" href="css/main.css">

选择器

标签选择器

标签开头

<style type="text/css">
p{
  color: red;
}
</style>

类选择器

.类名开头

<style type="text/css">
.blue{color:red}
</style>
<div class="blue">这是一个div</div>

层级选择器
- 选择器1 选择器2
  - 父子或祖先关系

id选择器

#id名开头

<style type="text/css">
#box{color:red} 
</style>
<p id="box">这是一个段落标签</p>

注意 id，只能获取一个标签。

组选择器

选择器1, 选择器2,选择器3

.box1,.box2,.box3{width:100px;height:100px}

伪类选择器
- ：分割开
  .box1{width:100px;height:100px;background:gold;}
  .box1:hover{width:300px;}
- 用户和网站交互的时候改变显示效果。

属性

布局常用属性
- 元素高宽
  - width width:100px;
  - height height:200px;
- 元素背景
  - background
    - 颜色 background:gold;
    - 图片 background: url(images/logo.png)
- 周边边框
  - border border:1px solid black;
    - border-top/left/right/bottom
- 内边距（内容与边框）
  - padding padding:20px;
- 外边距（元素与外界距离）
  - margin margin:20px;
- 浮动
  - float float:left;
    - 用于块元素排列
文本常用属性
- 颜色
  - color color:red;
- 字体大小
  - font-size font-size:12px;
- 字体样式
  - font-family font-family:‘Microsoft Yahei’;
- 文字是否加粗
  - font-weight font-weight:bold
- 文字行高
  - line-height line-height:24px;
- 文字下划线
  - text-decoration text-decoration:none;
- 文字水平对齐方式
  - text-align text-align:center
- 文字首行缩进
  - text-indent text-indent:24px;

元素溢出

父级标签 overflow属性
- visible
  - 默认值显示溢出部分。
- hidden
  - 隐藏溢出部分。
- auto
  - 滚动查看其余内容。

标签隐藏设置

display 属性
none
- 元素隐藏且不占位
- inline
  - 元素以行内元素显示
- block
  - 元素以块元素显示

Javascript

概述

运行在浏览器上的脚本语言，负责用户与网页的交互。

引入方式

行内式

<input type="button" name="" onclick="alert('ok！');">

内嵌式

<script type="text/javascript">

alert(‘ok！’);

外链式

<script type="text/javascript" src="js/index.js"></script>

变量和数据类型

定义变量
- var 变量名 = 变量值；
数据类型（5基本，1复合）
- number
- string
- boolean
- undefined
  - 变量声明未初始化
- null
- object
  - 数组，函数，对象
命名规则
- 区分大小写
- 字母数字下划线 $ 组成
- 数字不能开头
匈牙利命名规则
- Objec oDiv
- Array altems
- String sUserName
- Integer iltemCount
- Boolean blsComplete
- Float fPrice
- Function fnHandler

注释

单行注释
- //
多行注释
- /* */

函数

定义

  function 函数名(参数[参数可选]){  
  // 函数的代码实现

…
}
```

调用
- 函数名(参数)
指定页面加载完成后执行函数
- ```
window.onload = function(){}
```

条件语句

条件
- if…else if … else
比较运算符
- ===
  - 比值和类型
逻辑运算符
- && ， | ，！

获取标签

```
document.getElementById('id名');
```

操作标签属性

读取
- 先获取标签
- 获取对象.属性名
修改
- 获取对象.属性名 = 值

innerHTML

操作标签包裹内容

oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';

注意点
- js与css属性名大致一样。
- css class-- js className。
- css 有横杠的属性换驼峰式。
  - font-size fontSize

数组

定义

实例化方式
- ```
var aList = new Array(1,2,3);
```
字面量方式
- ```
var aList2 = [1,2,3,'asd'];
```
多维数组
- ```
var aList = [[1,2,3],['a','b','c']];
```

操作
- 长度
alert(aList.length);
```
- 下标
  - aList[0]
- 末尾追加
  - aList.push(5);
- 末尾删除
  - aList.pop();
- 指定位置删除或添加
  - arr.splice(start,num,element1,…,elementN)
- 循环语句
  //for
  var array = [1, 4, 5];
  for(var index = 0; index < array.length; index++){
  result = array[index];
  alert(result);
  }
//while
var array = [1, 4, 5];
var index = 0;
while (index < array.length) {
result = array[index];
alert(result);
index++;
}

//do-while
var array = [1, 4, 5];
var index = 0;
do {
result = array[index];
alert(result);
index++;
} while (index < array.length);
```

字符串拼接

+号
数字与字符串拼接，数字自动转字符串

定时器

创建
- setTimeout(func[, delay, param1, param2, …])
- setInterval(func[, delay, param1, param2, …])
- 选项
  - func , 表示定时器要执行的函数名。
  - delay, 表示时间间隔，默认是0，单位是毫秒。
  - param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。
删除
- clearTimeout(timeoutID)
- clearInterval(timeoutID)

ES6

JavaScript语言的新版本。上面的对应ES5
新增变量定义方式
- let 变量名=变量值
- 注意：let只在let命令所在的代码块内有效。
{
let a = 10;
var b = 1;
}
alert(a) //报错

定义函数新的方式（箭头函数）

//无参数,无返回值
var say = ()=> {
alert('我是无参数无返回值函数');
}
//有参数,无返回值
var eat = food => {
alert('我喜欢吃'+food);
}
//有参数,有返回值
var total = (num1,num2) => {
return num1+num2;
}

定义对象属性名与变量名一致时

//定义变量
var name='itcast';
var age=13;
//创建对象
var person = {
name,
age,
say:function(){
    alert('hello');
}
};
//调用
person.say()

JQuery

概述

定义
- 对Javascript的封装，免费开源的函数库。
作用
- 与Javascript差不多，负责网页行为，用户与网页的交互。
优点
- 兼容了主流浏览器，增加程序员的开发效率。
- 简化了Javascript编程，代码编写更加简单。

用法

引入

<script src="js/jquery-1.12.4.min.js"></script>

对window.onload = function()的简化

window.onload = function(){
   var oDiv = document.getElementById('div01');
   alert('原生就是获取的div：' + oDiv);
   };
$(document).ready(function(){
   var $div = $('#div01');
   alert('jquery获取的div：' + $div);
   });
$(function(){
   var $div = $('#div01');
   alert('jquery获取的div：' + $div);
   });

选择器

标签选择器
- $(‘li’)
类选择器
- $(’.myClass’)
id选择器
- $(’#myId’)
层级选择器
- $(’#ul1 li span’)
  - 选择id为ul1的所有li标签和span标签
属性选择器
- $(‘input[name=first]’)
  - 选择name属性为first的所有input标签
与javascript比较
$(function(){
result = $(“div”).length;
alert(result);
});
```
document.getElementById('id名');
```
```

选择集过滤

概述
- 选择标签的集合里面过滤自己需要的标签。

方法

has(选择器名称)

表示选取包含指定选择器的标签

<script>
$(function(){
//  has方法的使用
var $div = $("div").has("#mytext");
//  设置样式
$div.css({"background":"red"});
});
</script>
<div>
    这是第一个div
    <input type="text" id="mytext">
</div>

eq（索引）

表示选取指定索引的标签

var $div = $("div").eq(1);
//  设置样式
$div.css({"background":"yellow"});

注意：jquery给标签设置样式用css方法
- $变量名.css({“属性名”:属性值})

选择集转移

概述
- 以选择的标签为参照，获取转移后的标签.
分类
- $(’#box’).prev();
  - 表示选择id是box元素的上一个的同级元素
- prevAll() 表示获取上面所有同级元素
- next() 表示获取下一个同级元素
- nextAll() 表示获取下面所有同级元素
- parent() 表示获取父元素
- children() 表示获取所有的子元素
- siblings() 表示获取其它同级元素
- find(“选择器名称”) 表示获取指定选择器的元素

获取和设置元素的内容

获取标签
- var $div = $("#div1");
获取标签的html
- var result = $div.html();
设置标签的html（原内容会被清除）
- $div.html(“你好”);
追加标签的html
- $div.append(“你好”);

获取和设置元素的属性

获取元素
- var $a = $("#link01");
获取元素属性
- var sId = $a.prop(“id”);
设置元素属性
- $a.prop({“href”:“http://www.baidu.com”,“title”:‘这是去到百度的链接’,“class”:“a01”});
input标签获取value属性方法
- var sValue = $input.prop(“value”);
- var sValue = $input.val();
- $input.val(“222222”);

jQuery常用事件

click() 鼠标单击

    var $li = $('.list li');
    $li.click(function(){             
  // this指的是当前发生事件的对象，但是它是一个原生js对象
        // this.style.background = 'red';
    
        // $(this) 指的是当前发生事件的jquery对象
        $(this).css({'background':'gold'});
        // 获取jquery对象的索引值,通过index() 方法
        alert($(this).index());
    
    });

**blur() ** 元素失去焦点
focus() 元素获得焦点
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
ready() DOM加载完成
对象
- this
指的是当前发生事件的对象，但是它是一个原生js对象。
$(this)
- 指的是当前发生事件的jquery对象。

事件代理

概述
- 利用事件冒泡原理，把事件加到父级，通过判断事件来源，执行相应的子元素的操作。
- 事件代理首先可以极大减少事件绑定次数，提高性能。
- 可让新加入的子元素也可以拥有相同操作。

实现

//delegate(childSelector,event,function)
$(function(){
  $list = $('#list');
  // 父元素ul 来代理 子元素li的点击事件
  $list.delegate('li', 'click', function() {
    // $(this)表示当前点击的子元素对象
    $(this).css({background:'red'});
  });
  })

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

delegate(childSelector,event,function)
- 参数1 子元素选择器
- 参数2 事件名称
- 参数3 当事件触发执行的函数

javascript对象

概述
- javascript中所有事物都是对象，字符串，数组，函数，数值等。也可定义对象。

自定义对象

object类型实例化对象

<script>
  var person = new Object();

// 添加属性：
person.name = 'tom';
person.age = '25';

// 添加方法：
person.sayName = function(){
    alert(this.name);
}

// 调用属性和方法：
alert(person.age);
person.sayName();
</script>

对象字面量创建

json

概述
- 一种数据格式，也是类似于javascript对象的字符串
格式
- 对象格式
  - 大括号
    - ```
    {
    "name":"tom",
    "age":18
    }
```
- key:value
- 多个键值对间，用逗号隔开。
- key值双引号，字符串值也要用双引号。
- 数组格式
  - 用一对中括号
    [“tom”,18,“programmer”]
  - 中括号里面的数据用，逗号隔开。

json数据转javascript对象

json本质上是字符串。
要在js中操作json，可转化成javascript对象。

var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);
alert(oPerson.name);
alert(oPerson.age);

ajax

概述
- Asynchronous JavaScript and XML
- 前后台配合技术，让javascript发送异步的http请求。
- 可执行前端局部渲染。

使用一

<script>
    $.ajax({
    // 1.url 请求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 请求方式，默认是'GET'，常用的还有'POST'
    type:'GET',
    // 3.dataType 设置返回的数据格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 设置发送给服务器的数据, 没有参数不需要设置

    // 5.success 设置请求成功后的回调函数
    success:function (response) {
        console.log(response);    
    },
    // 6.error 设置请求失败后的回调函数
    error:function () {
        alert("请求失败,请稍后再试!");
    },
    // 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
    async:true
});
</script>

使用二（简写）

<script>
    $(function(){
        /*
        $.get(url,data,success(data, status, xhr),dataType).error(func)
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         			data 请求的结果数据
         			status 请求的状态信息，如“success”
         			xhr底层发送http请求XMLHttpRequest对象
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
         		"xml"  "html"  "text"  "json"
         5.error 表示错误异常处理
         		func 错误异常回调函数
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("网络异常");
        });

        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name); 
            console.log(data.time); 
        }, "json").error(function(){
            alert("网络异常");
        }); 
    });


</script>

Vue.js

概述

是一个构建数据驱动的web界面的渐进式框架。
目标为通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
核心是一个响应的数据绑定系统。

基本使用

第一个vue应用

导包

开发环境版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

data
- 用于数据绑定
  - < span >{{ message}}< /span >
  - data: {
    message: ‘Hello Vue!’
    }
delimiters
- 修改胡子语法
  - delimiters:[’[[’,’]]’],

v-bind

绑定元素属性

<div id="app">
  <span>{{ message }}</span> <br>
   <span v-bind:title="ads">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> <br>
   <a v-bind:href="home" target="_blank">戳我有惊喜</a>
</div>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    ads:'页面加载于 ' + new Date().toLocaleString(),
    home:'http://www.itcast.cn/'
  }
})
</script>

v-if

v-if ，v-else-if,v-else

<div id="app">  
   <p v-if="seen">现在你看到我了</p>
    <a href="#" v-else>登录</a>
</div>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    seen:true,
  }
})
</script>

注意：v-else-if,v-else要紧跟v-ifv-show

v-show
- ```
<div id="app">
   <p v-if="seen" id="if">现在你看到我了</p>
   <p v-show="seen" id="show">现在你看到我了</p>
</div>
```
- ```
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    seen:false
  }
})
</script>
```
- 注意
  - v-show与v-if大致一致，它制作元素样式的显示和隐藏，元素一直是存在的。
  - 当标记为false的时候，v-if不会添加到DOM中，v-show是添加在DOM中。
  - 注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突。

v-for

v-for需要使用item in items形式语法

<div id="app">
  <ol>
    <li v-for="todo in todos"> 
    <!--<li v-for="(todo,index) in todos"-->>
    <!--<li v-for="value in object">-->
      {{ todo.text }}
    </li>
  </ol>
</div>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
   todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛X项目' }
    ]
  }
})
</script>

index 从0开始

v-on

作用
- 监听DOM事件，触发时运行一些JavaScript代码。

Add {{counter}}

```

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    counter:1
  },
  methods:{
    addnum:function(num){
      this.counter = num+this.counter
      alert(this.counter)
    }
  }
})
</script>

v-on:可以简写为@

v-model

作用
- v-model指令在表单< input >,< textarea > < select >元素上创建双向数据绑定。
- 负责监听用户的输入事件更新数据，对一些极端场景根据控件类型自动选取正确的方法来更新元素。
- v-model会忽略所有表单元素的value，checked，selected特性的初始值而总将Vue实例的数据作为数据来源。
- 故应该通过Javascript在组件的data选项中声明初始值。

<div id="app">
    <table border="1">
      <tr><td>用 户 名</td><td><input type="text" v-model="username" @blur="checkusername"> </td></tr>
      <tr><td>密码</td><td><input type="password" v-model="password1"> </td></tr>
      <tr><td>确认密码</td><td><input type="password" v-model="password2"></td></tr>
      <tr><td>性别</td>
        <td>
          男<input type="radio" name="sex"  value="boy" v-model="sex"> 
          女 <input type="radio" name="sex" value="girl" v-model="sex"></td>
        </tr>
      <tr><td>爱好</td>
        <td>
          足球 <input type="checkbox" name="like" value="足球" v-model="like"> 
          篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
          兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like"> 
        </td>
      </tr>
      <tr><td>所在城市</td>
        <td>
          <select name="city" v-model="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
          </select> 
        </td>
      </tr>
      <tr><td>个人简介</td><td><textarea name="desc" v-model="desc"></textarea> </td></tr>
    </table>
    <button @click="register">注册</button>
</div>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
      username:'',
      password1:'',
      password2:'',
      sex:'',
      like:[],
      city:'',
      desc:''

  },
  methods:{
    register:function(){

        alert(this.username+this.password1+this.password2+this.sex+this.like+this.city+this.desc)
    },
    checkusername:function(){
      alert(this.username)
    }
  }
})
</script>

Vue生命周期（了解）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6pWPTXeh-1595917940992)(image/前端_vue_life.png)]
- beforeCreate
  - vm对象实例化之前
- created
  - vm对象实例化之后
- beforeMount
  - vm将作用标签之前
- mounted(重要时机初始化数据使用)
  - vm将作用标签之后
- beforeUpdate
  - 数据或者属性更新之前
- updated
  - 数据或者属性更新之后

Vue组件

概述
- 对HTML的扩展，封装可重用代码。
- 如python中的一个类，一个类的属性和方法可被其他类调用。
- 所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象，并提供相同的生命周期钩子。

组件的定义

全局组件

  <body>
  
      <div id="app"> 
           <!-- 将组件名以标签的形式添加到div中，调用组件中的内容 -->
      <zujian_all></zujian_all>   
      </div>
  
   <script>
      // 全局组件通过 Vue.component注册
      Vue.component(
          'zujian_all',
          {   // template指定组件显示的html内容
              template:'<div>全局组件</div>',
          }
      )
      new Vue({
          el: '#app',
      })
     </script>
  </body>

局部组件

  <body>

      <div id="app">
          <zujian_all></zujian_all>
      </div>
  
   <script>
      // 局部组件注册,定义局部组件
      var zujian_a={
          template:'<div>局部组件1</div>',
       };
      // 全局组件
      Vue.component(
          'zujian_all',
          {   // 在全局中调用局部组件
              template:'<div>全局组件  <zujian_a></zujian_a>  </div>',
              // components 将局部组件注册到全局组件中
                  components:{
                  zujian_a
              }
             }
      )
  
      new Vue({
          el: '#app',
      })
  
      </script>
  </body>

局部组件嵌套

  <body>

      <div id="app">
          <zujian_all></zujian_all>
      </div>
  
   <script>
      // 局部组件注册,定义局部组件
      var zujian_b={
          template:'<div>局部组件2</div>',
       };
  
      var zujian_a={
          template:'<div>局部组件1   <zujian_b></zujian_b> </div>',
          components:{
              zujian_b
          }
       };
  
      // 全局组件
      Vue.component(
          'zujian_all',
          {   // 在全局中调用局部组件
              template:'<div>全局组件  <zujian_a></zujian_a>    </div>',
              // components 将局部组件注册到全局组件中
                  components:{
                  zujian_a
              }
             }
      )
      new Vue({
          el: '#app',
      })
  
      </script>
  </body>

组件中数据绑定

Vue.component(
        'zujian_all',
        {   // 在全局中使用绑定的数据 {{name}}
            template:'<div>全局组件  <zujian_a></zujian_a> {{name}} </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a,
            },
            // data属性指定绑定的数据内容，可以在当前的组件中进行使用
            data:function(){
                return {name:'python'}
            }
           }
    )

组件传值

父组件–>子组件 props

 <script>
    // 局部组件注册,定义局部组件
    var zujian_a={
        template:'<div>局部组件1 {{pos}} </div>',
        // 在子组件中通过props属性定义接受值的名称
        props:['pos']
     };

    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局组件中调用子组件时，通过v-bind指定子组件中pos接受父组件中的哪个值
            template:'<div>全局组件  <zujian_a v-bind:pos="name"></zujian_a>  </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a,
            },
            // data属性指定绑定的数据内容，可以在当前的组件中进行使用
            data:function(){
                return {name:'python'}
            }
           }
    )

    new Vue({
        el: '#app',
    })
    </script>

子组件 --> 父组件 $emi

<script>
        var zujian_a={ 
            template:'<div>  局部组件A  <button v-on:click="isupload"> 上传</button>  </div>',
            methods:{
                isupload:function(){
                    this.$emit('isListen','hello') // 子元素上的点击事件成功后，通过 $emit 将事件和数据传递给父组件
                }
            }
        }

        Vue.component('zujian_all',{

            template:'<div>  全局组件   <zujian_a v-on:isListen="isShow"></zujian_a> </div>',
            components:{
                zujian_a
            },
            methods:{
                isShow:function(data){
                    alert(data)  //data参数接受子组件传递的值
                }
            }
        })

        new Vue({
            el:'#app'
        })
    </script>

单文件组件

概述
- 将一个组件相关的html，css，javaScript代码从html剥离出来，合成一个文件。
- .vue 文件

使用

安装node版本管理工具nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
// 更新配置
source .bashrc
安装最新版node

nvm install node
- 单文件组件不能直接运行使用，需要依赖node项目对其进行解析打包。
创建项目目录

mkdir project
初始化目录

cd project
npm init
- 自动生成package.josn文件

配置package.json

{
    "name": "project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "babel-core": "^6.22.1",
        "babel-loader": "^7.1.1",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "css-loader": "^0.28.11",
        "element-ui": "^2.7.2",
        "file-loader": "^1.1.4",
        "lodash": "^4.17.4",
        "style-loader": "^0.23.1",
        "url-loader": "^1.1.2",
        "vue": "^2.6.10",
        "vue-loader": "^15.7.0",
        "vue-router": "^3.0.2",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.2.1"
    }
}

定义项目所需各种模块，项目的配置信息（名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

安装项目依赖包
```
npm install
```
创建项目文件
```
touch index.html main.js App.vue. 
```
index.html 项目首页文件

main.js 项目打包时依赖的文件

App.vue 单文件组件文件

创建webpacke打包的配置文件

webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: { main: "./main.js" }, //入口文件
    output: {
        filename: 'index.js', //出口文件名
        path: path.resolve(__dirname), //当前目录
        library: 'index' // 打包后模块的名称
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module: {
        rules: [ //定义不同类型的文件使用的loader
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                loader: 'vue-style-loader',
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                options: {
                    minimize: true //添加
                }
            }, 
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader'
              },
        ]
    }
}

单文件组件的使用

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id='app'><App></App></div>

    <!-- 引入打包后的index.js文件。该文件的名字不是固定名字，可以在webpack.config.js的出口文件中指定 -->
    <script src="./index.js"></script>
</body>
</html>

main.js

// 引入vue和App组件
import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'#app',
    // 渲染App组件中的内容，返回给index.html文件使用
    render:function(creater){
        return creater(App)
    }
})

App.vue

<template>
    <!-- 指定html显示内容 -->
    <div>单文件组件</div>
</template>


<script>
    // 指定js内容
// export default {

// }
</script>

<style>
/* 指定css内容 */
</style>

项目打包
- 文件编写万泉河不能直接运行index.html产生效果，需要对项目进行打包成index.js
```
npm run build
```

项目调试运行

// 在项目目录下，执行下面指令可以开启前端服务，自动运行前端代码
./node_modules/.bin/webpack-dev-server

多个单文件组件的使用

创建目录project/components/ 存放子组件

Child1.vue

<template>
    <div>子组件1</div>
</template>

<script>
// export default {

// }
</script>

<style>

</style>

App.vue

<template>
    <div>
        单文件组件
        <!-- 调用子组件 -->
        <Child1></Child1>
        <Child2></Child2>
    </div>

</template>


<script>
    //导入components目录下的子文件 Child1为指定的组件名，可以任意命名，不一定按照文件名
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'

export default {
    // 将子组件添加到App.vue中
    components:{
        Child1,
        Child2,

    }
}
</script>

<style>

</style>

多组件路由使用

定义路由目录和路由文件
```
mkdir router
touch router.js
```

编写路由文件

import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'
import Child1 from '../components/Child1.vue'
import Child2 from '../components/Child2.vue'
// 在vue中使用插件
Vue.use(Router)
export default new Router({
    // 定义匹配规则
   routes:[
       {
           path:'/',  // 匹配根路径／，加载Chiled1中的内容
           component:Child1
       },
       {
           path:'/child2',
           component:Child2
       }
   ]
})

在main.js中使用路由

import Vue from 'vue'
import App from './App.vue'
//导入定义好的路由
import router from './router/router.js'

new Vue({
    el:'#app',
    router,  //使用路由
    render:function(creater){
        return creater(App)
    }
})

App.vue中指定路由标签

<template>
    <div>
        单文件组件
         <!-- 记载路由标签 -->
        <router-view></router-view>
    </div>

</template>

<script>
</script>

<style>
</style>

Element-ui的使用
- http://element-cn.eleme.io/#/zh-CN/component/progress
vue-cli的使用
- 借助vue-cli创建所有项目文件
- 全局安装vue-cli
  
  npm install --global vue-cli
- 项目创建
```
vue init webpack 项目名
```
- 运行调试项目
```
// 进入项目目录下，执行下面指令
npm run dev
```
- 项目打包
```
npm run build
```
- 文件夹解释
  - src，主开发目录，要开发的单文件组件全部在这个目录下。
  - static，静态资源目录，所有的css，js文件放在这个文件夹。
  - components，组件目录，vue格式的单文件组件都存在这个目录中。
  - router，路由目录，在此文件夹中配置组件路由。
  - node_modules，node的包目录。
  - config，配置目录。
  - build，项目打包时依赖的目录。

KuroSiroMurasaki

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[学习日志][前端开发]HTML，Vue，JS基础知识点整理

前端vue文档：https://cn.vuejs.org/v2/guide/html文档：https://www.w3school.com.cn/tags/index.aspcss文档：https://www.w3school.com.cn/cssref/index.aspjavascript文档：https://www.w3school.com.cn/js/index.aspjquery文档：https://www.w3school.com.cn/jquery/index.aspjso
复制链接

扫一扫