02.Vue模板语法-Vue2常用指令&代码片段(Tip)

本文链接：https://blog.csdn.net/hgjyujian/article/details/126869627

这里写目录标题

前提:问题解答

问题1:methods属性中，为什么不能使用箭头函数?

使用箭头函数最主要的问题是this的问题。
this是必须要有值的。
this 可以同等于 window 全局变量么? 不可以
当使用箭头函数的时候 this就相当于window
为什么等于window？ 在箭头函数中是不绑定this的
与this的绑定规则有关

// 在scrpit标签中
const foo = function(){ console.log(this) } // 此时这个this指的是 **window**
foo();  // 执行foo函数 相当于执行 window.foo(); **这叫做隐式绑定**
const obj = {bar: foo};  obj.bar()   // 将foo方法赋值给对象的时候，此时打印出来的this指的是**obj对象**
obj.bar();  // 这里隐式绑定的就是 obj
------------------------------------------------------------
// 在箭头函数中是不绑定 this 的 ，但是函数中如果使用了this,去上层作用域寻找 this
const foo = () => {console.log(this)}  // 方法改变成为**箭头函数**
foo(); // 打印出来的this指的是window
const obj = {bar:foo} obj.bar();   // 此时打印出来的this指的是**window**

template 有两种解析方式

1.源码中解析
2.通过 vue-template-compiler 这个插件进行解析

Vue底层做了一个bind的操作(查看源码)

Tip: VsCode代码片段

在学习过程中，编写重复代码很浪费时间(代码编辑器中的代码片段可以解决)
vscode–> 文件 —> 首选项 —> 配置用户代码片段(https://snippet-generator.app生成代码片段网址)

1. 模板语法

react的开发模式:

React使用的jsx，对应的代码都是编写的类似于js的一种语法
之后通过babel将jsx编译成React createElement函数调用

Vue也支持jsx的开发模式:

大多数情况下，使用基于HTML的模板语法；
在模板中，允许开发者以声明式的方式将DOM和底层组件实例的数据绑定在一起；
在底层的实现中，Vue将模板编译成虚拟DOM渲染函数；

1.1 Mustche双大括号语法

数据显示到模板(template)中，使用最多的是"Mustche语法{{}}"的文本插值。

 <template id="my-app">
       <h2>{{message}}</h2>
       // 可以是一个表达式
       <h2>{{counter * 10}}</h2>  
       // 切割 翻转 连接
       <h2>{{ message.split(" ").reverse().join(" ")}}</h2>
       // 调用函数
       <h2>{{getReverseJoin}}</h2>
       // 可以使用计算属性
       // 可以写三元运算符
       <h2>{{isShow ? true : false}}</h2>
  </template>

var name = “abc” 这是赋值语句不可以放到双大括号中。
if(isShow){return true;} 这是if语句 不可以放到双大括号中。

1.2 v-once指令

用于指定元素或者组件只渲染一次：

当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；
该指令用于性能优化。

<div v-once></div>

1.3 v-text指令

用户更新元素的textContent

<h2 v-text="message"></h2>

1.4 v-html指令

默认情况下，我们展示的内容本身是html，那么vue并不会对其进行特殊的解析；
如果我们希望这个内容被vue可以解析出来，可以使用v-html来展示；

    <template id="my-app">
        <div>{{msg}}</div>
    </template>
    ······
      data() {
                return {
                    msg: '<div>测试</div>'
                }
            }
// 浏览器结果   <div>测试</div>
// 如果想展示 必须使用到v-html   
<div v-html>{{msg}}</div>

1.5 v-pre

v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签；
跳过不需要编译的节点，加速编译的速度。

<h2 v-pre>{{message}}</h2>    // 显示的是{{message}} message不会被解析出来

1.6 v-clock

这个指令保持在元素上直到关联组件实例结束编译；
和CSS规则如[v-clock] {display:none;}一起用时，这个指令可以隐藏未编辑的Mustache标签直到组件实例准备完毕。

<style> [v-clock] {display:none;}</style>
····
// 不会显示
<template>
	<div v-clock>测试</div>
</template>

1.7 v-bind的绑定属性

前端讲的一系列指令，主要是将值插入到模板内容中；
除了内容需要动态来决定外，某些属性我们也希望动态来绑定；
比如a元素的href属性，img元素的src属性；
语法糖的意思就是缩写

缩写 :
预期: any(with argument) Object (with argument) (任意或者是对象)
参数: attrOrProp (optional)
用法: 动态的绑定一个或者多个attribute，或者一个组件prop到表达式。

<img :src="ImgUrl" alt="">   // imgUrl 是data中定义的一个图片路径

vue3 中允许template中存在多个根元素；
绑定class介绍

:class=“className” // 绑定一个动态的className className可以是一个字符串 | 对象
对象语法: :class=“{ ‘active’ : boolean }” // 根据boolean 可以确定是否使用这个 active class
绑定class 数组语法 :class=“[ ‘abc’ , { } , ‘cba’ , isActive? ‘active’ : ’ ’ ]”
// 可以写三元运算符，允许嵌套对象语法

绑定style介绍

可以利用v-bind:style绑定一些css内联样式；
CSS property 名可以用驼峰式或者短横线分割(key值拿’’ 包起来) 来命名；
对象语法: :style=“{ color : ‘#ffffff’}” // key可以不适用 ‘‘包裹，如果是value的话必须加上’’；
数组语法: :style=“[{},{}]” // 两个对象合并;

动态绑定属性

属性名字也有可能是不确定的；
:[name]=“属性的值” // name 也是可以定义在data中的变量

绑定一个对象

希望将一个对象的所有属性，绑定到元素上的所有属性；
info: { name:“why”, age:“18”} // 这是data中的一个对象
v-bind="info" // 相当于 name="why" age="18" :="info" // 语法糖(不推荐)

1.8 v-on绑定事件

前面我们绑定了元素的内容和属性，在前段开发中另外一个非常重要的特性就是交互；
v-on的作用:

缩写: @
预期: Function | Inline Statement | Object (预期得到的值)
参数: event

基本使用

// 监听的点击事件  简写(语法糖):  @click=" 事件方法 "
<button  v-on:click = "methods中的某一个方法" >按钮1</button> 
// 绑定一个表达式  inline statement
<button  v-on:click = "counter ++" >按钮2</button>
// 绑定一个对象(同时绑定多个事件)  @="{}"  (语法糖 不推荐)
<button  v-on = "{ click : btnClick , mousemove : mouseMove }" >按钮</button>