一个项目学习Vue3---Vue模板方法

 内容资源下载：关注公众号(资小库)，下载相关资源

分析下面一段代码，学习模板方法的可能的知识

<template>
  <div>
    <div>将下面的msg属性放到上面来:{{ msg }}</div>
    <div v-html="htmlMsg"></div>
    <div v-bind="id">这个地方绑定了一个ID{{ id }}</div>
    <div :id="id">v-bind可以简写为:（冒号）</div>
    <div :id>如果你的属性值=你的字段名称，则可以直接不写，不过似乎一般只有id能用</div>
    <div v-bind:id>这样也可以不过没有:香</div>
    <div :class="bigClass">不止ID一切属性皆可以绑定</div>
    <div :style="textStyle">也可以直接绑定对象，一般用于css等</div>
    <div>如果你要是否支持下面括弧里面是否支持js，就想想你的这个语句是否能直接写在return后面</div>
    <div>{{ num + 1 }}</div>
    <div>{{ ok ? 'YES' : 'NO' }}</div>
    <div>{{ `这里面也可以直接执行函数${hahah(1)}` }}</div>
    <div>学着调用方法</div>
    <button @click="open">点击变猪</button>
    <button v-on:click="open2">这样也可以变</button>
    <div v-if="ok">这里也是ok</div>
    <div v-else>这里是个啥</div>
    <select>
      <option v-for="(item, index) in data">{{ item.id }}</option>
    </select>
    <div>
      <a :[attributeName]="url">这是个链接</a>
      <button v-on:[eventName]="open2">也可以绑定事件</button>
    </div>
    <div>
      <form @submit.prevent="handleSubmit">
        <button type="submit">Submit</button>
      </form>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      msg: '学无止境',
      htmlMsg: '<div>我是被插入的一行代码</div>',
      id: 1,
      bigClass: 'bigClass',
      textStyle: {
        color: 'red',
        with: '100px'
      },
      num: 0,
      ok: true,
      data: [
        {
          id: 1
        },
        {
          id: 2
        }
      ],
      attributeName: 'href',
      url: 'https://www.baidu.com',
      eventName: 'click'
    }
  },
  methods: {
    handleSubmit() {
      // 在这里可以处理表单提交的逻辑
      console.log('Form submitted')
    },
    open() {
      this.msg = '猪'
      this.ok = !this.ok
    },
    open2() {
      this.msg = '猪+1'
      this.ok = !this.ok
    },
    hahah(val) {
      return 'Pag' + val
    }
  }
}
</script>
<style scoped>
.bigClass {
  font-size: 3em;
}
</style>

下面是对上面代码的分析

1.大括号绑定值

<div>将下面的msg属性放到上面来:{{ msg }}</div>
export default {
  data() {
    return {
      msg: '学无止境'
    }
  }
}

当你更改return中的msg的值，你可以很快的发现上面html中大括号里面的内容也会随之发生变化，所以你也可以在

  methods: {
    changeMsg() {
      this.msg = "好好学习"
    }
   }

vue的methids中写一个函数，如果你恰好调用了这个函数，那么你显示的msg的内容将被变为"好好学习",这就是Vue的双向绑定的机制，当然后面所说的所有在return里面的变量都可以进行双向绑定。

2.插入一段HTML

当你想插入一段HTML时候，你会想办法把msg="<div>这就变了</div>.,但是这样在vue中是不被允许的，所以，vue有一个标签v-html可以解决您的问题

<div v-html="htmlMsg"></div>
export default {
  data() {
    return {
      htmlMsg: '<div>我是被插入的一行代码</div>'
    }
  }
}

这样就是插入一行html代码了，当前前面说过，你可以随时利用vue双向绑定的特性，来更改这段变量的内容

3.绑定属性

当我们想绑定id，class，href等这些属性时，你完全可以利用vue实现动态绑定

