Vue学习笔记

最新推荐文章于 2024-05-24 10:54:15 发布

方有余裕

最新推荐文章于 2024-05-24 10:54:15 发布

阅读量94

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/wfy216/article/details/129887487

版权

Vue学习笔记

准备工作

一、安装npm cnpm cli

npm 从http://nodejs.cn/download/current/ 下载node.js 安装即可。

C:\Users\Administrator>npm -v
9.4.1

C:\Users\Administrator>node -v
v18.14.0

安装 cnpm

安装淘宝npm（cnpm）
输入以下命令

1、npm install -g cnpm --registry=https://registry.npm.taobao.org

2、输入cnpm -v命令，查看结果

安装cli

cnpm install -g @vue/cli

C:\Users\Administrator>vue --version
@vue/cli 5.0.8

二、javascript 前置知识

console.log() promote() alert()
var a=1,b=2,c=3;
JavaScript=ECMAscrpt+DOM+BOM
注释：

// Ctrl+l

/* */ Ctrl+Shift+a
书写位置
- 行内联 < button value="aa " οnclick=“alert(‘good job’)”>pressme
- 内嵌
var num=10 //JS的变量数据类型只有在程序运行过程中，根据等号右边的值来确定。变量的数据类型是可以变化的 var x=10;var x=‘good’。
数据类型(简单数据类型)

简单数据类型说明默认值
Number 12/0.82 0
Boolean true\false false
String “xxx”/‘yyy’ “”
Undefined var a; undefined
Null var a=null; null
- 八进制： var num=010 ->8
- 十六进制 var num2=0x9
- 最大值、最小值 Number.MAX_VALUE Number.MIN_VALUE
- alert(Infinity) alert(-Infinity)无穷大、无穷小 NaN代表一个非数值 console.log(‘ABC’-100),isNaN()用于判断变量是否一个数字类型
字符串
- 拼接 +
- str.length
- “xxx’XXXXX‘xxxx” == ’xxx"XXX"xxx‘
- ‘pink老师’+18==’pink 老师18‘ //字符串+数字==字符串
- var v=undefined;v+‘pink’ ->‘undefinedpink’(Undefined+12 ->NaN vs. null+1->1 null+“abc”->“nullabc”)
- Undefined 和 Null
  
  一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
  
  var variable;
  
  console.log(variable); // undefined
  
  console.log(‘你好’ + variable); // 你好undefined
  
  console.log(11 + variable); // NaN
  
  console.log(true + variable); // NaN
  
  一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)
  
  var vari = null;
  
  console.log(‘你好’ + vari); // 你好null
  
  console.log(11 + vari); // 11
  
  console.log(true + vari); // 1
逻辑
- var flag=true；flag+1 ->2
数据类型转换
- 转字符 var num=1; num.toString(); String(num); num+" "(三种方法 )
- parseInt(String) parseFloast(String) Number(String) string - 0(隐式方法，利用运算符识别如 ’12‘-0，’124‘-’123‘)，parseInt(“3.14”)=3
- Boolean(’‘，0，NaNo，null，undefined)==false, 其余都为true，如Boolean(“小白”)、oolean(12)

简单数据类型	说明	默认值
Number	12/0.82	0
Boolean	true\false	false
String	“xxx”/‘yyy’	“”
Undefined	var a;	undefined
Null	var a=null;	null

不要直接判断连个浮点数是否相等

console.log(0.00001+0.00002)	//0.0.000030000000000000004`
console.log(0.00005*6)	//0.00030000000000000003`

js支持自加自减 ++i,–i,i++,i–
等于
- =（！）全等：要求值和数据类型都一致, console.log(18===‘18’) //false
- 等于（会默认转换数据类型） console.log(18’18’) //true

逻辑中断（|| && !）

    console.log(123&&456)//456 	表达式1为真 返回表达式2
    console.log(0&& 456)//0		表达式为假 返回表达式1

	console.log(123||456||789)//123
    console.log(0|| 456||999)//456

流程控制----顺序、分支、循环
- 分支
  - if if-else if -else if - else 三元表达式：num>5?‘是’:‘不是’
  - Switch 匹配为全等===
