HTML+CSS+JS+Vue学习笔记【持续更新】

已于 2024-07-09 16:07:34 修改
阅读量922 收藏 17
点赞数 27
文章标签： vue.js javascript html css
于 2024-07-04 23:22:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63231188/article/details/140181013
版权

//持续更新中.....

目录

前序：四者关系

1.四者作用

2.四者关系

一.HTML

1.标签

1.注释标签

2.标题标签

3.段落标签

4.换行标签

5.格式化标签

6.img标签

7.超链接标签

2.DOM树

3.VSCode快速生成代码模板的方式

3.属性

二.CSS

三.JS

四.Vue

1.什么是vue？

1.vue文件

2.一些基础认识

2.模板语法

1.数据绑定

1.文本插值

2.v-once 指令

3.v-html指令

4.v-bind指令

2.指令

1.v-if / v-else / v-else-if

2.v-for

3.v-on

4.v-bind

5.v-model

6.v-show

7.v-text / v-html

5.计算属性和监听器

1.计算属性

1.Getter 方法

2.Setter 方法

3.computed/fullName/set/get

2.监听器

前序：四者关系

1.四者作用

  1. HTML（HyperText Markup Language）：HTML 是用于定义网页结构和内容的标记语言。它提供了一种标记文档结构的方式，包括标题、段落、列表、链接等元素。HTML 定义了网页的基本结构，是前端开发中不可或缺的一部分。

  2. CSS（Cascading Style Sheets）：CSS 是用于定义网页样式和布局的样式表语言。通过 CSS，开发者可以为 HTML 元素添加样式，包括颜色、字体、布局、边框等。CSS 负责网页的外观和样式，使得页面看起来更加美观和具有吸引力。

  3. JavaScript：JavaScript 是一种用于实现网页交互和动态效果的脚本语言。通过 JavaScript，开发者可以为网页添加交互功能，例如响应用户操作、动态更新内容、处理表单数据等。JavaScript 是一种功能强大的脚本语言，为网页增加了更多的交互性和动态性。

  4. Vue：Vue 是一种流行的前端 JavaScript 框架，用于构建交互式的单页面应用（SPA）。Vue 提供了一套简洁的 API 和响应式数据绑定机制，使得开发者可以更轻松地构建可复用的组件，并实现数据驱动的 UI。Vue 基于 MVVM 模式（Model-View-ViewModel），将视图（View）和数据模型（Model）通过 ViewModel 连接起来，实现了数据和视图的双向绑定。

2.四者关系

  • HTML 和 CSS：HTML 用于定义网页的结构和内容，而 CSS 用于定义网页的样式和布局。在实际开发中，开发者通常会将 HTML 和 CSS 结合起来，通过 CSS 样式表为 HTML 元素添加样式，实现页面的美化和布局。例如，通过 CSS 设置元素的颜色、字体、大小、边距等样式属性，从而使页面呈现出设计师所期望的外观。

  • HTML、CSS 和 JavaScript：JavaScript 用于实现网页的交互功能和动态效果。开发者可以通过 JavaScript 操纵 HTML 元素的属性和内容，实现页面元素的动态更新、事件响应、表单验证等功能。JavaScript 与 HTML 和 CSS 结合使用，使得网页具有更丰富的交互性和动态性。

  • Vue 和 HTML/CSS/JavaScript：Vue 是一个 JavaScript 框架，通过 Vue，开发者可以构建复杂的交互式前端应用。Vue 提供了一套响应式数据绑定机制，使得数据和视图之间的同步更加简单和高效。开发者可以在 Vue 中编写模板（Template）、脚本（Script）和样式（Style），将 HTML、CSS 和 JavaScript 组织成可复用的组件，实现更清晰和可维护的前端代码结构。

     总的来说，HTML定义了内容，CSS定义了页面的布局和外观，JavaScript定义了页面上的交互与动态操作，而Vue将 HTML、CSS 和 JavaScript 这三者的功能整合在一起，提供了一种更高效、更便捷的方式来构建现代化的前端应用。

一.HTML

  HTML是超文本标记语言（HyperText Markup Language）的缩写，是一种用于创建网页的标记语言。HTML由一系列的标签组成，这些标签描述了网页上的文本、图像、链接等内容的结构和样式。通过使用HTML，开发人员可以创建出丰富多样的网页内容，让用户在浏览器中查看并与之交互。

注意：HTML不是一门编程语言，只是一种用于定义内容和结构的标记语言。之所以称为标记语言，是因为HTML由一系列的标签（Tag）组成，这些标签可以用来包围不同部分的内容。

1.标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple example of an HTML page. It contains a heading and a paragraph.</p>
</body>
</html>

html：html文件根标签

head：编写页面相关的属性

title：页面标题

body：页面展示的内容

