Hassanh

vue笔记

一：vue介绍

1：为什么要学习vue

饭碗级别技术
应用非常广泛 github
生态好（插件，ui库）

2：vue是什么

https://cn.vuejs.org/

框架提供了一整套东西从一个框架切换成另一个框架不容易
库 jquery 提供了一些api 从一个库切换到另一个库很方便

渐进式JavaScript 框架

作者：尤雨溪

angular 谷歌 2013 指令系统

react facebook 2014 diff算法

vue 尤雨溪

4：vue的优点

渐进式框架
轻量级
数据双向绑定
指令系统 v-xx
组件化系统 --单页面应用
虚拟dom

5：vue缺点

兼容 ie9+

二：vue使用和下载

安装
- 生产环境项目开发结束，部署上线阶段
- 开发环境项目属于开发阶段(提示报错)

引入

开发版本

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

生产版本

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

使用

引入vue.js
实例化vue对象
作用域范围

代码：


<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>Documenttitle>
     
    <script src="./js/vue.js">script>
head>
<body>
    
    <div id="app">

    {
      {msg}}

    div>
body>
<script>
//    console.log(Vue)
//  操作数据
//   var app=new Vue({配置信息})

// 2：实例化一个vue对象
var app=new Vue({
        
    el:"#app",   //vue实例的作用范围标签
    data:{
           //数据层   作用域范围内使用到的数据都在这里定义
        msg:"中公it"
    }
})
// 操作dom元素
// var app=document.getElementById('app');
// var arr=[11,22,33,44];
// var str="中公成都校区"
// app.innerHTML=str;

script>
html>

错误集锦

[Vue warn]: Do not mount Vue to  or  - mount to normal elements instead.
//不能把vue挂载到html或者body

Vue is not defined
//vue.js文件没有引入

三：插值表达式和函数

vue核心：数据驱动(数据改变，视图层跟着改变) 声明式渲染

插值表达式 Mustache语法双花括号 { {}}

语法：

  {
         {
         变量/表达式/函数名()}}
  //注意：不能写if语句和for循环

       
- 代码
  
  ```html
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Documenttitle>
        <script src="./js/vue.js">script>
    head>
    <body>
       
        <div  id="app">
         msg
        {
    {msg}}
        {
    {msg+'0511'}}
        <hr/>
        {
    {num}}
        {
    {num+50}}
        <hr/>
        {
    {flag}}
        {
    {flag?"中公it":"中公尤久业"}}
        <hr/>
        {
    {arr}}
        <hr/>
        {
    {obj.name}}{
    {obj.age}}
       <hr/>
       {
    {fn()}}
        div>
    body>
    <script>
  
  var app=new Vue({
      
        el:"#app",    
        data:{
         
            msg:"中公it",
            flag:false,
            num:25,
            arr:["aaa","bbb","ccc"],
            obj:{
      
                name:"张三",
                age:25
            }
        },
        methods:{
        //所有用到的方法都在这里定义
           fn:function(){
      
              alert("123") 
           },
           fn1(){
      
               console.log(123)
           }
        }
    })
  
  script>
    html>

vue实例的配置信息

el 作用域范围标签

data 定义数据

methods 定义方法

四：vue指令

什么是指令：以v-开头 v-xx，给标签添加的一些新属性【指令就是标签的属性】

使用：

  <标签名 v-指令名="变量/表达式">标签名>

提供了哪些指令
- v-html
  - 用来进行数据绑定
  - v-html和{ {}} 的区别：如果还没渲染 v-html不会显示任何内容，{ {}}会显示{ {msg}}；
    
    v-html会解析字符串html，插值表达式不会解析；
- v-text
  - 用来进行数据绑定
- v-html和v-text的区别
  
  v-html会解析字符串html，v-text不会解析；

v-bind

实现属性绑定

百度
简写
百度

```

    
- 代码
   
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>常用指令title>
        <script src="./js/vue.js">script>
    head>
    <body>
       
        <div  id="app">
          <p>{
      {msg}}p>
          <p v-html="msg">p>
          <hr/>
          <p>{
      {htmlstr}}p>
          <p v-html="htmlstr">p>
          <hr/>
          <p v-text="msg">p>
          <p v-text="htmlstr">p>
          <hr/>
          <a v-bind:href="url">百度a>
             <img v-bind:src="imgurl"/>
             <img :src="imgurl"/>
             <p :title="'p标记'">这是一个p标记p>
             {
      {'p标记'}}
         div>
      body>
      <script>
  
      var app=new Vue({
        
          el:"#app",   
          data:{
           
              msg:"中公it",
              htmlstr:"百度",
              url:"http://www.baidu.com",
            imgurl:"https://upload.jianshu.io/admin_banners/web_images/4995/af694827b911ab360fe44d5252422109849c5760.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
          }
      })
  
    script>
      html>

动态样式绑定

class

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用指令title>
    <script src="./js/vue.js">script>
    <style>
        .col{
              
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
        .bg{
              
            border: 2px solid red;
        }
    style>
head>
<body>
   
    <div  id="app">
      
       <div class="col bg">div>
         
     <div :class="classN">div>
   
       <div :class="classobj">div>

       <div :class="{
              'col':false}">div>
       <div :class="{
              'col':msg=='中公'}">123div>

       
     <div :class="[1==1?'col':'col bg']">456div>

       

       <div :class="'col '+classN">789div>
    
  div>
body>
<script>

var app=new Vue({
    el:"#app",   
    data:{   
        classN:"bg",
        classobj:{
          'col':true,
          'bg':true
        },
        msg:"中公it",
        htmlstr:"<a href='#'>百度a>",
        url:"http://www.baidu.com",
      imgurl:"https://upload.jianshu.io/admin_banners/web_images/4995/af694827b911ab360fe44d5252422109849c5760.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
    }
})