<div v-bind="id">这个地方绑定了一个ID{{ id }}</div>
<div :id="id">v-bind可以简写为:（冒号）</div>
<div :id>如果你的属性值=你的字段名称，则可以直接不写，不过似乎一般只有id能用</div>
<div v-bind:id>这样也可以不过没有:香</div>
<div :class="bigClass">不止ID一切属性皆可以绑定</div>
<div :style="textStyle">也可以直接绑定对象，一般用于css等</div>
export default {
  data() {
     return {
       id: 1,
       bigClass: 'bigClass',
       textStyle: {
          color: 'red',
          with: '100px'
       },
     }
   }
}
<style scoped>
.bigClass {
  font-size: 3em;
}
.bigClass2 {
  font-size: 5em;
}
</style>

v-bind:的意思是绑定id这个属性，但是你也可以将其简写为:（冒号），所以v-bind:id=”id"和:id=“id"作用是一样的，当然如果你的属性和你的绑定的值是一样的，你可以直接简写为:id，她就等于:id = "id"

不止id，你也可以绑定class和style等其他属性，例如:class="bigClass" ，意思是这个class绑定了return中的class，你完全可以在mothods中写一个方法，让return中的bigClass:”bigClass2“,那么你的字体会从3em变成5em

style的绑定也很特殊，你直接可以绑定一个属性，这个属性你可以直接在你的js中写成一个类似JSON的值，他自己就行生成你想要的风格，当然你也可以通过

this.textStyle.color="blue"

将你的字变成蓝色

4.大括弧支持的内容

{{}}双括弧中不止支持双向绑定一个值，还绑定

<div>{{ num + 1 }}</div>
<div>{{ ok ? 'YES' : 'NO' }}</div>
export default {
  data() {
     return {
        num: 0,
        ok: true,
     }
   }
}

如上面所示，他是支持我们使用算术运算和三元表达式的，但是

<div>{{if(num>0){return true}}}</div>

这种语句是不支持的，所以这种语句应该使用三元表达式代替他

括弧里面是否支持js，就想想你的这个语句是否能直接写在return后面，这是vue的一个标准

大括弧中也可以执行函数

<div>{{ `这里面也可以直接执行函数${hahah(1)}` }}</div>

我们可以看到$()中有一个hahah方法，他就对应methods中的hahah方法

hahah(val) {
  return 'Pag' + val
}

5.方法的调用

<button @click="open">点击变猪</button>
<button v-on:click="open2">这样也可以变</button>
methods: {
    open() {
      this.msg = '猪'
      this.ok = !this.ok
    },
    open2() {
      this.msg = '猪+1'
      this.ok = !this.ok
    }
}

在js中我们使用onClick表示点击方法，vue中则使用@click表示，常用的还有@change，@submit，基本上就是把on变成了@，但是@在vue中等于v-on:，他们的作用是一致的

6.逻辑运算

vue中是支持if、else、for等常用的逻辑操作的

<div v-if="ok">这里也是ok</div>
<div v-else>这里是个啥</div>
<select>
   <option v-for="(item, index) in data">{{ item.id }}</option>
</select>

if-else通常是一组，当然他也支持elseif。

v-for意思是循环一个数组，这里data就是一个数组，一般数组就是[]里面的内容，同时你也可以利用vue双向绑定的机制，随时改变其数组俩面的值，改变后，vue会快速的将他们在页面上渲染出来。

7.属性名称的绑定

<div>
  <a :[attributeName]="url">这是个链接</a>
  <button v-on:[eventName]="open2">也可以绑定事件</button>
</div>


return {
      attributeName: 'href',
      url: 'https://www.baidu.com',
      eventName: 'click'
}

[]中括号的内容很明显在html中是一个标签的属性，在上面这个代码中"attributeName"=href，所以在第一行标签中就相当于html中的

  <a href="https://www.baidu.com">这是个链接</a>

同时他也可以动态绑定事件eventName=“click”。所以他就是一个点击事件,open2是一个方法名称

，所以open2也是个动态绑定的的方法

8.修饰符

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

<form @submit.prevent="handleSubmit">
    <button type="submit">Submit</button>
</form>