vue-编程基础-插值语句、指令-02

1、绑定语法: 学名:插值语法Interpolation

插值语法就是在HTML中插入js中定义的变量的值，与之前的dom操作元素内容作用相同，却别是更加方便简化

定义：在界面中标记哪里可能发生变化的特殊的语法

使用方式：<元素>{{变量名}}</元素>

特征：双花括号

原理：开局, new Vue()扫描到这里时，就会将这个元素保存到虚拟DOM树中，当【{{值}}】中的变量在new Vue()中被修改时，虚拟DOM树就会找到这个元素，自动更新这个元素的内容与new Vue()同名变量保持一致！

混搭：在实际编程中{{变量名}}可以和其他字符串内容混搭。不必须是单纯的元素

规则：{{}}之中:和模板字符串的${}规则一样

         (1). 可以写:变量,运算,三目,调用函数,创建对象,访问数组元素——一切合法的有返回值的js表达式

         (2). 不能写:程序结构(分支和循环), 以及没有返回值的js表达式。

<div id="app">
  <div>姓名：{{uname}}</div>
  <div>{{sex}}</div>
  <div>性别：{{sex?'男':'女'}}</div>
  <div>价格：￥{{price}}</div>
  <div>统计：{{count*price}}</div>
  <div>星期:{{new Date().getDay()}}</div>
  <div>订单时间：{{new Date(orderTime).toLocaleString()}}</div>
  <div>日期：{{day}}</div>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      uname:"dingding",
      sex:1,
      price:12.5,
      count:5,
      orderTime:1614158191101,
      day:new Date().getDate()
    }
  })
</script>

2、指令

什么是指令：专门在HTML中也能实现分支、循环等程序功能的特殊的自定义属性

个人见解：HTML是超文本标记语言，严格来说它并不是一种编程语言，缺少编程语言的变量，逻辑，循环，分支等基本功能，更不用说函数，对象等上层功能；但是vue通过指令的方式实现了HTML的逻辑，分支等方式，让HTML也能实现基本的功能，大大简化了项目开发中的工作流程，提高了工作效率；也就是说，vue指令在一定程度上不全的HTML语言。

指令的数量：目前学习使用的是vue2.X版本的，质量有13种

3、指令：v-bind

作用：绑定元素属性值，让vue能够修改元素的属性，元素的属性值也随程序自动变化；

注意：插值方式不适合元素属性的修改，{{}}只支持元素内容变化，不支持属性值变化；

使用方法：

标准写法：

<元素v-bind:属性名="变量或js表达式">

简写方式：

<元素 :属性名="变量或js表达式">

简写方式简化了v-bind质量，直接使用冒号【：】替代了指令；需要注意的是使用v-bind或者其简写方式绑定的属性，其属性值可以是 js 代码，但是该代码必须有返回值，且复合被绑定属性的要求

绑定属性的时候，属性值不能使用【{{}}】，因为使用插值方式就会报错，这个错误是语法导致，不管是不是绑定了

<div id="app">
  <!--哪里可能随程序自动改变？-->
  <img v-bind:src="pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'">
</div>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      //程序中只保存pm2.5的数值，不保存图片路径
      pm25: 60
    }
  })
  //运行后，F12打开控制台，console，输入vm.pm25=数值，观察页面上图片的变化.
</script>

4、指令：v-show

作用：该指令是用来表示被绑定的元素是影藏还是显示的

原理：该指令的原理是当绑定的值是false的时候，vue顶层会自动将被绑定的元素加上属性【display:none】方式来隐藏元素

使用方式：

<元素 v-show="bool类型变量或js表达式">

同理被绑定的元素的绑定属性v-show的值必须是bool值，但是可以是变量，也可以是JavaScript代码，只要返回值是bool型即可

<div id="app">
<button @click='open'>click me</button>
<div v-show='show' id="pop">
  <a @click='close' href="javascript:;">×</a>
</div>
</div>
<script>
//2. 创建new Vue()对象，监控id为app的区域
new Vue({
  el: "#app",
  //3. 创建模型对象: 
  //3.1 创建data对象
  //本例中: ?
  data: {
    show: false
  },
  //3.2 创建methods对象
  //本例中: ?
  methods: {
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    }
  }
})
</script>

5、指令：v-if\v-else\v-else-if

作用：分支，对应了编程语言的基本功能分支，v-if表示如果满足条件，v-else表示不满足条件，v-else-if表示分支的第二个条件

使用方式：

<元素1 v-if="判断条件">
<元素2 v-else-if='判断条件2'>
<元素3 v-else>

