（）作者：小陈同学

一、vue基础

第一部分、Vue核心

安装（略）

0、学前基础

vue是什么，是一套用于构建用户界面的渐进式js框架

渐进式：vue可以自底向上逐层的应用

简单应用：只需一个轻量小巧的核心库
复杂应用：可以引入各式各样的vue插件

特点：组件化模式、声明式编码、虚拟DOM+Diff算法

学习vue前要掌握的js基础知识：

es6语法规范
es6模块化
包管理器
原型、原型链
数组常用方法
axios
promise

1、初识vue

*浏览器配置f12生产提示阻止

vue.config.productionTip=false;//阻止vue在启动时生成生产提示。

*favicon.ico页签图标

1-1、插值语法

用于解析标签体内容。

格式：{{msg}}

插值里面放js表达式

区分js表达式和js代码(语句)

表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方；

a
a+b
demo(1)
x===y ? 'a':'b'

js代码(语句)

if(){}
for(){}

dome.toUpperCase()//js中让小写字母转为大写字母

1-2、指令语法

用于解析标签、(包括:标签属性、标签体内容、绑定事件...)。

写链接时要v-bind（或者：）

//将url通过绑定的形式绑定给href这个属性
<a v-bind:href="url">链接</a>
<a :href="url">链接</a>

2、数据绑定

2-1、单向绑定 v-bind

数据只能从data流向页面

2-2、双向绑定 v-model

数据不仅能从data流向页面，还可以从页面流向data

备注：

v-model:value 可以简写为v-model，因为v-model默认收集的就是value值
双向绑定一般都应用在表单类元素(输入类元素)上(如：input、select等)

2-3、简写

<input type="text" v-bind:value="name">//单向绑定
<input type="text" v-model:value="name">//双向绑定
<input type="text" :value="name">//v-bind简写
<input type="text" v-model="name">//v-model简写

3、el与data的两种写法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>el与data两种写法</title>
    <script type="text/javascript" src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>hello,{{name}}</h1>
    </div>
  </body>
  <script type="text/javascript">
    // el的两种写法
    var vm new Vue({
      el:"#app",//挂载点的第一种写法
      // vm.$mount('#app'),//挂载点的第二种写法
      //data的第一种写法:对象式
      data:{
        name:'timi'
      },
      
      // data的第二种写法:函数式
          /* data:function(){
            console.log(this)//此处的this是Vue的实例对象,如果是箭头函数的话这个this就是全局window
            return{
              name:'timi2'
            }
          } */
    })
  </script>
</html>

3-1、el有两种写法：

(1)、new Vue时候配置el属性

(2)、先创建Vue实例，随后再通过vm.$mount('#app')指定el的值

3-2、data有两种写法：

(1)、对象式

(2)、函数式

如何选择：目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错

3-3、一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

4、理解MVVM模型

M：模型，对应data中的数据

Plain JavaScript Objective：一般js对象

V：视图，模板

DOM：页面文件

VM：视图模型，Vue实例对象

DOM Listeners：DOM监听
Data Bindings：数据绑定

4-1、发现

data中所有属性，最后都出现在了vm身上(即vm里面有什么插值语法就能写什么)
vm身上所有属性及Vue原型(-proto-)上所有属性，在Vue模板中都可以直接使用

5、数据代理

5-1、回顾Objective.defineProperty方法

Objective.defineProperty：给对象添加属性，给对象定义属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>回顾Objective.defineProperty方法</title>
  </head>
  <body>
    <!-- 
     总结:通过改变number变量改变对象属性值靠getter,直接改变对象属性靠setter-->
    <script type="text/javascript">
      let number =18
      let person = {
        name:'张三',
        sex:'男',
      }
      //其中age是不能枚举的 
      Object.defineProperty(person,'age',{
        // value:18,
        // enumerable:true,//控制属性是否可用枚举，默认值false
        // writable:true,//控制属性是否能被修改，默认值为false
        // configurable:true,//属性能否被删除，默认为false
        //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
        get(){
          console.log('有人读取了age属性了')
          return number
        }
        //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
        set(value){
          console.log('有人修改了age属性,且值是',value)
          number=value
        }
      })
      //方法一:验证是否能枚举
      // console.log(Object.keys(person))
      //方法二:通过for循坏验证是否能枚举
      /* for(let key in person){
        console.log('for循坏对象:',key,person[key])
      }
      console.log(person) */
    </script>
  </body>