```

style

动态绑定style的值是一个对象

如果属性名有"-" 需要加引号，若不想加引号要改成驼峰命名法比如 font-size 改写成fontSize

代码

    
      
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Documenttitle>
          <script src="./js/vue.js">script>
      head>
      <body>
         
          <div  id="app">
              <div style="width:100px;height:100px;background-color:red">div>

            <div :style="{
          width:'100px',height:'100px','background-color':'pink'}">div>
              <div :style="{
          width:size,height:'100px',backgroundColor:'pink'}">div>
            <div :style="styleobj">div>

            <div :style="[stylea,styleb]">各位帅哥美女们div>

           {
      {msg}}

          div>

       
      body>
      <script>

      var app=new Vue({
        
          el:"#app",   
          data:{
           
              size:"100px",
              msg:"123",
              styleobj:{
        
                  width:'100px',
                  height:'100px',
                  'background-color':'pink'
              },
              stylea:{
        
                  border:"5px solid red",
                  fontSize:'330px'
              },
              styleb:{
        
                  color:'blue'
            }
          }
      })

    script>
      html>

v-if

作用：节点的插入和删除

注意：v-if和v-else-if还有v-else的标签要紧邻，否则报错

使用

  <标签 v-if="变量/表达式">内容标签>
    //值为true插入节点，值为false删除节点、

  <标签 v-if="变量/表达式">内容标签>
    <标签 v-else>内容标签>

    <div v-if="变量/表达式">登录  注册div>
  <div v-else-if="变量/表达式">xxx欢迎你div>
    <div v-else-if="变量/表达式">xxx欢迎你div>
    <div v-else>xxx欢迎你div>

v-show

作用：元素的显示和隐藏(通过样式display控制显示隐藏)
什么时候使用v-if 什么时候使用v-show

频繁的切换元素使用v-show，只有一两次切换元素使用v-if

使用

<标签 v-show="变量/表达式">内容标签>

v-if和v-show的区别
- v-if true就插入节点，false删除节点[没有对应的html内容]
- v-show true就显示，false隐藏[css的display属性控制显示隐藏]

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
    
   
    <div  id="app">

       <div v-if="flag">登录  注册div>
       <div v-if="!flag">xxx欢迎你div>
      
         <div v-if="flag">登录  注册div>
         <div v-else>xxx欢迎你div>
       <div v-if="score>=90&&score<=100">
            <p>优秀p>
         div>
         <div v-else-if="score<90&&score>70">良好div>
         <div v-else>合格div>

         

          <div>
              <span v-show="msg=='国际'">国际span>
              <span v-show="msg=='国内'">国内span>
          div>
      div>
  body>
  <script>
  var app=new Vue({
            
      el:"#app",   
      data:{
               
          flag:true,
          score:89,
          msg:"国际"
      }
  })

  script>
  html>

v-for

作用：用于对数组或对象进行遍历显示

使用

<标签 v-for="值 in 数组/对象">标签>
<标签 v-for="(值,键) in 数组/对象">标签>

多层嵌套
- 注意:内层的键值对的标识符不能和外层的冲突

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
    
   
    <div  id="app">
        
        <ul>
            <li v-for="(item,index) in arr">
              {
          {index+1}}----{
          {item}}
            li>
        ul>
        <hr/>
        <ul>
            <li v-for="(val,key) in obj">
              {
          {key}}---  {
          {val}}
            li>
        ul>
        <hr/>
        <ul>
            <li v-for="item in userarr">
                {
          {item.name}}-{
          {item.age}}-{
          {item.sex}}
              
                    <ol>
                        <li v-for="val in item.scorearr">
                            {
          {val.scorename}}-{
          {val.scorenum}}
                        li>
                    ol>
            li>
        ul>
    div>
body>
<script>

var app=new Vue({
            
    el:"#app",   
    data:{
               
       arr:["aaa","bbb","ccc","ddd"],
       obj:{
            
           name:"小小",
           age:21,
           sex:"男"
       },
       userarr:[
           {
            name:"张三",age:24,sex:"男",
           scorearr:[
               {
            scorename:"china",scorenum:96},
               {
            scorename:"english",scorenum:12},
               {
            scorename:"math",scorenum:120}
           ]
        },
           {
            name:"李四",age:23,sex:"男",
           scorearr:[
               {
            scorename:"china",scorenum:96},
               {
            scorename:"english",scorenum:12},
               {
            scorename:"math",scorenum:120}
           ]},
           {
            name:"狗蛋",age:25,sex:"男",
           scorearr:[
               {
            scorename:"china",scorenum:96},
               {
            scorename:"english",scorenum:12},
               {
            scorename:"math",scorenum:120}
           ]},
           {
            name:"翠花",age:21,sex:"女",
           scorearr:[
               {
            scorename:"china",scorenum:96},
               {
            scorename:"english",scorenum:12},
               {
            scorename:"math",scorenum:120}
           ]}
       ]
    }
})
script>
html>

v-for的key值

https://cn.vuejs.org/v2/guide/list.html#%E7%BB%B4%E6%8A%A4%E7%8A%B6%E6%80%81>

”就地复用“问题加key值， key唯一标识

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略

代码：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
   
    <div  id="app">
       
         <div v-if="flag">
            姓名: <input type="text" key="a1" />
         div>
         <div v-else>
           年龄: <input type="text" key="a2" />
         div>

         <ul>
             <li v-for="(item,index) in arr" :key="item.id">
                <input type="checkbox" /> {
          {item.name}} {
          {index}}
             li>
         ul>

    div>
body>
<script>

var app=new Vue({
            
    el:"#app",   
    data:{
               
        flag:true,
        arr:[
            {
            id:1,name:"香蕉"},
            {
            id:2,name:"苹果"},
            {
            id:3,name:"西瓜"},
            {
            id:4,name:"梨"}
        ]
    }
})

script>
html>

五：总结

vue的安装下载
- 生产环境
- 开发环境
vue的模板
- 引入vue
- 新建vue实例
  - el 挂载点指定vue的作用域范围 body
  - data 定义数据
  - methods 定义方法
- 定义作用域范围
vue的插值表达式 mustache语法 { {变量/表达式}} 详细点
vue指令
- v-html
- v-text
- v-bind
  - 动态绑定class 4种写法
  - 动态绑定style
- v-if
- v-show
- v-if和v-show区别
- v-for v-for的key值

day 02

一：常用的指令

v-on 绑定事件

基础的事件绑定

使用

<标签 v-on:click="函数()">标签>
简写
<标签 @click="函数()">标签>

代码

事件传参

使用

<标签 v-on:click="函数(实参)">标签>

new Vue({
         
  el:"#app",
  data:{
         },
  methods:{
         
    事件函数(形参){
         
    }
  }
})

this的使用

this指向的是vue实例

事件对象

使用

new Vue({
         
  el:"#app",
  data:{
         },
  methods:{
         
    事件函数(形参){
           //没有传入实参，那么这个形参就是事件对象
    }
  }
})

<标签 @事件名="事件函数">标签>    //不需要传入实参

传实参还要有事件对象

使用

new Vue({
         
  el:"#app",
  data:{
         },
  methods:{
         
    事件函数(形参,事件对象形参){
           
    }
  }
})

<标签 @事件名="事件函数(实参,$event)">标签>    //形参和实参位置要一一对应

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
    <style>
        .box{
          
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    style>
head>
<body>
   
    <div  id="app">
        <button v-on:click="fn()">点我button>
        <button v-on:click="fn">点我button>
        <button @click="fn()">点我button>

        <ul>
            <li v-for="(item,index) in arr" :key="index">
                {
        {item}}  <button @click="del(index)"> 删除button>
            li>
        ul>

        <div class="box" @mousemove="move">div>

        <a href="http://www.baidu.com" @click="run('成都',$event)">百度a>
    div>
body>
<script>
var app=new Vue({
          
    el:"#app",   
    data:{
             
        msg:"中公it",
        arr:["香蕉","葡萄","苹果"]
    },
    methods:{
          
        fn(){
          
            alert("好好")
        },
        del(ind){
            //删除
        //    alert(ind)
        // this指向的是vue实例
           console.log(this.msg)
        },
        move(event){
             //移动事件
            // 如果函数没有传入实参，methods里面的事件函数定义的形参就是事件对象
        console.log(event.offsetX)
        },
        run(city,event){
             //阻止默认行为
         event.preventDefault();
         alert(1111,city)
        }
    }
})

// var box=document.querySelector(".box");
// box.οnmοusemοve=function(event){
          
//   console.log(event.offsetX)
// }

// var a=document.querySelector("a")
// a.οnclick=function(event){
          
//     // 阻止元素的默认行为
//     event.preventDefault()
//     alert(1111);
// }

script>
html>

v-model

作用：表单元素数据绑定

架构思想:MVVM

数据双向绑定：数据层改变，视图层跟着改变；视图层改变，数据层跟着改变；

修饰符

什么是修饰符: 修饰我们事件和v-model的符号，简化我们的一些操作

使用

<标签   @事件名.修饰符="事件函数">

事件修饰符

https://cn.vuejs.org/v2/guide/events.html

.stop 阻止事件冒泡
.prevent 阻止默认行为
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 一次性事件绑定
键盘修饰符（键盘事件） .enter .up .down .left .right

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
    <style>
        .box{
          
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .small{
          
            width: 150px;
            height: 150px;
            background-color: red;
        }
    style>
head>
<body>
   
    <div  id="app">

        <input type="text" @keydown.enter="down"/>

         
       <a href="http://www.baidu.com" @click.prevent="fn">百度a>
          
       <button @click.once="pay">确认支付button>

       <div class="box" @click="fn1">
           
           <div class="small" @click.stop="fn2">div>
           
       div>

         
       <div class="box" @click.self="fn1">
        
        <div class="small" @click="fn2">div>
       div>

    <div class="box" @click="fn1">
        
        <a href="http://www.baidu.com" @click.stop.prevent="fn">百度a>
        
    div>
  div>
  body>
  <script>

  var app=new Vue({
          
      el:"#app",   
      data:{
             
          
      },
      methods:{
          
          fn(){
          
              alert(1111);
          },
          pay(){
          
              alert("支付完成")
          },
          fn1(){
          
              alert("大盒子box")
          },
          fn2(){
          
              alert("小盒子small")
          },
          down(){
          
              console.log("enter");
              
          }
      }
  })
   script>
  html>

表单修饰符

.lazy 不会实时数据绑定，在changge事件中进行数据绑定

.number 将输入的内容数据类型转换为数值

.trim 过滤首尾空白字符

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
   
    <div  id="app">

        <input type="text"  v-model.lazy="username"  />
    {
      {username}}

       年龄:<input type="text" v-model.number="age"/>

       <input type="text" v-model.trim="str"/>
    div>
body>
<script>

var app=new Vue({
        
    el:"#app",   
    data:{
           
       username:"",
       age:0,
       str:""
    }
})

script>
html>

二:面试题

1：说说你对this的理解，如何改变this指向

this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象。
一、全局环境：
全局环境就是在里面，这里的this始终指向的是window对象。
二、局部环境：
1）在全局作用域下直接调用函数，this指向window。
2）对象函数调用，哪个对象调用就指向哪个对象。
3）使用 new 实例化对象，在构造函数中的this指向实例化对象。
4）使用call或apply改变this的指向。

day 03

一：生命周期

生命周期：一个vue实例生命的周期，也就是vue实例从开始到结束的过程，从创建到销毁的过程；

生命周期阶段

创建阶段
- beforeCreate 创建之前
  - 作用：一般不使用，做一些需要在创建之前做的事情
  - 注意：这里不能操作data里面的数据，因为data没有被初始化
- created 创建之后
  - 作用：一般在这里发送数据请求，开启定时器
  - 注意：这里是最早操作data里面的数据的地方
挂载阶段
- beforeMount 挂载之前
  
  注意：在这个函数里，页面没有真正渲染，只是有了虚拟dom(js对象)
- mounted 挂载之后
  - 作用：把虚拟dom真正的渲染到页面上，页面上有了真实dom
  - 从这里开始可以使用$refs获取dom节点
  - 初始化一些插件相关的配置,也可以发送数据请求
更新阶段
- beforeUpdate 更新之前
  - 作用：做一些判断是否需要更新
- updated 更新之后
销毁阶段
- beforeDestroy 销毁之前
  - 作用销毁之前做一些保存
- destroyed
  - 作用释放定时器相关的内容，销毁之后，事件绑定都不存在了

代码

  
  <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>Documenttitle>
   <script src="./js/vue.js">script>
  head>
  <body>
  
   <div  id="app">

   {
    {msg}}
   <button  @click="fn">点击button>

   div>
  body>
  <script>
      var app=new Vue({
      
    el:"#app",   
    data:{
         
        msg:"中公it"
    },
    methods:{
      
     fn(){
      
         console.log(123)
     }
    },
    //创建阶段
    beforeCreate(){
      
        //这里不能操作data里面的数据，因为data没有被初始化
        console.log(this.msg);
        console.log("创建之前");
        console.log(document.querySelector("#app"));
        },
created(){
      
    // 一般在这里发送数据请求，开启定时器
    console.log(this.msg);
    console.log("创建之后");
    console.log(document.querySelector("#app"));
},
//挂载阶段
beforeMount(){
      
    console.log("挂载之前");
    console.log(document.querySelector("#app"));
},
mounted(){
      
    console.log("挂载之后");
    console.log(document.querySelector("#app"));
},
//更新阶段
beforeUpdate(){
      
    // 做一些判断  是否需要更新
    console.log("更新之前");
    console.log(document.querySelector("#app"));
},
updated(){
      
    
    console.log("更新之后");
    console.log(document.querySelector("#app"));
},
//销毁阶段
beforeDestroy(){
      
    // 销毁之前做一些保存
    console.log("销毁前");
},
destroyed(){
      
    // 释放定时器相关的内容
    // 销毁之后，事件绑定都不存在了

    console.log("销毁后");
   
}
})

  setTimeout(()=>{
      
      app.$destroy();   //销毁vue实例
  },10000)

  script>
  html>

二：监听器 watch

作用：来监听data里面数据的变化，一旦数据变化了就会自动执行相关的函数
分类：
- 浅监听：监听基本数据类型
- 深监听：监听引用数据类型

使用

var app=new Vue({
       
   el:"#app",   
   data:{
          
      a:2,
      b:0
   },
  watch:{
          //监听器
   data中的变量(新值，旧值){
          //浅监听
        //变量的值发生变化，就会执行这里的代码
   },
   data中变量：{
       
       deep:true,   //深监听 【监听引用类型】
       handler(新值){
       
          //代码块
       }
   }
 }
})

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
   
    <div  id="app">
         <input type="text" v-model.number="a"/>
         +
         <input type="text" v-model.number="b"/>
         =
         <input type="text" v-model="c"/>
    
         <hr/>
       <p>姓名:{
      {user.name}}p>
       <p>年龄:{
      {user.age}}    <button @click="ageadd">年龄增长button>p>
         div>
  body>

  <script>

  var app=new Vue({
        

  el:"#app",   
  data:{
           
      a:0,
      b:0,
      c:0,
      user:{
        
          name:"小小",
          age:25
      }
  },
  methods:{
        
      ageadd(){
        
          this.user.age++;
      }
  },
  watch:{
        
      a(newv,oldv){
        
          // console.log(123)
          // console.log(newv)   //变化之后的值
          // console.log(oldv)   //变化之前的值
          this.c=newv+this.b
      },
      b(newv,oldv){
        
          this.c=newv+this.a
      },
      user:{
           //深度监听
          deep:true,
          handler(newv){
        
               console.log(1);
               console.log(newv)
          }
      }
  }
   })

  script>

  html>

三：computed计算属性

含义：计算动词属性名词
- 计算属性本质是属性，这个属性需要计算(函数)得到
- 使用场景：购物车

使用

var app=new Vue({
       
     el:"#app",   
     data:{
         },  //定义默认数据的地方
     computed:{
         //通过计算得到属性
        属性名:function(){
          //值一定是一个函数，而且这个函数一定要有返回值
            return 值;
        }
     }
   }
 })

{
      {属性名}}

注意：
- 计算属性的值一定是一个函数，而且这个函数一定要有返回值
- 计算属性的函数里面的this同样是当前vue实例
- 页面第一次加载时，计算属性的函数会执行，给属性赋初始值
- 依赖属性变化的时候，计算属性的函数会再次执行
- 计算属性可以直接在模板里渲染，说明他也是当前vue实例对象的属性
面试题：watch和computed的区别？

watch：监听data和computed中数据的变化；可以进行异步操作；

computed：定义属性（该属性通过计算得到）；不能进行一步操作；通过return 返回处理的数据；

computed的get和set


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
   
    <div  id="app">
         <input type="text" v-model.number="a"/>
         +
         <input type="text" v-model.number="b"/>
         =
         <input type="text" v-model="c"/>
    {
      {c}}

    div>
body>
<script>

var app=new Vue({
        
    el:"#app",   
    data:{
           
        a:0,
        b:0
        // ,c:0
    },
    computed:{
        
        // c(){
        
        //     // 页面第一次加载时，该函数会(第一次)默认执行，给属性赋初始值
        //     //依赖属性变化的时候，该函数会再次执行
        //     console.log("computed")
        //     return this.a+this.b  //this同样是vue实例
        // }
        c:{
        
            get(){
           //c被获取时执行这里(直接读取c的值不会执行)
               console.log("get");
               return this.a+this.b;
            },
            set(v){
          //c被设置时执行这里  v就是设置的值
                console.log("set",v);
            }
        }
    }
   
})
script>
html>

错误集锦

1：Method “allcheck” has already been defined as a data property.

data中的变量名和methods中的方法名冲突了

day 04

组件

组件化开发优势：复用性强，便于后期维护和开发
什么是组件：包含了html,css,js的一个整体(js对象)，是一个独立的功能
单页面应用(SPA)
VUE的核心：数据驱动，组件化

一：组件使用

1-1：组件的注册

1:全局注册

语法

  Vue.component('组件名',{
       组件配置对象})

使用(调用)组件
```
<组件名>组件名>
```
注意：
- 全局注册组件需要放在vue实例化之前，所有的vue实例都可以使用
- template指定了组件的模板信息

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
    <style>
        ul{
        
            padding: 0;
            margin: 0;
            list-style: none;
            width: 500px;
            display: flex;
            height: 50px;
            border: 1px solid;
           
        }
        li{
        
            width: 99px;
            height: 50px;
            border-right: 1px solid;
            line-height: 50px;
            text-align: center;
        }
        .active{
        
            background-color: yellow;
            color:red;
        }
    style>
head>
<body>
   
    <div  id="app">
       <mycom>mycom>
       <hr/>
       <mycom>mycom>
    div>

    <h3>---------分割线-------h3>
    <div id="main">
        <mycom>mycom>
    div>
body>
<script>
Vue.component("mycom",{
        
    // template指定组件的模板
   template: "全局组件
"
})

// 全局注册组件需要放在vue实例化之前，所有的vue实例都可以使用

var app=new Vue({
        
    el:"#app",   
    data:{
           
       
    }
})
  var main=new Vue({
        
      el:"#main",
      data:{
        }
  })
  script>
  html>

2:局部注册

语法

var app=new Vue({
       
    el:"#app",   
    data:{
           
    },
    components:{
       
        组件名:{
       配置对象},
        组件名:{
       配置对象}
    }
})

使用
```
<组件名>组件名>
```
注意
- 局部组件只能在当前所在的实例去使用

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
    <style>
        ul{
        
            padding: 0;
            margin: 0;
            list-style: none;
            width: 500px;
            display: flex;
            height: 50px;
            border: 1px solid;
           
        }
        li{
        
            width: 99px;
            height: 50px;
            border-right: 1px solid;
            line-height: 50px;
            text-align: center;
        }
        .active{
        
            background-color: yellow;
            color:red;
        }
    style>
head>
<body>
   
    <div  id="app">
        <mycon>mycon>
    div>

    <h3>---------分割线-------h3>
    <div id="main">
        
    div>
body>
<script>
    var app=new Vue({
        
      el:"#app",   
      data:{
            
      },
      components:{
        
          // 组件名:{配置对象}
          // 局部组件只能在当前所在的实例去使用
          mycon:{
        
             template:`
                
                   我是局部组件
                
             ` 
          }
      }
  })
   var main=new Vue({
        
      el:"#main",
      data:{
        }
  })
  script>
  html>

1-2：组件命名：

1：不能是html标签名(html新增的语义标签：header,nav,main,aside,section,slider,article,footer…)
2:命名尽量语义化
3:组件名不能使用驼峰命名了，使用组件的时候需要用- 链接比如组件名为myHead 使用
4:单标签只可以使用一次，后面的将不再显示

1-3:template配置项

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
    <style>
        ul{
        
            padding: 0;
            margin: 0;
            list-style: none;
            width: 500px;
            display: flex;
            height: 50px;
            border: 1px solid;
           
        }
        li{
        
            width: 99px;
            height: 50px;
            border-right: 1px solid;
            line-height: 50px;
            text-align: center;
        }
        .active{
        
            background-color: yellow;
            color:red;
        }
    style>
head>
<body>
   
    <div  id="app">
        <mycon>mycon>
        <mybb>mybb>
    div>
    <template id="aa">
        <div>
            <div>
             <h3>我是局部组件h3>
            div>
            <div>789div>
        div>
    template>

    <template id="bb">
       <div>123div>
    template>
 
body>
<script>
   var app=new Vue({
        
      el:"#app",   
      data:{
            
      },
      components:{
        
          // 组件名:{配置对象}
          // 局部组件只能在当前所在的实例去使用
          mycon:{
        
             template:"#aa"
          },
          mybb:{
        
              template:"#bb"
          }
      }
  })
  script>
  html>

错误集锦

1:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

组件模板有且只有一个根元素

2:Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

不知道元素你确定注册了这个组件了吗？

1-4:组件嵌套

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
    <style>
        ul{
        
            padding: 0;
            margin: 0;
            list-style: none;
            width: 500px;
            display: flex;
            height: 50px;
            border: 1px solid;
           
        }
        li{
        
            width: 99px;
            height: 50px;
            border-right: 1px solid;
            line-height: 50px;
            text-align: center;
        }
        .active{
        
            background-color: yellow;
            color:red;
        }
    style>
head>
<body>
    <div  id="app">
       <mycon>mycon>
       <hr/>
       <mybb>mybb>
    body>
<script>
Vue.component("mycd",{
        
    template:"00000"
})

var app=new Vue({
        
    el:"#app",   
    data:{
            
    },
    components:{
        
        // 组件名:{配置对象}
        // 局部组件只能在当前所在的实例去使用
        mycon:{
        
           template:`
              
                 mycon
                 
                 
                  
              
           `,
           components:{
        
               aa:{
        
                   template:`
                      aaa
                   `
               }
           }
        },
        mybb:{
        
            template:`
               
                  mybb
               
            `
        }
    }
})
script>
html>

1-5:组件的配置选项(重点)

The “data” option should be a function that returns a per-instance value in component definitions.

data选项应该是一个函数
组件中的data是一个函数，返回一个对象
- 组件的data不能是一个对象，因为一旦是一个对象，所有组件都会共享一个数据源，造成了数据的污染
- 组件data必须是一个函数，函数返回一个对象，每次返回都会重新创建一个新对象
- 组件的数据应该是独立的
template是指定模板的
其他配置选项和vue实例一模一样的

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
    <style>
        ul{
        
            padding: 0;
            margin: 0;
            list-style: none;
            width: 500px;
            display: flex;
            height: 50px;
            border: 1px solid;
           
        }
        li{
        
            width: 99px;
            height: 50px;
            border-right: 1px solid;
            line-height: 50px;
            text-align: center;
        }
        .active{
        
            background-color: yellow;
            color:red;
        }
    style>
head>
<body>
   
    <div  id="app">
       <mycon>mycon>
       <hr/>
       <mybb>mybb>
    div>
body>
<script>
Vue.component("mycd",{
        
    template:`
       
          mycd全局组件
          {
         {msg}}
          
       
    `,
    data:function(){
        
        return {
        
            msg:"成都"
        }
    },
    methods:{
        
        fn(){
        
            this.msg="nihao"
        }
    }
})
var app=new Vue({
        
    el:"#app",   
    data:{
            
    },
    components:{
        
        // 组件名:{配置对象}
        // 局部组件只能在当前所在的实例去使用
        mycon:{
        
           template:`
              
                 mycon
                 
                 
                  
              
           `,
           components:{
        
               aa:{
        
                   template:`
                      aaa
                   `
               }
           }
        },
        mybb:{
        
            template:`
               
                  mybb
               
            `
        }
    }
})

script>
html>

二：vue-cli vue脚手架开发

vue-cli脚手架工具：快速搭建一个vue项目

2.1 、安装vue-cli

确保电脑安装了node环境，输入以下命令检测是否安装了node

node -v     //显示版本号说明安装了node    如果提示node不是内部命令，那就就去安装node

node的安装地址：https://nodejs.org/en/download/

npm install vue-cli -g    //全局安装脚手架工具

如果电脑上安装了cnpm淘宝镜像，可以使用cnpm 安装

cnpm install vue-cli -g

如果没有淘宝镜像先安装淘宝镜像

npm install cnpm -g --registry=http://registry.npm.taobao.org

z执行完了执行 cnpm/npm install vue-cli -g 该命令安装脚手架工具

vue -V    //显示版本号说明安装成功
2.9.6

2.2 、初始化vue项目

找到需要存储项目的目录
在该目录下执行命令
```
vue init webpack 项目名(英文)
```
启动项目
```
npm run dev
or
npm start
```

day 05

一：回顾

1-1、组件

组件的含义：包含了html，css，js的独立的js对象（vue实例）
vue是单页面应用
组件化开发优势：复用性强，便于后期维护和开发

1-2、组件定义

局部注册

全局注册

Vue.component("组件名",{
       
   template:`有且只能有一个根元素