在 HTML 中，标签可以分为双标签（双闭合标签）和单标签（自闭合标签）两种类型。

  1. 双标签（双闭合标签）：双标签由开始标签和结束标签组成，用来包裹一段内容，如<p> 和 </p>。示例：

    <p>This is a paragraph.</p>

  2. 单标签（自闭合标签）：单标签在 HTML 中没有结束标签，通常用来表示没有内容或者自包含的元素，如 <img> 和 <br>。示例：

    <img src="image.jpg" alt="Image"> <br>

1.注释标签

‘ Ctrl ’ + ‘ / ’ 同时点击可对选中行注释

<!-- 这是一段注释 -->

2.标题标签

        <h1>这是h1标签</h1>
        <h2>这是h2标签</h2>
        <h3>这是h3标签</h3>
        <h4>这是h4标签</h4>
        <h5>这是h5标签</h5>
        <h6>这是h6标签</h6>

运行完整代码结果如下

3.段落标签-<p>

p标签表示一个段落

<p>这是一个段落</p>
  • p 标签之间存在一个空隙
  • html 内容首尾处的换行, 空格均无效.
  • 在 html 中文字之间输入的多个空格只相当于一个空格.
  • html 中直接输入换行不会真的换行, 而是相当于一个空格.

4.换行标签<br>

br 是 break 的缩写， 表示换行。
  • br 是一个单标签(不需要结束标签)
  • br 标签不像 p 标签那样带有一个很大的空隙.
  • <br/> 是规范写法. 不建议写成 <br>

5.格式化标签

  • 加粗: strong 标签 和 b 标签
  • 倾斜: em 标签 和 i 标签
  • 删除线: del 标签 和 s 标签
  • 下划线: ins 标签 和 u 标签 

 <p>
        <strong>这是一个段落</strong>啊
        <br/>
        <b>这是一个段落</b>啊
        <br/>  
        <em>这是一个段落</em>啊
        <br/>
        <i>这是一个段落</i>啊
        <br/>    
        <del>这是一个段落</del>啊
        <br/>  
        <s>这是一个段落</s>啊
        <br/> 
        <ins>这是一个段落</ins>啊
        <br/> 
        <u>这是一个段落</u>啊
        <br/>  
    </p>

6.img标签

<img src="rose.jpg">
img 标签必须带有 src 属性，表示图片的路径
关于目录结构 :
对于一个复杂的网站 , 页面资源很多 , 这种情况可以使用目录把这些文件整理好。
1) 相对路径 : 以 html 所在位置为基准 , 找到图片的位置。
同级路径 : 直接写文件名即可 ( 或者 ./)
下一级路径 : image/1.jpg
上一级路径 : ../image/1.jpg
2) 绝对路径 : 一个完整的磁盘路径 , 或者网络路径 . 例如
磁盘路径 D:\rose.jpg
网络路径 https://images0.cnblogs.com/...... 
<img src="fafa.jpg" alt="花花" title="这是一朵花花" width="500px" height="800px"
border="5px">
其他属性：
  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字。
  • title: 提示文本，鼠标放到图片上, 就会有提示。
  • width/height: 控制宽度高度，高度和宽度一般改一个就行, 另外一个会等比例缩放，否则就会图片失衡。
  • border: 边框, 参数是宽度的像素，但是一般使用 CSS 来设定。

ps:

1. 属性可以有多个 , 不能写到标签之前
2. 属性之间用空格分割 , 可以是多个空格 , 也可以是换行 .
3. 属性之间不分先后顺序
4. 属性使用 " 键值对 " 的格式来表示 .

7.超链接标签<a>

  • href: 必须具备, 表示点击后会跳转到哪个页面.
  • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开. 
<a href="http://www.baidu.com">百度</a>
<a href="#div1">跳转到当前页面d1</a>
<a href="tel:12345678">打电话</a>
<a href="mailto:222820***8@qq.com">发送邮件</a>
<a href="./认识2">跳转到认识界面2</a>
<a href="https://www.baidu.com/?tn=88093251_82_hao_pg">跳转到百度一下</a>
<a href="https://www.baidu.com/?tn=88093251_82_hao_pg"target="_blank">跳转到百度一下（新开一个网页）</a>
<a href="https://www.baidu.com/?tn=88093251_82_hao_pg"target="_self">跳转到百度一下（在当前页面下跳转）</a>

"#"不做任何页面间的跳转，就在当前页面上(锚点链接)

2.DOM树

HTML 的 DOM 树是指由 HTML 文档中的元素（如标签、文本内容等）构成的树形结构，它代表了整个 HTML 文档的层级关系和结构。在 DOM 树中，每个 HTML 元素都表示为一个节点，节点之间通过父子关系连接，形成了一个层级结构。

PS:所有的标签都是html的子标签，head和body是兄弟标签，head和title是父子标签

                           