</html>

5-2、何为数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作读/写

下面演示一个对象obj2代理obj的操作

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>何为数据代理</title>
  </head>
  <body>
    <script type="text/javascript">
      let obj ={x:100}
      let obj2={y:200}
      
      Object.defineProperty(obj2,'x'{
        get(){
          return obj.x
        },
        set(value){
          obj.x=value
        }
      })
    </script>
  </body>
</html>

5-3、Vue中的数据代理

vm._data=options.data=data//第三个data是外面的data

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue中的数据代理</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>学校名称:{{name}}</h2>
      <h2>学校地址:{{address}}</h2>
    </div>
  </body>
  <script type="text/javascript">
    let data={
      name:'111',
      address:'222',
    }
    const vm =new Vue({
      el:'#app',
      data//这里是调用前面的data
    })
  </script>
</html>

一旦data中的数据发生改变，那么页面找那个用到该数据的地方也会自动更新。

总结

1、Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）

2、Vue中数据代理的好处：更加方便的操作data中的数据

3、基本原理：①通过Objective.defineProperty()把data对象中所有属性添加到vm上。②为每一个添加到vm上的属性，都指定一个getter和setter。③在getter和setter内部去操作（读/写）data中对应的属性。

6、this关键字

6-1、this.属性名称

指的是访问类中的成员变量，用来区分成员变量和局部变量（重名问题）

6-2、this.方法名称

用来访问本类的成员方法

6-3、this()

访问本类的构造方法

()中可以有参数的如果有参数就是调用指定的有参构造

7、事件处理

7-1、事件的基本操作

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>事件的基本使用</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>欢迎{{name}}</h2>
      <button type="button" @click="showInfo1">点我提示信息1(不传参)</button>
      <button type="button" @click="showInfo2(66,$event)">点我提示信息2(传参)</button>
    </div>
  </body>
  <script type="text/javascript">
    const vm =new Vue({
      el:'#app',
      data:{
        name:'111',
      },
      methods:{
        showInfo1(){
          alert(1111)
          // console.log(event.target.innerText)
          // console.log(this)//此处的this是vm，如果是箭头函数的话，此处的this是window
        },
        showInfo2(number,a){
          // alert(2222)
          // console.log(event.target.innerText)
          console.log(number,a)
        },
      }
    })
  </script>
</html>

事件的基本使用总结：

1、使用v-on:xxx或@xxx绑定事件，其中xx是事件名；

2、事件的回调需要配置在methods对象中，最终会在vm上；

3、methods中配置的函数，不要用箭头函数！否则this就不是vm了；

4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象；

5、@click="demo"和@click="demo($event)"效果一致，但后者可以传参；

7-1.1、事件绑定

如果事件绑定里面的事件不写小括号表示传的参数为$event，如果小括号里面有值则表示该值的调用事件

@click="demo"和@click="demo(event)一样
@click="demo(n)  调用n值产生的事件

7-2、事件修饰符

Vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3、once:事件只触发一次(常用);
4、capture:使用事件的捕获模式;
5、self:只有event.target是当前操作的元素时才触发事件;
6、passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

事件修饰符小技巧：修饰符能连续写的

<a href="https://www.baidu.com"  @click.prevent.stop="showInfo">点我提示信息</a>  //两个修饰符连着写，先调用前面的修饰符，然后再调用后面的

