真正的从零开始学习Vue

       这是一个关于没有任何基础的学生党开始学习Vue，包括没有HTMl，JavaScript基础知识，所记录的知识点全是在学习过程中遇到的不会的内容。

1.代码做的事情 

创建了一个Vue对象，创建对象的同时传入了一些options：{}，

·其中{}包含了el属性，该属性决定了这个Vue对象挂载到哪一个元素上

·{}中包含了data属性：该属性中通常会存储一些数据，这些数据可以是自己直接定义的，也可以是来自网络，从服务器加载的

2.Vue中的指令

·v-for   遍历指令（在使用时，最好给对应的元素或组件添加上一个key属性）

        ·（value， key）获取响应的value和key

        ·（value， key，index）获取响应的数据

·v-on   监听某一个事件的指令（语法糖为@）

        v-on的修饰符：

                ·.stop：防止程序冒泡

                ·.prevent：在程序提交时，防止自动提交

                ·@kepup.（键位）：监听用户按键

·v-once   表示元素和组件只渲染一次不会随数据的改变而改变

·v-html   将指令的html解析出来并且进行渲染

·v-text   和Mustache相似，用于将数据显示在界面中

·v-pre   将数据原封不动的显示出来而不进行解析

·v-cloak（斗篷）   隐藏未编译的Mustache标签

·v-bind   动态绑定属性，语法糖写法就是一个冒号（：）

·v-if   条件判断文本是否显示，true为显示，false为不显示

·v-else   与v-if连用

·v-show与v-if的区别：

        ·v-if:当条件为false时，包含v-if指令的元素，根本就不会存在DOM中

        ·v-show:当条件为false时，v-show只是给我们的元素添加了一个行内样式: display: none

        ·在开发中，当需要在显示与隐藏之间切片很频繁时，使用v-show；当只有一次切换时，

         使用v-if

·v-model实现数据的双向绑定，其实它是一个语法糖，背后的本质上包含两种操作

        ·1.v-bind绑定一个value属性

        ·2.v-on指令给当前元素绑定input事件

