vue指令语法

插值语法

<template>
  <div>
    <!-- {{vue里面的变量}} 插值表达式 -->
    <!-- 插值 ： 往标签里面写内容 -->
    <!-- 表达式 ： 可以计算得到一个结果 -->
    <h1>{{ msg }}</h1>
    <p>{{age > 19 ? '你是对的' : '你不对'}}</p>
    <div>{{obj.uname, }}</div>
  </div>
</template>

<script>
export default {
   // data 必须是一个函数 函数体里面 必须要return一个对象
  //  对象里面的key 可以理解为 Vue 中的变量 key ： value
  data() {
    return {
      msg: "你好Vue",
      age: 19,
      obj: {
        uname: "李四",
        age: 33,
      },
    };
  },
};
</script>

<style>
</style>

v-bind语法和简写

简写语法 ：:标签属性名 = “Vue的变量”

<template>
  <div>
    <!-- v- bind 语法 -->
    <!-- v-bind: 标签属性名 = “Vue的变量” -->
    <!-- 简写语法 ：:标签属性名 = “Vue的变量” -->
    <!-- v-bind 属性绑定 作用就是和 html 标签的属性 绑定到一起 -->
    <a :href="msg">百度</a>
    <img :src="url" alt="" />
  </div>
</template>

<script>
export default {
  // data 必须是一个函数 函数体里面 必须要return一个对象
  data() {
    return {
      msg: "http://www.baidu.com",
      url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
    };
  },
};
</script>

<style>
</style>

获取事件对象

1. 调用函数时 没有传递参数 只需要在 定义函数处准备一个形参

<template>
  <div>
    <!-- 获取事件对象 1， 调用函数时 没有传递参数 只需要在 定义函数处准备一个形参 -->
    <button @click="fn">按钮</button>
    <!-- 调用函数时 用传递给 实际参数 需要固定的实际参数 $event -->
    <button @click="fnn(10, $event)">获取事件对象</button>
    
  </div>
</template>

<script>
export default {
  methods: {
    fn(e) {
      console.log(e);
    },
    fnn(val, e) {
      console.log(val, e);
    },
  },
};
</script>

<style>
</style>

事件修饰符

<template>
  <div @click="fclick">
    <!-- 获取事件对象 1， 调用函数时 没有传递参数 只需要在 定义函数处准备一个形参 -->
    <button @click.stop="fn">按钮</button>
    <!-- 调用函数时 用传递给 实际参数 需要固定的实际参数 $event -->
    <button @click.stop="fnn(10, $event)">获取事件对象</button>
    <a :href="url" @click.stop.prevent>百度</a>
    <!-- 仅仅只想阻止默认行为 -->
    <!-- 需求：阻止默认行为和 阻止冒泡 -->

    <!-- v-on 修饰符 -->
    <!-- 语法： @事件名.修饰符 -->
    <!-- .stop 阻止冒泡 -->
    <!-- .prevent 阻止默认行为 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "http://www.baidu.com",
    };
  },
  methods: {
    fn(e) {
      console.log(e);
    },
    fnn(val, e) {
      console.log(val, e);
    },
    one(e) {
      console.log(e);
    },
    fclick() {
      console.log("我是父盒子");
    },
  },
};
</script>

<style>
</style>

v-show和v-if命令

<template>
  <div>
    <!-- v-show  -->
    <h1 v-show="isShow">是否显示</h1>
    <div v-if="isShow">我是一个盒子</div>
    <div v-if="age">上网</div>
    <div v-else>回家学习</div>
  </div>
</template>

<script>
export default {
data(){
  return{
    isShow:false,
    age:19,
  }
}
}
</script>

<style>

</style>

v-html和 v-text命令

<template>
  <div>
    <!-- v-html 解析 html标签 -->
  <p v-html="html"></p>
  <!-- v-text 不能解析 html标签 -->
  <p v-text="html"></p>
  <!-- Vue 官方建议少用 v-html -->
  <p v-text="html">{{msg}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      html: "<strong>hello</strong>",
      msg: hello,
    };
  },
};
</script>

<style>
</style>