案例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>事件修饰符</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <style type="text/css">
    *{
      margin-top: 20px;
    }
    .demo1{
      height: 50px;
      background-color: skyblue;
    }
    .box1{
      padding: 5px;
      background-color: skyblue;
    }
    .box2{
      padding: 5px;
      background-color: orange;
    }
    .list{
      width: 200px;
      height: 200px;
      background-color: orange;
      overflow: auto;
      /* overflow 是自动滚动条 */
      
    }
    li{
      height: 100px;
      
    }
  </style>
  <body>
    <div id="app">
      <h2>欢迎{{name}}</h2>
      
      <!-- 阻止默认事件(常用) -->
      <a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
      
      <!-- 阻止事件冒泡(常用) -->
      <div class="demo1" @click="showInfo">
        <button type="button" @click.stop="showInfo">点我提示信息</button> 
      </div>
      
      <!-- 事件只触发一次(常用) -->
      <button type="button"@click.once="showInfo">点我提示信息</button>
      
      <!-- 使用事件的捕获模式 -->
      <!-- 事件的捕获阶段为由外向内,冒泡阶段为由内向外 -->
      <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">
          div2
        </div>
      </div>
      <!-- 只有event.target是当前操作的元素时才触发事件 -->
      <div class="demo1" @click.self="showInfo">
        <button type="button" @click="showInfo">点我提示信息</button> 
      </div>
      
      <!-- 事件的默认行为立即执行,无需等待事件回调执行完毕 -->
      <ul class="list" @scroll.passive="demo">
      <!-- <ul class="list" @whell="demo"> --><!-- 这个是鼠标滚动轮的滚动 -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    const vm =new Vue({
      el:'#app',
      data:{
        name:'111',
      },
      methods:{
        showInfo(event){
          // console.log(event.target)//这里是self修饰符的使用案例
          // event.stopPropagation()//阻止stop修饰符的使用案例
          // event.preventDefault()//阻止Vue在启动时生成生产提示。
          alert('欢迎进入百度搜索')
        },
        showMsg(msg){
          console.log(msg)
        },
        demo(){
          for (let i = 0; i < 10000; i++) {
            console.log('#')
          }
          console.log('累坏了')
        }
      }
    })
  </script>
</html>

7-3、键盘事件

键盘事件按键：
     @keydown是你按下按键不用你手抬起来就触发事件
     @keyup是你按下按键松手了才触发的事件
     @keyup.enter 点号后面的叫别名
1、Vue中常用的按键别名:
    回车 =>enter
    删除 =>delete (捕获“删除”和“退格”按键)
    退出 =>esc
    空格 =>space
    换行 =>tab tab会移动焦点(必须配合keydown使用)
     上  =>up
     下  =>down
     左  =>left
     右  =>right
2、Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要装维kebab-case(短横线命名)
    
3、系统修饰键(用法特殊):ctrl、alt、shift、meta(windows电脑的win键)
    (1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才会被触发。
    (2).配合keydown使用:正常触发事件。
        
4、也可以使用keyCode去指定具体的按键(不推荐,已被web标准库删除)
    
5、Vue.config.keyCodes.自定义键名 =键码, 可以去定制按键别名

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>键盘事件</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>欢迎{{name}}</h2>
      <input type="text" placeholder="按下回车提示输入" @keyup="showInfo"/>
    </div>
  </body>
  <script type="text/javascript">
    const vm =new Vue({
      el:'#app',
      data:{
        name:'111',
      },
      methods:{
        showInfo(e){
          // if(e.keyCode !=13)return //keyCode获取键盘事件的代表符号 13然后判断是否按了回车按钮
          // console.log(e.target.value)
          console.log(e.key,e.keyCode)
        }
      }
    })
  </script>
</html>

键盘事件小技巧：

系统修饰也能连续写

<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"/>//此时按下ctrl+y才能提示输入

8、计算属性

8-1、插值语法实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>姓名案例_插值语法实现</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <!-- slice(0,3)这个函数用来截取长度 -->
    <div id="app">
      姓:<input type="text" v-model="firstName"/><br>
      名:<input type="text" v-model="lastName"/><br>
      <!-- 全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span> -->
    </div>
  </body>
  <script type="text/javascript">
    const vm =new Vue({
      el:'#app',
      data:{
        firstName:'张',
        lastName:'三',
      },
    })
  </script>
</html>

8-2、methods实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>姓名案例_methods实现</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      姓:<input type="text" v-model="firstName"/><br>
      名:<input type="text" v-model="lastName"/><br>
      全名:<span>{{fullName()}}</span>
    </div>
  </body>
  <script type="text/javascript">
    const vm =new Vue({
      el:'#app',
      data:{
        firstName:'张',
        lastName:'三',
      },
      methods:{
        fullName(){
        return this.firstName+'-'+this.lastName
        }
      },
    })
  </script>
</html>

8-3、computed计算属性

计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
(1).计算属性最终会出现在vm上，直接读取使用即可。
(2).如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>姓名案例_计算属性基本实现</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      姓:<input type="text" v-model="firstName"/><br>
      名:<input type="text" v-model="lastName"/><br>
      全名:<span>{{fullName}}</span>
    </div>
  </body>
  <script type="text/javascript">
    const vm =new Vue({
      el:'#app',
      data:{
        firstName:'张',
        lastName:'三',
      },
      computed:{
        fullName:{
          //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
          //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
          get(){
            console.log('get被调用了')
            // console.log(this) //此处的this是vm
            return this.firstName + '-' + this.lastName
          },
          //set什么时候调用? 当fullName被修改时。
          set(value){
            console.log('set',value)
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
          }
        }
      }
    })
  </script>
</html>

8-4、计算属性简写

把computed里面的东西进行简写，确定只读取不修改(只有get没有set)

//完整写法
/* fullName:{
  get(){
    console.log('get被调用了')
    return this.firstName + '-' + this.lastName
  },
  set(value){
    console.log('set',value)
    const arr = value.split('-')
    this.firstName = arr[0]
    this.lastName = arr[1]
  }
} */
//简写   确定只读取不修改(只有get没有set)
fullName(){
  console.log('get被调用了')
  return this.firstName + '-' + this.lastName
}

9、监视属性

9-1、watch监视属性

监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天气案例_监视属性</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>今天天气很{{info}}</h2>
      <button @click="changeWeather">切换天气</button>
    </div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
      el:'#app',
      data:{
        isHot:true,
      },
      computed:{
        info(){
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      methods: {
        changeWeather(){
          this.isHot = !this.isHot
        }
      },
      /* watch:{
        isHot:{
          immediate:true, //初始化时让handler调用一下,默认为false
          //handler什么时候调用？当isHot发生改变时。
          handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
          }
        }
      } */
    })
    vm.$watch('isHot',{
      immediate:true, //初始化时让handler调用一下
      //handler什么时候调用？当isHot发生改变时。
      handler(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue)
      }
    })
  </script>