```
Switch(value){
case value1:
    XXX
    break;
case value2:
    XXX
    break; 
default:
    XXX    
}
```
- 循环 for while do-while chorme的断点调试防范
数组
- var arr=new Array();
- var arr=[];
- 修改数组长度
  - ```
   var arr=[1,'a',true,'浙江'];
   arr.length=5;
   console.log(arr);
```
  [1, ‘a’, true, ‘浙江’, empty] length 可读可写
```
  var arr2=['red','green','blue','yello'];
  arr[4]='pink';
  console.log(arr);
```
  [1, ‘a’, true, ‘浙江’, ‘pink’]
函数
1. 形参实参：getsum(num1,num2)
  1. getsum(1,2,3) //3不作用
  2. getsum(1) //第二个参数为默认undefined 1+undefined=NaN
  3. arguments//**（函数内置对象）**里面存储所有传递过来的实参伪数组 arguments[i] 、arguments.length
2. 返回值
  1. return 后面语句不被执行
  2. return 只能返回最后一个值，返回多个值时可用返回数组方式返回多值
  3. 函数无return 则返回undefined
3. 函数定义方式
  1. function fn(){ … }
  2. var fun=function(){ … } //函数表达式
```
        var fn=function(x,y){
            return x+y;
        };
        console.log(fn(1,2));
```
作用域----提高代码可靠性，减少命名冲突
1. 全局变量—浏览器关闭时才释放，比较占内存 函数内部没有声明直接赋值也是全局变量
2. 局部变量（函数变量）-执行完毕即释放函数形参也被看做局部变量
3. es6之前javascript暂无块作用域 if{var num=10;} for{} 内定义变量外面可用

预解析 JS引擎：预解析->代码执行：JS引擎会把JS中所有var、function提升到当前作用域最前面。分为变量预解析（变量提升，不提升赋值）和函数预解析（函数提升）

        console.log(num);
        var num=10;
//相当于：
		var num			//变量提升
        console.log(num);
        num=10;			//var 提升到前面

		fun();
        var fun=function(){
            console.log(22);
        }
         //5function.html:19 Uncaught TypeError: fun is not a function
        var fun;//定义变量fun
		fun();	//未找到fun()函数 所以报错
		fun=function(){
            console.log(22);
        }

函数表达式调用必须写在函数表达式下面

var num=10;
fun();

function fun(){
    console.log(num);
    var num=20;
}
//相当于
var num;		//提升
function fun(){
    var num		//函数内提升
    console.log(num);
    num=20;		//函数内赋值
}
num=10;			//赋值
fun();

函数内部直接赋值，未定义则直接看做全局变量

创建对象的方法

字面量 var obj={}; 创建一个空对象

        var obj={
            uname:'zhangsanfeng ',
            age:18,
            sex:'m',
            sayhi:function(){       //方法,跟匿名函数
                console.log('hi~')
            }
        }
       // var zsf=new obj();
        console.log(obj.uname); //obj.uname VS. obj['age']
        console.log(obj['age']);
//补充
let obj={
    uname:'刘德华',
    song:function(x,y){
        console.log('冰雨')
    }
}
obj.song(1,2)  //带参数对象方法（内部方法，外部函数）

变量：单独声明并赋值

属性：在对象里面不需要声明采用对象.属性

函数：单独声明并调用函数() function fn(x,y){ … … }

方法：在对象里面，调用时对象.方法 fn:function(x,y){ … … }

new Object

var object=new Object();
    obj.name='zsf';
    obj.age=18;
    obj.sex='男';
    obj.sayhi=function(){
        console.log('hi~');
    }//采用等号赋值，每个属性方法用分号  一样使用

构造函数

//构造函数  
        //函数名要大写   不需要return  调用时必须使用new
        function Star(uname,age,sex){
            this.uname=uname;
            this.age=age;
            this.sex=sex;
            this.sing=function(sang){
                console.log(sang)
            }
        }
        var ldh=new Star('刘德华',18,'男');
        console.log(typeof ldh);
        console.log(ldh.uname);
        console.log(ldh.age);
        console.log(ldh.sing('bingyu kaixinmaliu tianyi...'))