<input type="text" :value="message" @input="valueChange">
methods: {
      valueChange(event) {
        this.message = event.target.value
      }

<input type="text" :value="message" @input="message = $event.target.value">

        ·3.v-model的修饰符

                ·lazy修饰符：在默认情况下，v-model默认是在input事件中同步输入框的数据的，而lazy修饰符可以让数据在失去焦点或者回车时才会更新

                ·number修饰符：在默认情况下，在输入框中无论输入的是字母还是数字，都会被当做字符串处理，number修饰符可以让输入框中输入的内容自动转成数字类型

                 ·trim修饰符：可以过滤掉内容左右两边的空格

3.属性

·methods，该属性用于在对象中定义方法

·el，该属性用于对象的挂载

·data，该属性通常用于存储数据

·computed，计算属性

·created：HTML加载之前执行，执行顺序：父组件-子组件

·mounted：HTML加载完成后执行，执行顺序：子组件-父组件

·watch是监听一个值得变换然后执行对应的函数

·filters过滤器

·components挂载到Vue下面用于局部组件的定义

4.Vue中的MVVM

·MVVM指Model、ViewModel、View

简单理解就是ViewModel作为Model和View的中介，将数据进行双向的交互

·在开发中，优先使用const，只有需要改变某一个标识符的时候才可以使用let

5.一些没见过的HTML语言用法

.toFixed（）可以是一个数保留小数，括号中填写所要保留的位数

disable表示按钮不能交互

 <lable for="male">
   <input type="radio" id="male" name="sex">男
 </lable>
 <lable for="female">
   <input type="radio" id="female" name="sex">女
 </lable>
//name是此段代码互斥的关键，表单提交时值提交一个name，若将两个name改为不一样的则不可以互斥
//如果使用v-model同时绑定一个时也可以实现互斥的效果

  <select name="abc" id="" v-model="fruit">
//此段代码为select中的单选
  <select name="abc" id="" v-model="fruits" multiple>
//在单选的基础上加一个multiple就变成了多选

6.HTMLDOM中方法总结

·.setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

        setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由         setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

·.set（要修改的对象， 索引值， 修改后的值）

·数组中实时响应式的方法

        ·.push方法：在数组的最后一位添加元素，可同时添加多个元素

        ·.pop（）：删除数组的最后一个元素

        ·.shift（）：删除数组中的第一个元素

        ·.unshift：在数组的最前面添加元素，可同时添加多个元素

        ·.splice():删除元素/插入元素/替换元素

                // 删除元素：第二个参数传入要删除几个元素（如果不传入第二个参数则表示从开始的                     位置删到最后） // splice(start, end)

                // 替换元素：第二个参数表示要替换几个元素，后面是用来替换前面的元素// splice(1,                     3, 'm', 'n', 'p')

                // 插入元素：第二个参数传入0并且后面跟上要插入的元素 // splice(1, 0, 'x', 'y', 'z')

        ·.sort():对数组中元素做排序

        ·.reverse（）：将数组中元素进行反转

·循环中for...in遍历时得到的是数组下标，而for...of遍历时得到的是数组值

·.filter()：filter中必须有回调函数，而回调函数的要求是必须返回一个boolean值，当返回true时，函数内部会自动将这次回调的n加入到新的数组中，当返回false时，函数内部会过滤掉这次的n                   取出数组中所有小于100的数字           

const nums = [10, 20, 30, 88, 102, 520, 333, 45] 
let newNums = num.filter( funciton(n) {return n < 100}) 

                                                                         

·.map()：函数返回一个新的数组，数组中的元素为原始数组调用函数后处理的值                           需求：将所有小于100的数字进行转换：全部*2                                                                          

  let new2Nums = newNums.map(function(n) {return n * 2}) 

·.reduce():对数组中所有的内容进行汇总                                                                                     需求：求数组中所有元素的和                                                                                                            let total = new2Nums.reduce(function (preValue, n) {return preValue + n}, 0)                                  函数执行原理：第一次：preValue 0  n 20      第二次：preValue 20  n 40                                                             第三次：preValue 60 n 80     第四次：preValue 140 n 100   最后返回值:240

7.代码规范:缩进4个空格,一般缩进2个空格

CLI->创建editconfig2个空格

8.HTML中各标签的作用

·<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器

·<span> 元素是内联元素，可用作文本的容器

·<ul>+<li>   表格展示标签

·<form>标签用于为用户输入创建HTML表单

·<input>用于搜集用户信息

·<lable>标签为input元素定义标注

·标题通过标签<h1>-<h6>来定义   

<h1>这是一个标题</h1>

·段落通过标签<p>来定义        

 <p>这是一个段落。</p>

·链接通过标签<a>来定义，链接的地址在 href 属性中指定

<a href="https://www.runoob.com">这是一个链接</a>

·图像通过标签<img>来定义，

alt属性是如果无法显示图片则用文字代替

target属性规定在何处打开文档

<img loading="lazy" src="/images/logo.png" width="258" height="39" />

·<br>是换行标签，没有结束标签

·<hr>标签在页面中创建水平线，可用于分割内容

·<table>标签定义HTML表格，简单的HTML表格由table元素以及一个或多个tr、th、td元素组成

        tr元素定义表格行、th元素定义表头、td元素定义表格单元

        <thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。thead 元素应该与          tbody 和 tfoot 元素结合起来使用。tbody 元素用于对 HTML 表格中的主体内容进行分组，             而tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

9.Vue模块开发的组件化

·组件的使用分成三个步骤：

        ·创建组件构造器   

const cpnC = Vue.extend({
//自定义组件模板
template: `模板内容`
})

        ·注册组件

Vue.component('cpn', cpnC)   //注册的两个量分别是自定义标签名和组件名

        ·使用组件

<div> <cpn><cpn> </div>   //使用组件