</html>

9-2、深度监视属性

一、深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
二、备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天气案例_深度监视</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>今天天气很{{info}}</h2>
      <button @click="changeWeather">切换天气</button>
      <hr/>
      <h3>a的值是:{{numbers.a}}</h3>
      <button @click="numbers.a++">点我让a+1</button>
      <h3>b的值是:{{numbers.b}}</h3>
      <button @click="numbers.b++">点我让b+1</button>
      <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
      {{numbers.c.d.e}}
    </div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
      el:'#app',
      data:{
        isHot:true,
        numbers:{
          a:1,
          b:1,
          c:{
            d:{
              e:100
            }
          }
        }
      },
      computed:{
        info(){
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      methods: {
        changeWeather(){
          this.isHot = !this.isHot
        }
      },
      watch:{
        isHot:{
          handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
          }
        },
        //监视多级结构中某个属性的变化
        /* 'numbers.a':{
          handler(){
            console.log('a被改变了')
          }
        } */
        //监视多级结构中所有属性的变化
        numbers:{
          deep:true,
          handler(){
            console.log('numbers改变了')
          }
        }
      }
    })
  </script>
</html>

9-3、监视属性简写

当配置项里面不需要immediate和deep时可以简写

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天气案例_监视属性_简写</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>今天天气很{{info}}</h2>
      <button @click="changeWeather">切换天气</button>
    </div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
      el:'#app',
      data:{
        isHot:true,
      },
      computed:{
        info(){
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      methods: {
        changeWeather(){
          this.isHot = !this.isHot
        }
      },
      watch:{
        //完整写法
        /* isHot:{
          // immediate:true, //初始化时让handler调用一下
          // deep:true,//深度监视
          handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
          }
        }, */
        //简写
        isHot(newValue,oldValue){
          console.log('isHot被修改了',newValue,oldValue,this)
        }
      }
    })
    //完整写法
    /* vm.$watch('isHot',{
      deep:true,//深度监视
      handler(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue)
      }
    }) */
    //简写，这里的this指的是window
    /* vm.$watch('isHot',(newValue,oldValue)=>{
      console.log('isHot被修改了',newValue,oldValue,this)
    }) */
  </script>
</html>

9-4、computed与watch比较

一、computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