对象遍历 for… in

for(var k in obj){

console.log(k)}//属性名，console.log(obj[k])得到属性值

for(var k in ldh){
    console.log(k);//输出：uname  相当于'uname'  ldh.k->ldh.'uname' 要用ldh['uname'] == ldh[k]
    console.log(ldh[k]);//输出：刘德华
}

内置对象

模版字符串：

  document.write(`姓名：${uname}，年龄：${age}`);

数组增删函数

[从索引 2 的位置开始删除 0 个元素，插入“drum”和 “guitar”]

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素：[], 没有元素被删除

Copy to Clipboard

[从索引 3 的位置开始删除 1 个元素]

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
// 被删除的元素：["mandarin"]

DOM

将HTML的标签（div …）在JS中视作对象，最大对象是Document

获取DOM元素的2中方法（根据CSS选择器获取DOM元素、其他获取方式）

    <nav id="nav"> 导航栏</nav>
    <div class="box">12345678</div>
    <div class="box2">abcdefg</div>
    <ul>
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
    </ul>

    <script>
        //获取匹配的第一个元素
        const div=document.querySelector('div');
        const div2=document.querySelector('.box2'); //!!!!!!!  .box2
        console.dir(div);
        console.dir(div2);
        const nav=document.querySelector('#nav');//!!!!!   #nav
        console.log(nav);
        const li=document.querySelector('ul li');
        console.log(li);
    </script>

document.querySelectorAll获取的是伪数组,哪怕仅有一个对象也给出数组，不具有pop（）push（）增删改查等功能。

！！！数组遍历用for…i 不用for …in

其他方式
1. getElementById(‘nav’)//根据id 获取一个元素
2. getElementsByName(‘div’) //获取多个-伪数组输出
3. getElementsByClassName(‘w’)//获取多个-伪数组输出

DOM api操作元素样式：