`，
   data（）{
       
     return {
       
  
    }
  }
})

1-3、组件命名规范

1-4、组件嵌套

1-5、组件的配置项

1-6、vue-cli脚手架

错误

命令行出现：

canot found module ‘user-home’

找不到模块

发给别人一个vue项目

删除项目目录下的node_modules包
压缩项目文件夹，将文件夹发给别人即可

如何运行别人发给你的vue项目

把别人发给你的项目文件，解压
进入解压后的文件夹里 cmd
运行 cnpm i 或者npm i 下载项目依赖包
下载完成后，执行npm run dev

二：脚手架搭建的项目中组件使用

定义组件

在components目录下新建xxx.vue文件

在xxx.vue文件下写入代码

使用组件

引入，注入，调用

// 组件模板
<template>
  <div>
     我的第一个vue项目
     <!-- 3：调用 -->
     <Myhead></Myhead>
  </div>
</template>
// js
<script>
// 1:引入
import Myhead  from './components/Myhead'
export default {
         
    components:{
           //2:注入
      Myhead
    }
}
</script>

三：组件数据通信

组件之间数据的相互使用

3-1、父向子通信

1：父组件调用子组件，给子组件自定义属性

//父组件
<子组件  属性1="值" 属性2="值">
<子组件  ：属性="变量">

2：子组件通过props接收父组件传来的自定义属性

<script>
   export default {
       
     props:['属性1'，'属性2']
   }
</script>

3：子组件视图上直接使用该自定义属性
```
{
      {属性1}}