3.VSCode快速生成代码模板的方式

！+ 回车（先输入一个感叹号，再回车）

<!DOCTYPE html>//指定当前html版本5
<html lang="en">//指定当前页面的内容是英文的
<head>
    <meta charset="UTF-8">//浏览器解码规则
    <meta name="viewport" content="width=device-width, initial-scale=1.0">//移动端适配
    <title>Document</title>
</head>
<body>
    
</body>
</html>

自动生成模板如上，里面的注释了生成内容的简单解释。

3.属性

在 HTML 中，属性（attribute）是用于为 HTML 元素提供额外信息或配置的标记。HTML 元素可以具有各种属性，这些属性可以用来定义元素的行为、样式、链接目标等。属性通常以键值对的形式出现，其中属性名表示属性的名称，而属性值表示属性的值。

以下是一些常见的 HTML 属性及其作用：

  1. class: 用于指定元素的类名，可以用于定义元素的样式。
  2. id: 用于指定元素的唯一标识符，通常用于 JavaScript 操作或样式定义。
  3. src: 用于指定元素的资源地址，如图片、音频、视频等。
  4. href: 用于指定超链接的目标地址。
  5. alt: 用于指定图片元素的替代文本，当图片无法显示时会显示这段文本。
  6. style: 用于指定元素的样式，可以包含 CSS 属性和值。
  7. title: 用于指定元素的标题，通常会在鼠标悬停时显示为提示信息。

在 HTML 中，属性通常包含在开始标签中，并以空格分隔，如下所示：

<a href="https://www.example.com" class="link" id="link1">Click me</a>

在这个例子中，href、class 和 id 都是元素 <a> 的属性，分别指定了超链接目标地址、类名和唯一标识符。

总之，HTML 属性是用于为 HTML 元素提供额外信息或配置的标记，可以影响元素的行为、样式和功能.

二.CSS

//待更新

三.JS

//待更新

四.Vue

1.什么是vue？

    Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

  Vue.js是一个基于JavaScript的框架，它本身就是用JavaScript编写的。Vue.js利用JavaScript的语法和功能来实现其响应式数据绑定、组件化开发、虚拟DOM等特性。因此，Vue.js可以被看作是JavaScript的一个扩展，它提供了一种更加高效、便捷的方式来构建现代化的Web应用程序。

  • 框架：通俗意义上可以理解为一种提供了基础结构和功能的工具，帮助开发者更高效地构建应用程序。Vue.js就是一个前端框架，提供了一系列工具和功能，帮助开发者构建交互性强、动态性好的Web应用。
  • 自底向上逐层利用：“Vue 被设计为可以自底向上逐层应用"意味着Vue.js框架可以逐步引入和应用到项目的不同部分，从简单的部分开始逐渐扩展到更复杂的部分。这种设计让开发者可以根据需要逐步使用Vue.js的功能，而不是一次性全部应用到整个项目中。这种渐进式的应用方式使得开发更加灵活和可控。

1.vue文件

一个典型的Vue文件一般分为三个部分：

  • <template>模板部分：定义了组件的结构和内容，使用 HTML 语法编写。你可以在模板中使用 Vue 的指令（Directives）和插值表达式（Interpolations）来实现动态数据绑定和条件渲染等功能。

注意：template中只能存在一个<div>，可以嵌套不能并列，在 Vue 的单文件组件中，一个 <template> 标签中只能包含一个根元素，但可以在这个根元素内部嵌套其他元素，不能并列多个根级元素。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
  • <script>脚本部分：：脚本部分包含了组件的逻辑和行为，通常使用 JavaScript 或 TypeScript 编写。在脚本中，你可以定义组件的数据、方法、生命周期钩子等内容。
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Vue is awesome!';
    }
  }
};
</script>
  • <style>样式部分：样式部分用于定义组件的样式，可以使用 CSS、SCSS、LESS 等预处理器语言编写。样式中的规则将应用于组件内的元素。注意这里的scoped指的是样式只在此文件中生效。
<style scoped>
/* 可选的样式 */
</style>

    总的来说，这个组件在被Vue加载的时候，<template>中的内容将按照<style>中中CSS指定的样式显示，而具体的行为则由<script>中的JavaScript代码决定。

2.一些基础认识

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    incrementCount() {
      this.count++; // 使用 this 访问组件的 count 属性并递增
    }
  }
};
</script>

export default {} ：在 Vue.js 组件对象中，通常会包含一些选项（options）来定义组件的行为、数据、模板等内容。以下是一些常见的 Vue.js 组件选项

1.data：用于定义组件的响应式数据。可以是一个函数返回一个对象，也可以直接是一个对象。

data() {
  return {
    message: 'Hello, Vue!'
  };
}

2.computed：用于定义计算属性，根据其他数据的变化动态计算属性值。

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