元素属性对象.元素属性=值如：const img=document.querySelector(‘img’）；img.src=‘./image/2.webp’

样式属性

通过style属性操作CSS 对象.style.样式属性=值

   <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        const box=document.querySelector('.box')
        box.style.width='300px'
        //box.style.backgroundColor="#ccc"
        box.style.backgroundColor='hotpink'//backgroundColor采用小驼峰命名法  padding-left->paddingLeft
    </script>

操作类名（className）操作CSS。解决单个修改CSS样式工作量大问题

[元素.className=‘css类’] class->className

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color:pink;
        }
        .box{
            width: 600px;
            height: 600px;
            background-color: sky;
            border: 1px solid blue;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        div=document.querySelector('div');
        div.className='box';//不需要用.box 若保留原先css:className ='nav box' 否则会覆盖原先的CSS类
    </script>

通过classList操作类控制CSS（终极方法）

元素.calssList.add(‘类名’)
元素.calssList.remove(‘类名’)

元素.calssList.toggle（‘类名’）

   <style>
        .box{
            width: 200px;
            height: 200px;
            color:#333;
            background-color: rgb(179, 221, 178);
            font: 2em sans-serif;

        }
        .active{
            color:red;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">我是文字</div>
    <script>
        div=document.querySelector('div');
        div.classList.add('active');
       // div.classList.remove('box');
        //div.classList.toggle('active');
        //div.classList.toggle('box');
    </script>

修改表单属性

const uname=document.querySelector('input');
console.log(uname.value)//	获取表单值  非innerHTML   !!!!!!!!!!!!

自定义属性—H5推出以data- 开头 data-spm data-scm -data-param等自定义

<div data-id="1" data-spm="测试">2</div>
..
const one=doucument.querySelector('div')
console.log(one.dataset.id)//使用dataset  包含多个自定义集
console.log(one.dataset.spm)//使用dataset  包含多个自定义集

setInterval定时器

        let t1=setInterval(function(){console.log('一秒钟一次')},1000);
        console.log(t1);

        let t2=setInterval(function(){console.log('三秒钟一次')},3000);
        console.log(t2);

        let t3=setInterval(fn_end,10000);
        console.log(t3);

        function fn_end(){
            console.log('十秒钟一次');
            clearInterval(t1);
            clearInterval(t2);
            clearInterval(t3);
        }

选择器querySelector(‘.box’).remov(‘box’) //注意点.

事件监听：1事件源 2事件类型 3处理程序

btn.addEventListener(‘clicke’,fn)

        const btn=document.querySelector('button')
        btn.addEventListener('click',function(){alert("谁点击了我")})

checkBoxCSS 选择器

利用冒泡实现代理

<body>
    <ul>
        <li>我是第一个</li>
        <li>我是第二个</li>
        <li>我是第三个</li>
        <li>我是第四个</li>
        <li>我是第五个</li>
        <p>我不改变颜色</p>

    </ul>
    <script>
        myul=document.querySelector('ul')
        // console.log(myul)
        myul.addEventListener('click',function(e){
            // console.log(e.target.tagName)
        if(e.target.tagName==='LI')
            e.target.style.color='red'
        })

    </script>

日期对象
```
const date=new Date()  
date.toLocalString() //2022/05/01 22:22
data.toDataString()
date.toTimeString()
```
时间戳
- date.getTime() 或者 +new Date() 返回制定时间的时间戳
- Date.now() 无需实例化但只能返回当前的时间戳
  
  例如：+new Date(‘2022-4-1 18:30:00’)

    <div class="grandpa">
        <div class="dad">
            <div class="baby">x</div>
            <p>p第一个段落</p>
            <div class="baby">y</div>
            <div class="baby">z</div>
        </div>
    </div>
    <script>
        const baby=document.querySelector('.baby')
        console.log(baby)
        console.log(baby.parentNode)
        console.log(baby.parentNode.parentNode)
        console.log('------------------')
        const dad=document.querySelector('.dad')
        // console.log(dad.childNodes) //获取所有子节点
        console.log(dad)
        console.log(dad.children)//获得为数组
        console.log(dad.children[1])//获得为数组
        console.log('------------------')
        const bro=document.querySelector('.grandpa .dad :nth-child(3)')
        console.log(bro)
        console.log(bro.previousElementSibling)
        console.log(bro.nextElementSibling)
    </script>

增加DOM节点

    <ul>
        <li>我是老大</li>
    </ul>
    <script>
        // const div=document.createElement('div')
        // console.log(div)
        // document.body.appendChild(div)
        const ul=document.querySelector('ul')
        const li=document.createElement('li')
        li.innerHTML='我是小李'
        ul.appendChild(li)//默认 最后一个插入
        const li2=document.createElement('li')
        li2.innerHTML='我是小lifirst'
        ul.insertBefore(li2,ul.children[0])//插入 XX 之前
    </script>

删除节点

    <ul>
        <li>0、可以删除</li>
        <li>1、可以删除</li>
        <li>2、可以删除</li>
        <li>3、可以删除</li>
    </ul>
    <script>
        ul=document.querySelector('ul')
        ul.removeChild(ul.children[1])//  删除
    </script>

增删案例

<script>

  // 获取元素  每次submit的时候这段代码作为变量被调用一次
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const tbody = document.querySelector('tbody')//本页面中唯一的一个tbody

    const name_value=document.querySelectorAll('[name]')//querySelectorAll('[name]') ERROR!!!
    
  //const als=arr[]   //声明错误
  const arr=[]

  const fm=document.querySelector('.info')

  fm.addEventListener('submit',function(e){
    e.preventDefault()
    //console.log('阻止默认submit动作')

    for(let i=0;i<name_value.length;i++){
      if(name_value[i].value===''){
        return alert('输入数据不能为空') //return  函数返回形式
      }
    }
    // obj对象只能放在函数内
    const obj={
        stuId: arr.length + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
    }
    //console.log(obj)
    arr.push(obj)
    this.reset()
    //console.log(arr)
    render()  //渲染！！！
  })

  function render(){
    tbody.innerHTML=''
    for(let i=0;i<arr.length;i++){
      let tr=document.createElement('tr')
      tr.innerHTML=`<tr>
          <td>${arr[i].stuId}</td>
          <td>${arr[i].uname}</td>
          <td>${arr[i].age}</td>
          <td>${arr[i].gender}</td>
          <td>${arr[i].salary}</td>
          <td>${arr[i].city}</td>
          <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>
        </tr> `
      tbody.appendChild(tr)
    }
  }
  //------------删除操作------------
  tbody.addEventListener('click',function(e){
      if (e.target.tagName==='A') //e.target.tagName==='a'  ERROR!!! 必须要大A
        //console.log(e.target.dataset.id)  //e.target.dataset.data-id ERROR!!! 出现重复多次？？？
        arr.splice(e.target.dataset.id,1)
        console.log(arr)
        render()
    })

</script>

动态参数剩余参数

        function getsum(){
            let sum=0
            console.log(arguments)//伪数组
            for(let i=0;i<arguments.length;i++){
                sum+=arguments[i]
            }
            return sum
        }
        console.log(getsum(1,2,3,4,5,6))
        function getsum(){//动态参数
            let sum=0
            console.log(arguments)//伪数组
            for(let i=0;i<arguments.length;i++){
                sum+=arguments[i]
            }
            return sum
        }
        console.log(getsum(1,2,3,4,5,6))
//-------------------------------
        function getadd(a,b,...other){ //剩余参数 other真数组可用push
            console.log(other)
        }
        getadd(2,3)
        getadd(2,3,4,5,6,7)//4,5,6,7,
//------------------展开运算符-----

        const arr=[1,2,3,4,5,6,7,8,]
        const arr2=[8,7,6,5,4,3,2,1]
        console.log(...arr)
        console.log(Math.max(...arr))
        const arrCombin=[...arr,...arr2]
        console.log(arrCombin)

箭头函数

       // 箭头函数--替代-->匿名函数的地方
        const fn= ()=>{
            alert('abc')
        }
        fn()

        const fun=x=>console.log(x)
        fun('abcdefg')
// this区别 箭头函数no this
        const obj={
            uname:'pink',
            sayHi:function(){
                console.log(this)
            }
        }
        obj.sayHi()

        const obj2={
            uname:'pink',
            sayHi:()=>console.log(this)
            
        }
        obj2.sayHi()

三、Vue起步

1、示意代码

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<body>
    <div id="app">{{ message }}</div>

<script>
  Vue.createApp({       //创建对象
    data() {            //data方法
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')      //对象方法
</script>

2、计数器

  Vue.createApp({
    data() {
      return {
        counter:0,
        maxValue:10,
        minValue:0
      }
    },
    methods:{
      addUp(){
        this.counter++
        //console.log("++++")
      },
      subDown(){
        this.counter--
      }
    },
    // mounted(){
    //   setInterval(()=>{this.counter++},1000)
    // },
    template: `
    <button v-on:click="subDown" v-if="counter>minValue">-</button>
    <span>{{counter}}</span>
    <button v-on:click="addUp" v-if="counter<maxValue">+</button>
    `
  }).mount('#app')

3 、任务管理器

  Vue.createApp({       //创建对象
    data() {            //data方法
      return {
        intext:'',
        todoList:["吃饭","睡觉","工作"]
      }
    },
    methods:{
        appendItem(){
            this.todoList.push(this.intext)//只考虑添加 无需考虑渲染
            this.intext=''
        }
    },
    template:`<div>
    <input v-model="intext"/>
    <button @click="appendItem">添加</button>
    <ul>
        <li v-for="(item,i) in todoList">{{item}}--{{i}}</li>    
    </ul>
    </div>`
  }).mount('#app')      //对象方法

4、组件化

  const app=Vue.createApp({       //创建对象
    data() {            //data方法
      return {
        message: 'Hello Vue!',
        todolist:["吃饭","睡觉","打豆豆"]
      }
    },
    template:`
    <div>
        <title-bar/>           
             <todo_list v-bind:list="todolist"/>
    </div>
    `
  })
//-----------------------------------------
//创建一个组件B
  app.component("todo_list",{       
    props:["list"],
    template:`
    <ul>
        <li v-for="item in list" >{{item}}</li>
    </ul>
    `
  })
 //创建一个组件A  放入template中
  app.component("title-bar",{          
    template:`<h5> 任务管理器 </h5>`
  })
//-------------------------------------------
app.mount('#app')