```

代码

父组件

 // 组件模板
  <template>
    <div>
     
       
       <Myhead :mycon="num" :mycom="flag" :dataarr="arr[0]">Myhead>

       <Myhead :dataarr="arr[1]">Myhead>
       <Myhead :dataarr="arr[2]">Myhead>
   <hr/>
      <Myhead v-for="(item,index) in arr" :key="index" :dataarr="item">Myhead>
   

    div>
  template>
  // js
  <script>

  import Myhead  from './components/Myhead'
  export default {
        
      data(){
        
          return {
        
            flag:true,
            num:25,
            arr:[
              {
        
                title:"学院动态",
                list:[
                  '中国上市企业市值500强出炉 中公教育位居',
                  '中国上市企业市值500强出炉 中公教育位居',
                  '中国上市企业市值500强出炉 中公教育位居'
                ]
              },
              {
        
                title:"学员活动",
                list:[
                  '中国上市企业市值500强出炉 中公教育位居1',
                  '中国上市企业市值500强出炉 中公教育位居1',
                  '中国上市企业市值500强出炉 中公教育位居1'
                ]
              },
              {
        
                title:"常见问题",
                list:[
                  '中国上市企业市值500强出炉 中公教育位居2',
                  '中国上市企业市值500强出炉 中公教育位居3',
                  '中国上市企业市值500强出炉 中公教育位居4'
                ]
              }
            ]
          }
      },
      components:{
          
        Myhead
      }
  }
  script>
  // css
  <style>

  style>

子组件

<template>   
 <div>
       <div class="list">
           
           {
      {mycon}} ----{
      {mycom}}
           
           <h3>{
      {dataarr.title}}h3>
           <ul>
               <li v-for="(item,index) in dataarr.list" :key="index">
                   {
      {item}}
               li>
           ul>
       div>
    div>
template>
<script>

export default {
        
    props:['mycon','mycom','dataarr'],  //2：通过props接收父组件传来的数据
    data(){
        
        return {
        
           arr:[
               "中国上市企业市值500强出炉 中公教育位居",
               "中国上市企业市值500强出炉 中公教育位居",
               "中国上市企业市值500强出炉 中公教育位居"
           ]
        }
    }

}
script>
<style>
style>

props验证

为了使组件内部使用数据的可靠性，我们对外部传递进来的数据进行校验

如何实现校验

//方式1
props:['属性1'，'属性2']

//方式2   (String,Number,Boolean,Array,Object Date Function Symbol)
props:{
   属性1：类型 ，    //只有类型检测
   属性2：[类型1,类型2] 
}

//方式3  
props:{
   属性1：{
      type:类型 ,
      default:默认值，
      required：true/false，
      validator:function(val){
        //validator函数一定要有返回值，返回true表示验证通过，false验证不通过 控制台有警告
      }
   }
   
}

代码

<template>
    <div>
       <div class="list">
           
           {
      {mycon}} ----{
      {mycom}}
           
           <h3>{
      {dataarr.title}}h3>
           <ul>
               <li v-for="(item,index) in dataarr.list" :key="index">
                   {
      {item}}
               li>
           ul>
       div>
    div>
template>
<script>

export default {
        
    // props:['mycon','mycom','dataarr'],  //2：通过props接收父组件传来的数据
    // props验证，为了使组件内部使用数据的可靠性，我们对外部传递进来的数据进行校验
    props:{
        
        // mycon:String , //类型验证
        mycon:{
        
            type:String,
            default:"hellworld"   //默认值
        },
        // mycom:[String,Number],
        mycom:{
        
           type:String,
           required:false,    //是否必须传入   true必须  false可以不传入
           validator:function(val){
           // 验证函数
            //    validator函数一定要有返回值，返回true表示验证通过，false验证不通过 控制台有警告
             if(val.length<5){
        
                 return true;
             }else{
        
                 return false;
             }

           }
        },
        dataarr:{
        
            type:Object   //类型校验
        }
    },
    data(){
        
        return {
        
           arr:[
               "中国上市企业市值500强出炉 中公教育位居",
               "中国上市企业市值500强出炉 中公教育位居",
               "中国上市企业市值500强出炉 中公教育位居"
           ]
        }
    }

}
script>
<style>

style>

注意：vue是单向数据流，子组件不能修改props中的属性，但是在父组件中修改，传到子组件的数据也会跟着变化

代码

父组件

<template>
  <div>
    {
      {num}}  <button @click="fn">修改numbutton>
    <hr/>
    <Myfoot  :n="num">Myfoot>
  div>
template>

<script>
import Myfoot from './components/Myfoot'
export default {
        
    data(){
        
        return {
        
           num:25
        }
    },
    components:{
          
      Myfoot
    },
    methods:{
        
        fn(){
        
            console.log(this.num)
            this.num++
        }
    }
}
script>
// css
<style>

style>

子组件

<template>
    <div>
       {
      {n}}--{
      {m}}
       
    div>
template>
<script>
export default {
        
    props:['n'],
    data(){
        
        return {
        
           m:6
        }
    }
}
script>

3-2、子向父通信

1：父组件调用子组件时，给子组件自定义事件
```
//父组件
```
2：在父组件中的methods中定义自定义事件对应的函数
```
//父组件
methods：{
  函数名（）{} 
}
```
3：在子组件中通过this.$emit(‘事件名’,参数)触发自定义事件
```
//子组件
this.$emit('事件名',参数)
```

代码

父组件

<template>
  <div>
    {
      {m}}
      <hr/>
      
     <Child @abc="fn">Child>
  div>
template>

<script>
import Child from './components/Child'
export default {
        
   data(){
        
     return {
        
       m:""
     }
   },
   components:{
        
     Child
   },
   methods:{
        
     fn(val){
           //2:父组件中定义自定义事件对应的函数fn
       console.log("wo 被触发了")
      //  val就是触发abc事件传递过来的参数
      this.m=val;
     }
   }
}
script>

子组件



<template>
    <div>
        {
      {msg}}
        <button @click="change">触发abcbutton>

    div>
template>
<script>
export default {
        
    data(){
        
        return {
        
            msg:"子组件==成都"
        }
    },
    created(){
        
        // 3:触发自定义事件的
        // this.$emit('事件名',参数)
        // console.log(this)
        // this.$emit('abc',this.msg)
    },
    methods:{
        
        change(){
        
             this.$emit('abc',this.msg)
        }
    }
}
script>

3-3、非父子通信

中央事件总线：eventbus

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6D9S7l4D-1611110597372)(F:\Web\vue\day05\参考\day05\非父子组件传值.png)]

需求：非父子组件A和B，从A组件向B组件传值

1：main.js中定义一个公共区域（新的vue实例）

// 1:创建公共区域(新的vue实例)
var eventbus=new Vue();
// 2：公共区域挂载到Vue的原型上面(每一个vue实例都可以访问它原型上的成员)
Vue.prototype.$bus=eventbus;

2：在B组件中给公共区域自定义事件

<template>
    <div>
        {
      {m}}
    div>
template>
<script>
export default {
        
    data(){
        
        return {
        
           m:"123"
        }
    },
    created(){
        
        // // console.log(this,111)
        // var that=this;
        // // 公共区域自定义事件--接收值
        // this.$bus.$on('abc',function(v){
        
        //     console.log("我被触发了",v)
        //     console.log(this)
        //    that.m=v
        // })
        //--------------
        // console.log(this,111)
        
        // 公共区域自定义事件--接收值
        this.$bus.$on('abc',(v)=>{
        
            console.log("我被触发了",v)
            console.log(this)
           this.m=v
        })
    }
}
script>

3：在A组件中触发公共区域的自定义事件

<template>
    <div>
        <button @click="fn">传值button>
    div>
template>
<script>
export default {
        
    data(){
        
        return {
        
           msga:"a向b传值" 
        }
    },
    methods:{
        
        fn(){
        
            // 触发公共区域的自定义事件传值
            
            this.$bus.$emit('abc',this.msga)
        } 
    }
}
script>

day 06

一：回顾

父向子

子向父

非父子

二：ref

ref 被用来给元素或子组件注册引用信息

2-1、ref 注册在普通dom元素上

获取到的是dom元素

2-2、ref加载子组件上

可以获取或使用组件的所有数据和方法

2-3、ref加载循环渲染

利用v-for和ref获取一组数组

注意：

1：ref需要在dom渲染完成后才会有，使用的时候确保dom已经渲染完成，比如

mounted钩子函数中可以使用

2：ref如果是循环出来的，ref的值是一个数组，要拿到单个的ref只需要循环就可以了

代码

<template>
  <div>
    
      <h2 ref="myh2">中公成都校区在施工h2>
      <input type="text" ref="myinput" />
      <button @click="fn">获取h2button>

      
      <ul>
        <li ref="list" v-for="(item,index) in arr" :key="index">
          {
    {item}}
        li>
      ul>
      <button @click="fn1">获取li元素button>

      
      <Myref ref="myref">Myref>
       <button @click="fn2">获取子组件button>
  div>
template>

<script>
import Myref from './components/Myref'
export default {
      
  data(){
      
    return {
      
      arr:['aaa','bbb','cccc']
    }
  },
  methods:{
      
    fn(){
      
      // 所有的ref的注册信息都会注册到组件的$refs对象上
      console.log(this.$refs)
      console.log(this.$refs.myh2.innerHTML)
    },
    fn1(){
      
      // ref注册到循环渲染的元素上，得到的是一个数组[li,li,li]
      console.log(this.$refs.list[0].innerHTML)
    },
    fn2(){
      
      console.log(this.$refs.myref.msg)
      this.$refs.myref.msg="hello  晋老师"
    }
  },
  components:{
      
    Myref
  }
}
script>

三：vue中使用jquery

3-1：外部链接

在index.html中，通过script标签直接引入外部链接


<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvuetitle>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
  head>
  <body>
    <div id="app">div>
    
  body>
html>

3-2、npm

安装

cnpm install  jquery -D

1：局部使用(那个组件用，那个组件引用)

import $ from 'jquery'

2：全局使用（所有的组件都可以用）

//main.js
import $ from 'jquery'
Vue.prototype.$=$
//在每一个组件中使用
this.$("#box").hide()

四：插槽(Slot)

插槽用于将所携带的内容，插入到指定的某个位置

父组件向子组件传html标签

4-1、匿名插槽

使用

子组件

父组件

//msg数据在父组件中定义

   {
        {msg}}

代码

父组件

<template>
  <div>
  
     <Mychild>
       <ul>
         <li v-for="(item,index) in arr" :key="index">{
      {item}}li>
       ul>
     Mychild>

     <hr/>
     <Mychild>
        <p>{
      {msg}}p>
     Mychild>
      
  div>
template>

<script>
import Mychild from './components/Mychild'
export default {
        
  data(){
        
    return {
        
        msg:"我是p标签123",
        arr:['aaa','bbb','ccc']
    }
  },
  methods:{
        
  
    
  },
  components:{
        
    Mychild
  }
}
script>

子组件

     成都中公
     
     
     我是成都学员-程序员

}


# 4-2、具名插槽

- 代码

- 父组件

  ```html
  
  
  
  ```

- 子组件

  ```html
  
  
  
  ```

# 4-3、作用域插槽(难)

>  子组件做循环(循环的结构从父组件传来)或者某一部分他的dom结构应该由外部传递进来的时候，使用作用域插槽
>
>  使用作用域插槽，子组件会向父组件的作用域里传递数据，父组件使用插槽，要包含在template中 

- 语法

v-bind：自定义prop名=“数据” //子组件中传值

vue笔记

一：vue介绍

1：为什么要学习vue

2：vue是什么

4：vue的优点

5：vue缺点

二：vue使用和下载

三：插值表达式和函数

四：vue指令

五：总结

day 02

一：常用的指令

v-on 绑定事件

v-model

修饰符

表单修饰符

二:面试题

day 03

一：生命周期

二：监听器 watch

三：computed计算属性

错误集锦

day 04

组件

一：组件使用

1-1：组件的注册

1:全局注册

2:局部注册

我是局部组件

1-2：组件命名：

1-3:template配置项

错误集锦

1-4:组件嵌套

1-5:组件的配置选项(重点)

二：vue-cli vue脚手架开发

2.1 、 安装vue-cli

2.2 、初始化vue项目

day 05

一：回顾

错误

二：脚手架搭建的项目中组件使用

三：组件数据通信

3-1、父向子通信

props验证

注意：vue是单向数据流，子组件不能修改props中的属性，但是在父组件中修改，传到子组件的数据也会跟着变化

3-2、子向父通信

3-3、非父子通信

day 06

一：回顾

二：ref

2-1、ref 注册在普通dom元素上

2-2、ref加载子组件上

2-3、ref加载循环渲染

三：vue中使用jquery

3-1：外部链接

3-2、npm

四：插槽(Slot)

4-1、匿名插槽

成都中公

成都中公

成都中公

五：is属性

5-1、改变默认标签的约束

123

5-2、动态组件

day 06+

一：回顾

二：路由

2-1、路由(vue-router)安装

2-2：路由的封装

2-3:路由重定向–404配置

2-4：路由懒加载

2-5、编程式导航

2-6、动态路由

2-7、路由参数

2-8、嵌套路由

2-9、路由进阶

1-路由模式

2-命名路由

3-别名

2.1 、安装vue-cli

1:如果安装旧版本卸载