3.methods：用于定义组件中的方法，可以在模板中调用。

methods: {
  greet() {
    alert('Hello!');
  }
}

4.watch：用于监听数据的变化并执行相应的操作。

watch: {
  message(newValue, oldValue) {
    console.log('Message changed from ' + oldValue + ' to ' + newValue);
  }
}

  还有一些其他选项可以用来配置组件，比如 mounted、created、destroyed 等生命周期钩子函数，以及 components、directives 等用来注册组件或指令的选项。

注意：当在 Vue 组件中编写 export default { ... } 导出组件对象时，this 关键字通常指向当前组件实例，可以用来访问组件的数据、计算属性、方法等内容。

一个小例子，点击前后发生变化

<template>
  <div  @click="handleClick">
    {{ name+age }}{{ age }}:{{ age>20 ? "成年人" : "未成年" }}
    <img v-bind:src="imgUrl"  alt=""/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "张三",
      age:20,
      imgUrl: "https://pic1.zhimg.com/v2-c661740055d91606880283692e40720c_r.jpg",
    };
  },
  
methods: {
  handleClick() {
    this.name="帅哥张三"
    this.age++
    this.imgUrl="https://www.jikezd.com/wp-content/uploads/user_files/30478/publish/post/54416528_1669291318.jpeg"

  },
},
}
  
</script>

<style scoped>

</style>

2.模板语法

  Vue.js 的模板语法是一种特定于 Vue.js 框架的语法规则，用于在 Vue.js 应用程序中定义和渲染页面内容。Vue.js 的模板语法结合了 HTML 和特定的 Vue.js 指令，使开发者可以轻松地将数据和页面内容进行绑定，实现数据驱动的页面展示。

Vue.js 的模板语法主要包括以下几个方面：

1.数据绑定

1.文本插值

  使用双大括号 {{ }} 将数据绑定到页面中，实现数据和页面内容的关联。数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，例如：

  在 Vue.js 中，双大括号 {{ }} 用于插值，将数据绑定到页面中。在下列代码中，{{ msg }} 表示将 Vue 实例中的 msg 数据绑定到 <span> 元素中，显示为文本内容。

  当 Vue 实例中的 msg 数据发生变化时，页面中绑定了该数据的地方也会相应更新，展示最新的数据内容。这种数据驱动视图的方式是 Vue.js 框架的核心特性之一，使得页面可以根据数据的变化自动更新，实现了响应式的页面渲染。

<div id="app">
    <span>Message: {{ msg }}</span>
</div>

export default {
  data() {
    return {
      msg: 'Hello, Vue.js!'
    };
  }
};

<template>
  <div>
    <span>Message: {{ msg }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello, Vue.js!'
    };
  }
};
</script>

<style>
/* 可选的样式 */
</style>

结果：

修改 msg: 'Hello, Vue.js!' 为 msg: 'Bye, Vue.js!' 之后的结果，可以看到msg修改后Message后面的部分也随之相应的更改：

2.v-once 指令

  v-once 指令用于一次性地渲染元素和组件，使其内容在首次渲染后固定，不再随数据的变化而更新。当使用 v-once 指令时，指令所在的元素及其子元素将只在首次渲染时进行数据绑定，之后即使数据发生变化，元素内容也不会更新。这可以用于在某些情况下确保元素内容只被渲染一次，而不受后续数据变化的影响。因此，v-once 指令的作用是确保元素内容只渲染一次，不会随数据变化而更新。这对于需要静态展示内容或者避免重复渲染的情况可能会有用。

<template>
  <div>
    <p v-once>{{ message }}</p>
    <p>{{ dynamicMessage }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '这是一次性插值，不会更新',
      dynamicMessage: '这是动态消息，会更新'
    };
  },
  methods: {
    updateMessage() {
      this.message = '已更新的消息';
      this.dynamicMessage = '已更新的动态消息';
    }
  }
};
</script>

 其运行结果如下 ：

点击更新消息后结果，可以看到使用了v-once命令的message在点击之后没有发生更新变化，而没有使用v-once命令的dynamicMessage发生了更新变化：

3.v-html指令

  Vue.js 中的一个指令，用于将数据作为原始 HTML 插入到 DOM 中。当需要展示包含 HTML 标记的字符串数据时，可以使用 v-html 指令来告诉 Vue.js 不要将数据视为纯文本，而是作为 HTML 解析并渲染到页面上。

<template>
  <div>
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Hello, Vue.js!</strong>'
    };
  }
};
</script>

运行结果可以看出，前一个输出的是纯文本，而第二个是用html解析再渲染到页面上的：

