今天开始学习vue前端，并在这个博客持续更新笔记

==================2021-09-27================

1.label for属性和v-bind修改class

达到效果：点击文字的时候可以选择他对应的for的checkbox框、当use1值改变的时候，由于v-bind则会修改class

      <label for="r1">11111</label
      ><input type="checkbox" v-model="use1" id="r1" />
      <label for="r2">22222</label
      ><input type="checkbox" v-model="use2" id="r2" /> <br /><br />
      <div v-bind:class="{ class1: use1 }">31231231</div>


.class1 {
  background: #444;
  color: #eee;

2.v-if和v-show

区别：

v-if只有当指令的表达式返回值为true的时候才会被渲染，为false的时候，元素是不存在于文档中的；而v-show则不论指令表达式的返回值是什么，都会被渲染，并且只是基于css的款式切换，元素始终存在于文档中。

什么时候用v-if？什么时候用v-show？

1.v-if在条件切换时，会对标签进行适当的创立和销毁，而v-show则仅在初始化时加载一次，因而v-if的开销相对来说会比v-show大。
2.v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简略的CSS切换

v-if适合运行条件很少改变的情况; v-show适合频繁切换的情况。
对于管理系统权限列表的展示，这里可以使用v-if来渲染，如果使用v-show，对于用户没有的权限，在网页的源码中，仍然能够显示。
特殊情况:在el-table中控制某列的显示与隐藏只能使用v-if。

3.关于v-on:click和@click 等的缩写

4.过滤器的使用  将message通过过滤器的规则进行过滤出相应的东西

{{ message | guolvqi }}

message:1,

filters: {

    guolvqi: function (value) {

      if (value == "1") return "一";

      else if (value == "2") return "二";

      else return "其余";

    },

  },

2021-10-11

computed和method的区别 如下  转自菜鸟教程 下方大佬评论///有待验证

把代码改了改，应该可以体现 computed 属性“依赖缓存”的概念以及与 method 的差别。如下面代码，cnt 是独立于 vm 对象的变量。在使用 reversedMessage 这个计算属性的时候，第一次会执行代码，得到一个值，以后再使用 reversedMessage 这个计算属性，因为 vm 对象没有发生改变，于是界面渲染就直接用这个值，不再重复执行代码。而 reversedMessage2 没有这个缓存，只要用一次，函数代码就执行一次，于是每次返回值都不一样。

监听器watch的用法

若值或者对象改变，watch都可以进行监听

 如上，对a进行普通的监听  对b进行深度监听

---

利用v-bind进行多class的切换

<div v-bind:class="{ turnred: red, turngreen: green }"></div>

当red为true时，此div的class为turnred样式

同理 当green为true时，此div的class为turngreen样式

-----当red和green都为true的时候，样式为turngreen样式

经实验证明  在v-bind中的red和green的样式顺序并不能影响当两个值都为true的情况。

但是在<style>中，符合要求的样式靠后的会显示在屏幕上 

 例如此样式绿色在后面，都成立的时候，渲染的是绿色

.turnred {
  width: 100px;
  height: 100px;
  background: rgb(165, 32, 32);
}
.turngreen {
  width: 100px;
  height: 100px;
  background: rgb(33, 236, 101);
}

这样渲染的是红色

.turngreen {
  width: 100px;
  height: 100px;
  background: rgb(33, 236, 101);
}
.turnred {
  width: 100px;
  height: 100px;
  background: rgb(165, 32, 32);
}

 V-bind 动态绑定   

分为四种办法   

1.利用size的变化

2.利用computed绑定

3.利用watch监听size,并对objectStyle中的fontSize进行更改

4.利用method进行方法绑定

v-on的用法

      <div>
        <button @click="++count">+1</button>
        <button v-on:click="--count">-1</button>
        <p>this button had been click {{ count }} times</p>
      </div>

在普通的点击方面，我认为v-on:click和@click是一致的，可进行简单的数据操作或绑定方法

对于click等类似操作，有更加细化的识别

 

示例  事件修饰符

• .capture: 在传递的父子事件种，加了这个，无论先点哪个，都先执行这个。

•         <div v-on:click.capture="say('hi')">
            Say hi
            <div v-on:click="say('what')">Say what</div>
          </div>
  
     
   say(message) {
        alert(message);
      },

  

• 上述属于嵌套结构  点击Say hi 就会alert('hi')

• 点击Say what会先执行父结构 效果为先alert('hi') 再alert('what')   有相对应的顺序关系

computed computed() methods methods()区别

@click="computed"   computed只会在初始化时执行一次     //已验证 可运行Invalid handler for event "click": got undefined

@click="computed()" 只会通过事件触发执行一次  //_vm.computeddist is not a function"

@click="methods"  初始化不执行，可以通过事件触发  //已验证

@click="methods()" 初始化不执行，可以通过事件触发 //已验证