下午茶,渍

Appearance

其他函数的用法 ​

v-model ​

将后面的数值转变成响应式变量，变量的初始值是挂载函数中的data(){这里的数值}. 这里要注意,vue变量会优先先渲染data,再执行方法等其他用法,这里这里不能用this

v-bind ​

绑定他后面的属性和v-model里的的响应式参数数值一致,简写:

eg:

js
const { createApp } = Vue;  
  
const app = {  
  data() {  
    return {  
      textColor: "red-text",  
      isDisabled: false,  
    };  
  },  
  
  methods: {  
    handleClickToDisable() {  
      this.isDisabled = true;  
    },  
  
    handleClickToEnable() {  
      this.isDisabled = false;  
    },  
  },  
};  
  
createApp(app).mount("#app");
html
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="UTF-8" />  
    <title>Vue Directives</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <link href="style.css" rel="stylesheet" />  
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
  </head>  
  <body>    <div id="app">  
      <h1 v-bind:class="textColor">Demo</h1>  
  
      <select id="color-select" title="Change text color" v-model="textColor">  
        <option value="red-text">Red</option>  
        <option value="blue-text">Blue</option>  
      </select>  
  
      <button        type="button"  
        v-bind:disabled="isDisabled"  
        v-on:click="handleClickToDisable"  
      >  
        Click To Disable Me  
      </button>  
      <button type="button" v-on:click="handleClickToEnable">  
        Click To Enable Above  
      </button>  
    </div>  
  </body>  
  
  <script src="./main.js"></script>  
</html>

v-on和methods ​

v-on是将methods中的方法返回值传给在v-on的参数上,简写@

computed ​

和method的对比

触发条件是方法中的响应式变量变化

html
<div id="app">  
  <h2>CSS3 Perspective Playground</h2>  
  <main>    <section class="settings">  
      <div class="settings-container">  
        <label>perspective: {{perspective}} px;</label>  
        <input title="perspective" type="range" min="0" max="999" v-model="perspective"/>  
  
        <label>rotateX: {{rotateX}} deg; </label>  
        <input title="rotateX" type="range" min="-180" max="180" v-model="rotateX"/>  
  
        <label>rotateY: {{rotateY}} deg; </label>  
        <input title="rotateY" type="range" min="-180" max="180" v-model="rotateY"/>  
  
        <label>rotateZ: {{rotateZ}} deg; </label>  
        <input title="rotateZ" type="range" min="-180" max="180" v-model="rotateZ"/>  
  
        <button type="button" v-on:click="reset">Reset</button>  
      </div>  
    </section>  
    <section class="output">  
      <div class="box-container" >  
        <!-- Set style -->  
        <div class="box" v-bind:style="`transform: perspective(${perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg);`"></div>  
      </div>  
    </section>  
  </main>  
</div>
js
const { createApp } = Vue;  
  
createApp({  
  data() {  
    return {  
      perspective: 0,  
      rotateX: 0,  
      rotateY: 0,  
      rotateZ: 0,  
    };  
  },  
  
  methods: {  
    reset() {  
      this.perspective = 0;  
      this.rotateX = 0;  
      this.rotateY = 0;  
      this.rotateZ = 0;  
    },  
  },  
  //会在一开始运行里面的代码,这里是将这个属性挂在对应的style上,也就是加了一个css样式,再里面的数值再次发生改变的时候才会再次使用
  computed: {  
    transformStyle() {  
      return {  
				const transform = 
					`perspective(${this.perspective}px)` +
					`rotateX(${this.rotateX}deg) ` +
				  `rotateY(${this.rotateY}deg)` +
				  `rotateZ(${this.rotateZ}deg)`;  
      };  
    },  
  },  
}).mount("#app");

v-for ​

是将 in 后面紧跟的数(字符串等...)遍历传入到 for 后面紧跟的参数里面，先是数值，再是下标

v-if ​

决定后面的元素是否展示，if里面的条件是真的时候