4.v-bind指令

  v-bind 是 Vue.js 中用于动态绑定数据到 HTML 特性（attribute）的指令。通过 v-bind 指令，可以将 Vue 实例中的数据动态地绑定到 HTML 元素的特性上，实现数据驱动的页面更新。

     "Mustache 语法" 指的是 Vue.js 中的插值语法，即使用双花括号 {{ }} 来插入数据或表达式。在 Vue.js 中，插值语法通常用于将数据动态显示在 HTML 内容中，而不能直接用于 HTML 属性中。这就是说，你不能在 HTML 属性中直接使用 Mustache 语法来动态绑定属性值。

举个例子，如下代码是错误的，因为在 HTML 属性中使用了 Mustache 语法：

<input type="text" placeholder="{{ placeholderText }}" />

正确的做法是使用 Vue.js 提供的指令来动态绑定属性值，例如使用 v-bind 指令来实现动态绑定属性值：

<input type="text" v-bind:placeholder="placeholderText" />

    在上面的代码中，使用了 v-bind:placeholder="placeholderText" 来动态绑定输入框的占位符属性，将 placeholderText 数据属性的值动态绑定到输入框的占位符上。这样就能实现类似于 Mustache 语法的效果，但是是通过 Vue.js 提供的指令来实现的。

    总之，Vue.js 中的 Mustache 语法不能直接用于 HTML 属性中，需要使用 Vue.js 提供的指令来实现动态绑定属性值。

<template>
  <div>
    <h1 v-bind:style="{ color: textColor }">{{ message }}</h1>
    <input type="text" v-bind:placeholder="placeholderText" v-bind:disabled="isDisabled" @input="updateMessage" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!',
      placeholderText: 'Enter your message here',
      isDisabled: false,
      textColor: 'blue'
    };
  },
  methods: {
    updateMessage(event) {
      this.message = event.target.value;
    }
  }
};
</script>

<style>
h1 {
  font-size: 24px;
}
input {
  padding: 10px;
  margin-top: 10px;
}
</style>

最后展示：


 

2.指令

   Vue.js 中，指令（Directives）是带有 v- 前缀的特殊属性，用于在 HTML 元素上添加特定的行为或功能。指令的作用是将指定的行为或功能与数据绑定在一起，实现数据驱动的 DOM 操作。指令 attribute 的值通常是一个单个 JavaScript 表达式，这个表达式会被解析并响应式地作用于 DOM。

   指令在 Vue.js 中扮演着非常重要的角色，它们可以实现诸如条件渲染、循环渲染、事件处理、样式绑定等功能。通过指令，我们可以在 HTML 中直接操作数据，实现数据与视图的绑定和同步更新。

下面是一些常用的 Vue.js 指令及其作用：

1.v-if / v-else / v-else-if

用于条件性地渲染元素。

<template>
  <div>
    <p v-if="type === 'A'">Type A</p>
    <p v-else-if="type === 'B'">Type B</p>
    <p v-else>Type C</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'C' // 可以尝试修改 'A'、'B' 或 'C'，看看不同元素如何渲染
    };
  }
};
</script>

2.v-for

用于循环渲染列表中的元素。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

3.v-on

用于绑定事件处理函数。

  v-on 是 Vue.js 中用于绑定事件处理程序的指令。通过 v-on 指令，我们可以监听 DOM 事件，并在事件触发时执行相应的处理函数。v-on 指令可以简写为 @ 符号。

    例如，我们可以在一个按钮上使用 v-on:click 或 @click 来监听点击事件，并执行相应的处理函数。示例代码如下：

<button @click="handleClick">Click me</button>

另外，也可以在 v-on 指令中传递事件对象 $event，以便在处理函数中访问事件对象的属性。

<input @input="handleInput($event)">

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Button Clicked!';
    }
  }
};
</script>

<style scoped>
/* 可选的样式 */
</style>

4.v-bind

用于动态绑定 HTML 元素的属性。

用法详见数据绑定中v-bind命令。

5.v-model

 用于实现表单元素与 Vue 实例数据的双向绑定。

v-model 是 Vue.js 中常用的指令之一，用于实现表单元素与 Vue 实例数据的双向绑定。通过 v-model 指令，我们可以轻松地实现用户输入和数据状态的同步更新，从而简化了处理表单和用户输入的复杂性。

具体来说，v-model 可以用在各种表单元素上，包括 <input>、<textarea>、<select> 等，以实现双向数据绑定。当用户在表单元素中输入内容时，v-model 会自动更新 Vue 实例中对应的数据属性；反之，当数据属性的值发生改变时，表单元素的值也会相应地更新。

在使用 v-model 时，我们可以通过不同的修饰符来处理不同类型的输入元素，例如：

  • .number 修饰符：将用户输入的值转为数字类型；
  • .trim 修饰符：自动过滤用户输入的首尾空格；
  • .lazy 修饰符：将输入事件改为 change 事件，而不是默认的 input 事件。
<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  }
};
</script>

