vue基础语法

1、Vue指令-v-bind动态属性
语法：v-bind:属性名="vue变量"

简写：:属性名="vue变量"

把vue变量赋给一个标签属性

App.vue

 <template>
  <div>
    <!--- 语法：v-bind:属性名="vue变量"
        - 简写：:属性名="vue变量" 
      作用：标签的原生属性添加vue变量-->
          
    <a v-bind:href="url">点我去淘宝</a>
    <img :src="img" alt="" />
        
  </div>
</template>
​
<script>
export default {
   ------data函数return对象-------
  data() {
    return {
        //定义变量
      url: "http://www.taobao.com",
      img: "https://img0.baidu.com/it/u=2784489411,2330095372&fm=26&fmt=auto",
    };
  },
};
</script>
​
<style>
</style>

2、Vue指令-v-on事件绑定
给标签绑定事件

语法

v-on:事件名="methods中的函数"

v-on:事件名="methods中的函数(实参)"

简写: @事件名="methods中的函数(参数)"

<template>
  <div>
    <p>数量：{
  { count }}</p>
    <button v-on:click="addFn">加1</button>
    <button v-on:click="addCountFn(5)">加5</button>
    <button @click="subFn">减1</button>
  </div>
</template>
 
<script>
export default {
  data() {
    // 变量（属性）
    return {
      count: 10,
    };
  },
  methods: {
    //方法
    addFn() {
      //this指向当前vue文件（组件）对象,webpack在运行打包时,会把data/methods里的变量名和方法名,统统加到this身上
      this.count++;
    },
    addCountFn(num) {
      this.count += num;