注意：

在使用v-if v-else 的时候必须要连着写，不能在中间插入任何其他元素，详情对照编程语言的分支语句

使用v-else 的时候是不能加条件的，但是v-else-if可以加条件做二次判断

原理：

每当new Vue()扫描到v-if时，会先执行=右边的判断条件，如果判断为true，就会删除v-else的元素；如果判断为false，就会删除v-发的数据；如果接连使用的是v-else-if的话，当v-if判断为false，v-if绑定的元素就会被删除，进而判断v-else-if的条件，后续与之前一致

<div id="app">
  <!--第一个div是已登录时显示的内容-->
  <div v-if="isLogin==true"><h3>Welcome, dingding | <a href="javascript:;" @click="logout">注销</a></h3></div>
  <!--第二个div是未登录时显示的内容-->
  <div v-else><a href="javascript:;" @click="login">登录</a> | <a href="javascript:;">注册</a></div>  
</div>
<script>
  //2. 创建new Vue()对象
  new Vue({
    el:"#app",
    //3. 创建模型对象: 
    //3.1 创建data对象，保存界面中需要的所有变量
    data:{
      isLogin:false //开局，默认用户是未登录
    },
    //3.2 创建methods对象，保存界面中需要的所有函数
    methods:{
      login(){
        //让用户变成已登录状态
        this.isLogin=true;
      },
      logout(){
        this.isLogin=false;
      }
    }
  })
</script>

注意：v-if删除了元素是怎么恢复的？

这个就是上次学习的虚拟DOM的区别，删除的是可见DOM的，也就是实际的DOM树的元素结构，虚拟的DOM树结构中是保存完好的，恢复的时候是从虚拟DOM中恢复的。

<!--v-else-if的实例-->
<div id="app">
  <h3>今日空气质量:
    <img v-if="pm25<100" src="img/1.png">
    <img v-else-if="pm25<200" src="img/2.png">
    <img v-else-if="pm25<300" src="img/3.png">
    <img v-else src="img/4.png">
  </h3>
</div>
<script>
  //2. 创建new Vue()对象
  new Vue({
    el:"#app",
    //3. 创建模型对象
    data:{
      pm25:367
    }
  })
</script>

6、指令：v-for

作用：对应编程语言中的循环结构，可以反复生成相同结果的DOM元素，内容可以不同

使用方式：

注意的是，v-for使用在那个元素上，被循环生成就是那个元素

<要反复生成的元素v-for="(当前元素值,当前位置) of 数组":key="i">

原理：

当new Vue()扫描到v-for时，先遍历of后的数组中每个元素， 每遍历一个数组元素，就会自动创建当前元素的一个副本，每次遍历时，都会取出当前数组元素值和当前下标位置，保存到of前的两个变量中，分别是 【 值，当前位置】

<div id="app">
  <ul>
    <li v-for="(n,i) of names" :key="i">{{i+1}} - {{n}}</li>
  </ul>
</div>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
      names:["亮亮","然然","东东","嘻嘻"]
    }
  })
</script>

上述代码中有个：key是什么意思？其实这与v-for循环的一个确定有关

缺点：

1、我们可以使用for循环将数组内容遍历成页面结构相同的元素，但是vue2不允许我们使用index下标的方式修改数组内容；修改是可以成功的，但是页面不会渲染出来

结局方式：vue2中没有对数字下标进行监控所有，修改了页面也不会渲染；但是数组的函数修改是可以进行的，函数修改的系统会渲染

vm.arr.splice(1,1,'新元素')

2、使用v-for循环的时候，如果修改了for中的元素，系统是无法是被修改了那个元素的，所以vue的操作方式是将for出来的所有节点元素全部删除，重新在for循环一遍！如果足够大的话，就是一个BUG

解决：只要使用v-for，都必须同时绑定:key="i"属性，也就是给for的元素绑定一个值是唯一值的属性；

从此，v-for生成的每个元素副本身上，都多了一个唯一的标识key。值是不重复的。

修改数组中任何一个元素值时，都只需要通过下标，找到这个元素值对应位置的DOM元素副本，只修改一个元素即可。不用重建整个列表。

<li v-for="(n,i) of names" :key="i">{{i+1}} - {{n}}</li>

扩展：使用v-if与v-show隐藏元素的区别

v-show 用display:none隐藏元素

v-if v-else 用删除元素方式隐藏元素

常见错误:

Error compiling template:HTML界面中语法错误

         跳过前边大块HTML代码

         直接找到"-" 位置，才是真正出错的位置