在上面的示例中，我们使用 v-model="message" 将一个 <input> 元素与 Vue 实例中的 message 数据属性进行双向绑定。这样，当用户在输入框中输入内容时，message 数据属性会实时更新；反之，当 message 数据属性的值改变时，输入框的值也会相应地更新。结果如下所示：

因为message中为 'Hello, Vue.js!' 所以输入框里面也是 'Hello, Vue.js!'。

输入框里输入123456，message也相应发生了改变

6.v-show

根据表达式的值来控制元素的显示和隐藏。

v-show 是 Vue.js 中用于根据表达式的值来控制元素显示或隐藏的指令。当表达式的值为真时，被绑定了 v-show 的元素会显示出来；当表达式的值为假时，该元素会被隐藏起来，但仍然占据页面空间。

使用 v-show 指令可以在需要根据条件显示或隐藏元素时非常方便。与 v-if 相比，v-show 更适合频繁切换显示和隐藏的情况，因为它只是简单地切换 CSS 的 display 属性，而不是销毁和重新创建元素。

<template>
  <div>
    <p v-show="isVisible">This paragraph is shown using v-show.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

最后结果如下所示：

点击之后反转取false，结果如下：

注意：在 Vue.js 中，isVisible: false 是用来定义 Vue 实例中的数据属性的初始值的方式，而 this.isVisible = !this.isVisible; 则是用来在实例方法中切换该属性值的方式。这两者是不同的用法。

  • isVisible: false：这是在 Vue 实例的 data 选项中定义一个名为 isVisible 的数据属性，并将其初始值设为 false。这个属性可以在模板中使用，比如通过 v-show="isVisible" 控制元素的显示和隐藏。
  • this.isVisible = !this.isVisible;：这是在 Vue 实例的方法中，通过取反操作符 ! 来切换 isVisible 的值。这样可以根据当前值的布尔取反来实现显示和隐藏的切换。

  因此，isVisible: false 和 this.isVisible = !this.isVisible; 是两种不同的用法，分别用于定义初始值和在方法中切换值。在实际开发中，通常会同时使用这两种方式来控制元素的显示和隐藏。

7.v-text / v-html

分别用于更新元素的文本内容和 HTML 内容。

v-text 指令：用于将元素的文本内容与 Vue 实例中的数据进行绑定，会将数据作为纯文本插入到元素中，不会解析其中的 HTML。示例用法如下：

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

    在上面的示例中，message 是 Vue 实例中的一个数据属性，该数据会被插入到 <div> 元素中作为纯文本。

v-html 指令：用于将元素的 innerHTML 与 Vue 实例中的数据进行绑定，会将数据作为 HTML 插入到元素中，可以解析其中的 HTML 标签。但要注意潜在的安全风险，因为这样做可能导致 XSS 攻击。示例用法如下：

<div v-html="htmlContent"></div>

    在上面的示例中，htmlContent 是 Vue 实例中的一个数据属性，该数据会被插入到 <div> 元素的 innerHTML 中，可以包含 HTML 标签。

参数

在 Vue.js 中，一些指令可以接收一个参数，这个参数通常在指令名称后面以冒号的形式表示。这样的设计使得指令更加灵活，可以根据参数的不同来实现不同的功能。

举例来说：

  • v-bind 指令可以接收一个参数，用于指定要绑定的 HTML 属性。比如 v-bind:href="url" 中的 href 就是参数，告诉 v-bind 指令要将元素的 href 属性与表达式 url 的值进行绑定，实现响应式更新。

  • v-on 指令用于监听 DOM 事件，也可以接收一个参数，用于指定要监听的事件名。比如 v-on:click="doSomething" 中的 click 就是参数，告诉 v-on 指令要监听元素的 click 事件，并在事件触发时执行 doSomething 方法。

通过指令参数的方式，我们可以更加灵活地控制指令的行为，实现各种不同的功能。在实际开发中，经常会用到这种方式来实现动态绑定属性、监听事件等功能。

3.过滤器：Vue.js 的模板语法支持过滤器，用于对数据进行格式化或处理后再显示在页面上。过滤器可以通过管道符 | 连接到数据插值表达式中。

//待更新

4.事件处理：通过 v-on 指令可以绑定事件处理函数，实现对用户交互事件的响应。例如：<button v-on:click="handleClick">Click me</button>。

//待更新

5.计算属性和监听器

Vue.js 还支持在模板中使用计算属性和监听器，用于处理复杂的逻辑计算或监听数据的变化。

1.计算属性

计算属性（Computed Properties）是一种用于对数据进行计算或处理的属性。计算属性的值是基于其它数据的值计算得出的，类似于一个函数，但在模板中以属性的形式使用。

<template>
  <div>
    <p>原始消息：{{ message }}</p>
    <p>转换为大写：{{ upperCaseMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js'
    };
  },
  computed: {
    upperCaseMessage() {
      return this.message.toUpperCase();
    }
  }
};
</script>

