Vue的模板语法（基础部分）

第一部分：模板语法

模板语法之一——插值表达式{{ }}

<div>
  <h2>插值表达式</h2>
  <!-- 插值表达式{{}} -->
  <!-- 写变量 -->
  <p>{{ num }}</p>
  <!-- 写三元表达式 -->
  <p>{{ num > 10 ? "大于10" : "小于1o" }}</p>
  <!-- 连接 -->
  <p>{{ num + "你好" }}</p>
 </div>

模板语法之二——— v-html=" js数据变量 " 和v-text=" js数据变量 "

v-html把值当做html解析,v-html ===> innerHTML

v-text把值当成普通字符串显示, v-text  ===> innerText

<template>
 <!-- 这是vue的页面标签，能够在页面显示，
 template只能有一个亲儿子盒子:这里我弄一个div盒子 -->
 <div>
   <!-- 语法 v-html="js数据变量" -->
   <!-- v-html把值当做html解析,v-html ===> innerHTML -->
   <span v-html="sum"></span>
   <!-- 语法 v-texe="js数据变量" -->
   <!-- v-text把值当成普通字符串显示, v-text  ===> innerText -->
   <span v-text="sum"></span>
  </div>
</template>

<script>
export default {
 // 我是js的逻辑
 data() {
  return {
   // 定义变量和数据
   sum: "<i>我是i标签</i>",
   };
  },
};
</script>
<style>
</style>

模板语法之三——v-bind

v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）

例如：给img标签的src设置图片地址：

一般写法：<img v-bind:src="imgUrl" alt="" />

简写：<img :src="imgIng" alt="" />

<template>
 <div>
   <!-- v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）-->
   <img :src="imgIng" alt="" />
 </div>
</template>

<script>
export default {
 // 我是js的逻辑
 data() {
  return {
    // 定义变量和数据
    imgIng: "https://www.w3school.com.cn/ui2019/bg.png",
   };
 },
};
</script>
<style>
</style>

模板语法之四——v-for

<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

• 目标结构可以是：数组 / 对象 / 数字

<template>
 <div>
  <!-- <标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签> -->
   <!-- 需求，把数组遍历到页面上 -->
   <div v-for="(value, index) in sum" v-bind:key="index">
    <!-- 遍历数组时和forEach里面的两个形参一样 -->
    {{ value.name }},{{ index }}
   </div>
  </div>
</template>

<script>
export default {
 // 我是js的逻辑
 data() {
  return {
    // 定义变量和数据
    sum: [
    { name: "张三", age: 18, sex: "男" },
    { name: "小花", age: 19, sex: "女" },
    ],
   };
 },
};
</script>
<style>
</style>

模板语法之五——v-show和v-if

语法：v-if="布尔值" 

v-show 用的display:none隐藏   (频繁切换使用)

语法：v-show用css样式进行显示与隐藏

v-if  直接从DOM树上添加或移除

<template>
 <div>
  <!-- 需求：标签的显示与隐藏 -->
  <!-- 语法：v-if="布尔值" -->
  <!-- 含义：v-if在dom树中删除和添加元素 -->
  <p v-if="bool">我是v-if：只能在</p>
  <!-- 语法：v-show用css样式进行显示与隐藏 -->
  <!-- display:"none"-->
  <p v-show="bool">我是v-show</p>
 </div>
</template>

<script>
export default {
 // 我是js的逻辑
 data() {
  return {
    // 定义变量和数据
    // false/true
    bool: false,
   };
 },
};
</script>
<style>
</style>

模板语法之六——v-if/v-else-if/v-else

含义：和js里面的if-elseif一样：条件不合格则不在页面显示

<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>

<template>
 <div>
   <!-- 单词不要写错 -->
   <p v-if="num > 90">优秀</p>
   <p v-else-if="num > 60">及格</p>
   <p v-else>不及格</p>
 </div>
</template>

<script>
export default {
 // 我是js的逻辑
 data() {
   return {
     num: 70,
   };
  },
};
</script>
<style>
</style>

v-on和methods

作用：给标签绑定事件

语法：

1. <标签 v-on:事件名="要执行的少量代码" >
2. <标签 v-on:事件名="methods中的函数" >
3. <标签 v-on:事件名="methods中的函数(实参)">
4. v-on可以简写成 @。 即 @事件名="methods中的函数"

<template>
  <div>
    <!-- v-on事件绑定 -->
    <!-- <标签 v-on:事件名="要执行的少量代码" > -->
    <button v-on:click="num = 2">第一个点击事件{{ num }}</button>
    <!-- <标签 v-on:事件名="methods中的函数" > -->
    <button v-on:click="btn2">第二个点击事件(普通)</button>
    <!-- <标签 v-on:事件名="methods中的函数(实参)"> -->
    <button v-on:click="btn3('传进去')">第三个点击事件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
    };
  },
  methods: {
    btn2: function () {
      console.log("第二个点击事件");
    },
    btn3(a) {
      console.log(a);
    },
  },
};
</script>
<style>
</style>

vue指令-v-on事件对象

语法

• 无传参, 通过形参直接接收
• 传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <!-- 无传参状态下：通过形参直接接收 -->
    <a v-on:click="one" href="http://www.baidu.com">点我跳转百度未传参状态</a>
    <br />
    <!--传参状态下：通过$event指代事件对象传给事件处理函数 -->
    <a v-on:click="two(1, $event)" href="http://www.baidu.com"
      >点我跳转百度传参状态</a
    >
  </div>
</template>

<script>
export default {
  methods: {
    one(e) {
      e.preventDefault();
      console.log("没有跳转");
    },

    two(num, e) {
      e.preventDefault();
      console.log("没有跳转");
    },
  },
};
</script>
<style>
</style>

vue指令-v-on修饰符

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。
• .passive - (2.3.0) 以 { passive: true } 模式添加侦听

一.事件修饰符

语法:

<标签 @事件名.修饰符="methods里函数" />

.stop - 阻止事件冒泡

<button v-on:click.stop="one">阻止事件冒泡</button>

.prevent - 阻止默认行为

<a @click.prevent="a" href="http://www.baidu.com">登录百度</a>

.once - 程序运行期间, 只触发一次事件处理函数

<button @click.once="btn">只触发一次事件处理函数</button>

二.键盘修饰符

监听回车事件

 <input @keyup.enter="btn1" type="text" />

 三.ref直接获取dom元素

<!-- ref:直接获取dom元素 语法：<标签 ref="自定义值"> -->

<!-- 在script标签拿取到值this.$refs.自定义值 -->

 四..sync 修饰符

子组件操作
//title为父组件传给子组件的值
//newTitle为修改title的值
this.$emit('update:title', newTitle)

//父组件操作.sync
<text-document v-bind:title.sync="doc.title"></text-document>

详细点讲解
sync修饰符：在子组件内部可以直接修改父组件传过来的值
语法：this.$emit("update:父组件传递的变量值"，新值)