二、两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>姓名案例_watch实现</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      姓：<input type="text" v-model="firstName"> <br/><br/>
      名：<input type="text" v-model="lastName"> <br/><br/>
      全名：<span>{{fullName}}</span> <br/><br/>
    </div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
      el:'#app',
      data:{
        firstName:'张',
        lastName:'三',
        fullName:'张-三'
      },
      watch:{
        /* firstName(val){
            this.fullName = val + '-' + this.lastName
          }
        }, */
        firstName(val){
          setTimeout(()=>{
            console.log(this)
            this.fullName = val + '-' + this.lastName
          },1000);
        },
        lastName(val){
          this.fullName = this.firstName + '-' + val
        }
      }
    })
  </script>
</html>

10、绑定样式

10-1、style与class样式

1. class样式
      写法:class="xxx" xxx可以是字符串、对象、数组。
          字符串写法适用于：类名不确定，要动态获取。
          对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
          数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
 2. style样式
      :style="{fontSize: xxx}"其中xxx是动态值。
      :style="[a,b]"其中a、b是样式对象(key)，且样式对象必须是存在的。

案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>绑定样式</title>
    <style>
      .basic{
        width: 400px;
        height: 100px;
        border: 1px solid black;
      }
      
      .happy{
        border: 4px solid red;;
        background-color: rgba(255, 255, 0, 0.644);
        background: linear-gradient(30deg,yellow,pink,orange,yellow);
      }
      .sad{
        border: 4px dashed rgb(2, 197, 2);
        background-color: gray;
      }
      .normal{
        background-color: skyblue;
      }
      .a1{
        background-color: yellowgreen;
      }
      .a2{
        font-size: 30px;
        text-shadow:2px 2px 10px red;
      }
      .a3{
        border-radius: 20px;
      }
    </style>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
      <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
      <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
      <div class="basic" :class="classArr">{{name}}</div> <br/><br/>
      <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
      <div class="basic" :class="classObj">{{name}}</div> <br/><br/>
      <!-- 绑定style样式--对象写法 -->
      <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
      <!-- 绑定style样式--数组写法 -->
      <div class="basic" :style="styleArr">{{name}}</div>
    </div>
  </body>
  <script type="text/javascript"> 
    const vm = new Vue({
      el:'#app',
      data:{
        name:'111',
        mood:'normal',
        classArr:['a1','a2','a3'],
        classObj:{
          a1:false,
          a2:false,
        },
        styleObj:{
          fontSize: '40px',
          color:'red',
        },
        styleObj2:{
          backgroundColor:'orange'
        },
        styleArr:[
          {
            fontSize: '40px',
            color:'blue',
          },
          {
            backgroundColor:'gray'
          }
        ]
      },
      methods: {
        changeMood(){
          const arr = ['happy','sad','normal']
          const index = Math.floor(Math.random()*3)
          this.mood = arr[index]
        }
      },
    })
  </script>
  
</html>

11、条件渲染

11-1、隐藏div的方法：

1、div的visibility控制div的隐藏和显示

style="visibility: none;"

2、设置display属性可以是div隐藏后释放占用的页面空间

style="display: none;"

3、opacity设置元素透明度为0

style="opacity:0;"

11-2、v-if 和v-show

条件渲染：
1.v-if
写法：
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。v-if是通过控制dom节点的存在与否来控制元素的显隐。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是通过设置DOM元素的display样式设置显隐。（display中block为显示，none为隐藏）
3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>条件渲染</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>当前的n值是:{{n}}</h2>
      <button @click="n++">点我n+1</button>
      <!-- 使用v-show做条件渲染 -->
      <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
      <!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->
      <!-- 使用v-if做条件渲染 -->
      <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
      <!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->
      <!-- v-else和v-else-if -->
      <!-- <div v-if="n === 1">Angular</div>
      <div v-else-if="n === 2">React</div>
      <div v-else-if="n === 3">Vue</div>
      <div v-else>哈哈</div> -->
      <!-- template只能与v-if配合使用，不能和v-show配合 ,template不影响结构，把template改为div影响结构-->
      <template v-if="n === 1">
        <h2>你好</h2>
        <h2>111</h2>
        <h2>北京</h2>
      </template>
    </div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
      el:'#app',
      data:{
        name:'111',
        n:0
      }
    })
  </script>
</html>

vue2.0+vue3.0资料（尚硅谷）（二）https://developer.aliyun.com/article/1470417

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

vue2.0+vue3.0资料（尚硅谷）（一）