在上面的示例中，upperCaseMessage 是一个计算属性，它返回 message 的大写形式。每当 message 发生变化时，upperCaseMessage 会自动重新计算，并更新视图中的数据。

在 Vue.js 中，除了计算属性（computed properties）外，还可以使用带有 getter 和 setter 方法的属性，准确的说，计算属性默认只有 getter，不过在需要时也可以提供一个 setter，这些被称为“带有 getter 和 setter 的属性”（property with getter and setter）。

1.Getter 方法

getter 方法用于获取属性的值。当访问属性时，会调用 getter 方法，并返回相应的值。

2.Setter 方法

setter 方法用于设置属性的值。当修改属性时，会调用 setter 方法，并更新属性的值。（用此方法可以在处理表单数据时进行数据校验）

<template>
  <div>
    <label for="ageInput">Enter your age:</label>
    <input type="number" id="ageInput" v-model="age">
    <p v-if="invalidAge">Invalid age value. Please enter an age between 0 and 150.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      _age: 0,
      invalidAge: false
    };
  },
  computed: {
    age: {
      get() {
        return this._age;
      },
      set(value) {
        if (value >= 0 && value <= 150) {
          this._age = value;
          this.invalidAge = false; // 重置错误提示
        } else {
          this.invalidAge = true; // 显示错误提示
        }
      }
    }
  }
};
</script>






结果如下：

3.computed/fullName/set/get

在Vue.js中，computed属性用于定义计算属性，fullName是一个计算属性的示例名称，set和get是计算属性的特性，用于设置和获取计算属性的值。它们之间有着一定的联系和区别。

  1. computed属性：computed属性是用于定义计算属性的方式，在Vue组件中可以通过computed属性定义基于Vue实例数据动态计算得出的属性。计算属性具有缓存特性，只有相关数据发生变化时才会重新计算。在计算属性中，可以通过get方法获取计算属性的值，也可以通过set方法设置计算属性的值。

  2. fullName是一个示例计算属性的名称，可以代表一个计算属性，例如一个由firstName和lastName拼接而成的完整姓名。

  3. get和set：在计算属性中，可以通过get方法定义计算属性的计算逻辑，用于获取计算属性的值；通过set方法定义计算属性的赋值逻辑，用于设置计算属性的值。当计算属性被访问时，会调用get方法来获取计算属性的值；当计算属性被赋值时，会调用set方法来设置计算属性的值。

联系和区别：

  • 联系：computed属性和fullName都是用于定义计算属性的概念，可以通过定义计算属性来动态计算属性的值；set和get是计算属性的特性，用于设置和获取计算属性的值。
  • 区别：computed是一个Vue.js提供的选项，用于定义计算属性；fullName是一个具体的计算属性的名称；set和get是计算属性的特性，用于定义计算属性的赋值和获取逻辑。

  综上所述，computed属性用于定义计算属性，fullName可以代表一个计算属性的名称，set和get是计算属性的特性，用于设置和获取计算属性的值。它们之间有着联系和区别，共同构成了计算属性的定义和特性

2.监听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

在Vue组件中，可以通过watch选项来监听数据属性的变化，当被监听的数据属性发生变化时，Vue会调用相应的监听器函数（watcher）来执行特定的逻辑。监听器函数接受两个参数，即新值和旧值，可以在函数内部进行相应的处理操作。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
      // 在这里可以执行一些逻辑操作，比如发送请求、更新其他数据等
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

//待更新

