vue入门第一天（下）

最新推荐文章于 2023-11-06 16:43:16 发布

lil gako

最新推荐文章于 2023-11-06 16:43:16 发布

阅读量2.3k

点赞数 1

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/gako15587481707/article/details/125806208

版权

1.1-Vue指令介绍

Vue指令官网文档传送门：API — Vue.js
1.Vue指令的本质是 ： Vue为HTML标签新增的一些属性
- a. 每一个HTML标签都有自己的原生默认属性
  - HTML标签的每一个属性都有自己独特的功能
  - 例如 img标签的src属性，a标签的href属性
- b. Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能
2.在Vue中每一个指令都是以v-开头（用于区分HTML标签原生属性）
- 语法： 指令名=“指令值”
  - 例如 v-text = msg
3.使用Vue的指令，就像使用HTML标签原生的属性一样去使用即可。

`<img src="./images/logo.png" alt="图片不存在时的文本" title="鼠标悬停文本" v-on:click = "doClick">`
`src"` : 原生属性，设置图片的路径
`alt` : 原生属性，设置图片不存在时的文本
`title`：原生属性，设置鼠标悬停文本
`v-on:click`:vue给img标签新增的属性, 给元素绑定点击事件

==知识点验收==

问题1：指令是vue框架的核心功能之一，请说出指令的作用？

给标签新增一些功能

问题2：指令的本质是什么？

自定义属性

1.2-v-text指令

v-text指令官方文档传送门：API — Vue.js

<!-- 
1.学习目标 ：  v-text 指令
2.学习路线
    a.作用： 设置元素的文本 innerText
    b.与插值表达式区别
        v-text 设置元素的文本，如果元素有文本，则会覆盖现有的文本
        {
 { }}  只会替换当前位置文本
 -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.