vue的基础安装和插值语法和v-bind；v-on；v-if和v-show的区别

• vue渐进式概念
• vue的mvvm的框架模型
• vue脚手架的安装
• vue中的插值表达式 {{}}
• v-bind指令：v-bind指令
• v-on指令
• vue中获取事件对象
• 事件传参
• 按键修饰符：v-on：keyup或者@：keyup
• v-if和v-show
• v-else和v-else-if
• 总结v-if和v-show的区别

vue渐进式概念

渐进式：逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue全家桶来管理vue项目

vue的mvvm的框架模型

M：model数据模型（ajax获取到的数据）

V：view视图（页面）

VM：ViewModel视图模型

mvvm通过数据双向绑定让数据自动地双向同步，不再需要操作DOM，所以在vue中，不推荐直接手动操作DOM

vue脚手架的安装

全局安装命令：npm install -g @vue/cli

初始化一个vue项目：vue create 项目名称（不可以使用中文）

启动项目：npm run serve

修改端口号的方法：在vue.config.js文件中，使用devServer ： { port : 端口号}

vue中的插值表达式 {{}}

vue中可以通过data提供数据，注意：data必须是一个函数，并且返回一个对象

然后通过插值表达式显示数据，插值语法的作用：使data中的数据渲染视图；基本语法，支持三元运算符；

注意点：使用的数据需要在data中存在；可以使用表达式，但是不能使用if for；不能在标签中使用

<template>
{{ msg }}
{{ obj.name }}
{{ msg.toUpperCase() }} //实现字母小写转大写
{{ obj.age > 18 ? '成年' : '未成年' }}
</template>
<script>
export default {
  data () {
    return {
      money: 100,
      msg: 'hello',
      obj : {
         name : `王路飞`，
         age : 16,
        }
    }
  }    
}
</script> 

v-bind指令：v-bind指令

描述：插值表达式不能在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令

作用：动态的设置html属性

语法：v-bind：title=‘msg’或者：title=‘msg’

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on指令

语法：v-on：或者简写为@

1.v-on：事件名=‘要执行的少量代码’；

2.v-on：事件名=‘methods中的函数名’；

3.v-on：事件名=‘methods中的函数名（实参）；

<template>
<div>
<!--  <button v-on:事件名称="事件函数">点击事件</button>-->
  <button v-on:click="fn">点击事件</button>
  <br>
  <button @click="an">点击事件</button>
  <br>
  <button @click="aa(2000)">点击事件传参</button>
  <br>
  <button @click="aa(1000)">点击事件传参</button>
  <br>
  <button @click="aa(5000)">点击事件传参</button>
  <br>
  <div @click="divClick" style="width: 200px;height: 200px;border: 1px solid #42b983">
    <button @click="cc(200,$event)">内层点击事件</button>
  </div>
</div>
</template>
<script>
export default {
  name: "on-component",
  // 定义事件方法到methods对象里面去
  methods : {
    fn(){
      console.log(`事件触发了`)
    },
    an(){
      alert(`点击事件`)
    },
    aa(bb){
      console.log(`参数数值为${bb}`)
      alert(`参数数值为${bb}`)
    },
    divClick(){
      console.log(`我是div盒子点击事件`)
    },
    cc(number,e){
      // 内层盒子点击的时候取消冒泡，拿到事件对象
      // 绑定事件的时候，如果没有传递任何参数，默认传入的第一个参数就是事件对象
      // 如果事件绑定的时候，传递了参数，通过$event手动传递参数
      e.stopPropagation()
      console.log(`我是按钮的点击事件${number}`)
    }
  }
}
</script>

<style scoped>

</style>

vue中获取事件对象

作用：阻止冒泡事件，或者阻止a标签默认转跳行为

vue中提供了事件修饰符.prevent 阻止默认行为;.stop 阻止冒泡

<div id="app">
  <a @click.prevent="fn" href="http://www.baidu.com">去百度</a>
</div>

事件传参

事件传参的作用：当我们需要给定义的事件传递参数的时候，可以获取到点击的事件对象和点击事件的详细信息我们可以使用事件传参

事件传参的方法：v-on：click='点击事件（传递的参数，$event）'，或者@click=‘点击事件（传递的参数，$event）’

注意点：$event作用当我们，传递多个参数的时候，我们同时想要获取到点击事件的事件对象就是用改事件对象，然后我们在methods中接受一下即可