点点的点点的点点
关注
  • 27
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端随手笔记-html-css-js-vue
weixin_43992935的博客
05-11 472
1 兼容性配置 <meta http-equi v="X-UA-Compatible" content="IE=Edge,chrome=1" 2 双核浏览器渲染，优先使用webkit内核渲染 <meta name="renderer" content="webkit"> 3 提升网站性能，DNS预解析 <link rel="dns-prefetch" href=".....
前端，html，css,js,vue
weixin_52375283的博客
08-10 3862
前端技术： 学习方法 前端要怎么学？ 前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单，不亚于后端开发，甚至难度超越了后端开发。 但从整体来看（前端占软件开发总量的百分之十左右，地位可见一斑）；从技术的含金量来看（如：业务
Web前端开发实战：HTML5+CSS3+JavaScript+Vue+Bootstrap
最新发布
努力是为了站在万人之中，成为别人的光
06-18 1万+
我们将开发一个响应式的待办事项应用，用户可以添加、删除和标记完成任务。使用HTML5构建页面结构使用CSS3和Bootstrap进行样式设计和响应式布局使用JavaScript处理基本的DOM操作使用Vue.js进行数据绑定和交互管理通过这个待办事项应用的开发，我们详细展示了如何结合HTML5、CSS3、JavaScript、Vue.js和Bootstrap进行Web前端开发。这个项目不仅涵盖了前端开发的各个方面，还展示了如何将这些技术整合在一起，构建一个功能完善、界面美观的Web应用。
html+css+js+vue 基础
Peter的博客
03-20 4936
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>This is study note</title> <base href="我是做外链的，一般在head里面" target="_blank"> ...
html,css ,javascript,vue
weixin_46417419的博客
08-18 377
一，天猫精灵app开发环境搭建 1，在vscode下进行开发 npm,是nodejs内置的软件包管理器，npm是用来管理软件包的 他是世界上最大的软件注册表，每星期大约有30亿次的下载量，包含6000000哥包（代码块） npm由三大独立部分组成： 网站：开发者查找包，设置参数以及npm使用体验的主要途径，网址为：https://www.npmjs.com/ 注册表：是一个巨大的数据库，保存了每个包的基本信息 命令行工具：开发者与npm包打交道的工具。 脚手架 是为了保证各个施工顺利进行而搭设的工作平台
HTML，css，js，vue的简单介绍
Fengkx518的博客
01-13 6515
HTML基础学习-个人小总结
html css js全套学习笔记＋举例
04-16
JavaScript还有许多库和框架，如jQuery简化DOM操作，React.js和Vue.js用于构建用户界面，Node.js则让JavaScript能在服务器端运行。ES6（ECMAScript 6）版本引入了许多新特性，如let和const变量声明、模板字符串、...
日常工作中的学习笔记(HTML+CSS+JS+Angular+Vue+React+NodeJs).zip
03-14
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
前端笔记+html+css+js+vue+工具+计算机网络+操作系统+面试题.zip
10-06
在本压缩包“前端笔记+html+css+js+vue+工具+计算机网络+操作系统+面试题.zip”中，包含了前端开发以及相关技术领域的丰富学习资料。以下将详细阐述其中涉及的知识点： 1. **HTML（HyperText Markup Language）**：...
html+css+javascript
05-09
在IT行业中，前端开发是构建互联网应用不可或缺的一部分，而HTML、CSS和JavaScript是构成大前端领域的三大基础技术。本文将详细探讨这三者的核心概念、相互关系及其在实际开发中的应用。 HTML（HyperText Markup ...
java+mysql+html+css+javaScript+jsp+Mybatis+jquery+ajax+Maven+vue
06-16
java+mysql+html+css+javaScript+jsp+Mybatis+jquery+ajax+Maven+vue学习笔记，包含一部分项目经验，适用初学者
html+CSS+js+VUE+element+java后台项目示例
08-20
包含html-CSS-javascript-vue-element等多项基础知识课件详解，为web开发提供基础技术。并包含一个web项目的示例代码，利于掌握Java后台和前端的程序设计流程。
【前端篇】html、css、JavaScript、vue基础知识
weixin_39335999的博客
12-22 808
本文主要介绍测试开发所需学习的html、css、JavaScript、vue基础知识
前端面试题目总结（HTML、CSS、JS、VUE、HTTP）
weixin_45065754的博客
04-30 2124
1、HMTL 2、CSS 3、JS 4、VUE 5、HTTP 6、总结
前端三剑客，html，css，javascript，vue框架
qq_51778285的博客
12-28 5668
HTML 教程 | 菜鸟教程HTML 教程- (HTML5 标准) 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 在本教程中，您将学习如何使用 HTML 来创建站点。 HTML 很容易学习！相信您能很快学会它！ HTML 实例 本教程包含了数百个 HTML 实例。 使用本站的编辑器，您可..https://www.runoob.co..
前端随笔：HTML/CSS/JavaScript和Vue
鸿神的博客
07-24 5327
Vue(发音为 /vjuː/，类似view) 是一款用于构建用户界面的JavaScript框架。它基于标准HTMLCSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。最初Vue是一个个人项目，时至今日，已成为全世界三大前端框架之一，Github上拥有3.8万Star。React和Angular，在国内更是首选。除了为HTML定义新的标签以外，我们还可以为HTML的标签定义新的属性，而后为新的属性指定样式和行为。
【前端开发】前端开发深度解析：HTML、CSS、JavaScript与Vue.js
Remote Sensing迷途小书童
02-23 3861
HTML、CSS、JavaScript和Vue.js是前端开发中不可或缺的工具和技术。HTML负责网页的结构和内容，CSS负责样式和外观，JavaScript负责交互性和动态性，而Vue.js则提供了一个高效、灵活的框架来构建复杂的单页应用。掌握这些技术对于前端开发者来说是非常重要的。通过不断学习和实践，开发者可以不断提升自己的技能水平，为用户带来更好的体验。
vue(html,css,vue2,vue3) 学习总结
明明明的博客
07-19 1017
vue,css,html,vue2,vue3 学习总结

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值