<template>
  <div>
    <button @click="aa(`参数1`,`参数1`,$event)">点击</button>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  methods : {
    aa (one,two,e) {
      console.log(one)  //获取到参数one
      console.log(two)  //获取到参数two
      console.log(e)    //获取到事件对象
    }
  }
}
</script>

按键修饰符：v-on：keyup或者@：keyup

当用户输入内容的时候，我们会监听键盘事件，我们经常需要判断详细的键，此时，就要使用到按键修饰符。

获取按键的原始名称和数值

<template>
  <div>
    <input type="text" @keyup="aa($event)">
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  methods : {
    aa (e) {
      console.log(e.key) //获取按键的原始名称
      console.log(e.keyCode)  //获取按键的数值
      console.log(e.target.value)  //获取输入的文字
    }
  }
}
</script>

同时我们也可以给按键添加数值，判断我们详细的按键

<template>
  <div>
<!--    这里只用当我们按下回车键的时候才会触发aa事件-->
    <input type="text" @keyup.enter="aa($event)">
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  methods : {
    aa (e) {
      console.log(e.key) //获取按键的原始名称
      console.log(e.keyCode)  //获取按键的数值
      console.log(e.target.value)  //获取输入的文字
    }
  }
}
</script>

v-if和v-show

基本作用：控制盒子的隐藏和显示

1.v-show：语法 : v-show='布尔值'（true显示，false隐藏）

原理：实质上式控制元素的css样式，display：none

2.v-if：语法：v-if=‘布尔值’（true显示，false隐藏）

原理：实质上是在动态的创建或者删除元素节点

应用场景：

如果是频繁切换显示隐藏，用v-show；v-if，频繁切换会大量的创建和删除元素，消耗性能

如果是不用频繁切换，要么显示，要么隐藏的情况，使用用v-if，v-if是惰性的，如果初始值为false，那么这些元素就直接不会创建，节省初始渲染开销

<template>
<div>
  <h1 v-if="aa">显示或者隐藏</h1>
  <h1 v-show="bb">显示或者隐藏</h1>
</div>
</template>
<script>
export default {
  data () {
    return {
      aa : true, //如果为ture就会显示
      bb : false //如果为false就会隐藏
    }
  }
}
</script>

v-else和v-else-if

这里就相当于js中的if和else-if语句一样，当if判断为false的时候就会走else-if，相反就反着走

<template>
<div>
  <h1 v-if="aa">显示或者隐藏1</h1>
  <h1 v-else>显示或者隐藏2</h1>
</div>
</template>
<script>
export default {
  data () {
    return {
      aa : false, //当这里为false的时候就会走v-else，但是当这里为true的时候就会走v-if，同时不会走v-else
    }
  }
}
</script>

总结v-if和v-show的区别

<template>
<div>
  <button @click="dian">v-show切换盒子的显示或者隐藏</button>
  <div class="box" v-show="show">我是使用v-show切换的盒子</div>
  <button @click="dian1">v-if切换盒子的显示或者隐藏</button>
  <div class="box" v-if="iff">我是使用v-if切换的盒子</div>
</div>
</template>
<script>
export default {
  name: "7.v-if和v-show",
  data () {
    return {
      show : true,
      iff : true,
    }
  },
  methods : {
    dian() {
      this.show = !this.show
    },
    dian1() {
      this.iff = !this.iff
    }
  }
}
</script>
v-if和v-show都是用来切换盒子的显示或者隐藏的 
v-if的值如果是true，盒子是显示的 
v-if的值如果是false，盒子是隐藏的 === dom树里边没有这个dom节点 
v-show的值如果是true，盒子是显示的 
v-show的值如果是false，盒子是隐藏的 === dom树里边是有这个dom节点 
用法是一样的，但是实现原理还是又区别的 
v-show切换盒子的显示和隐藏的时候，是添加css属性，display：none实现的 
v-if切换盒子的显示和隐藏的时候，直接删除当前的dom节点 
初始渲染的时候，v-if和v-show的区别 
v-if如果标识为false，不会创建dom节点 
v-show如果标识为false，会创建节点，但是会通过css属性隐藏盒子 
初始的渲染，v-if和v-show谁的消耗比较大 
v-show的性能消耗比较大 
频繁切换的时候，谁的性能消耗比较大 
v-if的消耗大，因为他会一直创建删除dom节点 
v-show因为只需要通过css控制显示和隐藏就可以了 
<style>
button {
  width: 180px;
  background-color: #00a4ff;
}
.box {
  width: 200px;
  height: 200px;
  border: 1px solid #00a4ff;
  background-color: #42b983;
}
</style>