《Vue 核心知识点全览：概念、指令（v-html/v-text、v-if/v-show、v-on、v-bind、v-for、v-model）、响应式与插值表达式》

原创

已于 2025-10-26 19:47:26 修改 · 666 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2024-12-15 20:50:05 首次发布

一、Vue概念

概念：Vue是一个用于构建用户界面的渐进式框架。

1. 构建用户界面：基于数据动态渲染页面，渲染出用户看到的页面

二、创建 Vue 步骤

官网的vue引用

<body>
    <!-- 
  创建Vue实例，初始化渲染
  1. 准备容器 (Vue所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建实例
  4. 添加配置项 => 完成渲染
-->
    <div id="app">
        <!-- {
   
   {插值表达式}} -->
        <h1>{
   
   {msg}}</h1>
        <a href="#">{
   
   {str}}</a>
        <img src="{
   
   {imga}}" alt="{
   
   {imgs}}">
    </div>
    <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            //找标签---vue生效范围--el这个词不能换
            el: '#app',
            // 数据，响应式，数据变化界面自动更新
            data: {
                msg: '你好',
                str: 'vue',
                imgs: '图片',
                imga: './imgs/10-02.png'
            }
        })
    </script>
</body

三、插值表达式 { { }}

1. 作用: 利用表达式进行插值，渲染到页面中。表达式：是可以被求值的代码，有结果，

插值表达式的本意就是把一个表达式的结果插入到界面，只要是有结果的都可以放进去{ {表达式}}

注意点：1：数据必须存在，2:支持的是表达式，不是语句，3：不能在标签属性中使用{ { }}插值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=2.0">
    <title>Document</title>
</head>
<body>
    <!-- 
  插值表达式：Vue的一种模板语法
  作用：利用 表达式 进行插值渲染
  语法：{
   
   { 表达式 }}

  注意点：
    1. 使用的数据要存在
    2. 支持的是表达式，不是语句  if  for
    3. 不能在标签属性中使用 {
   
   { }}
 -->
    <div id="app">
        <h1>{
   
   {h1}}</h1>
        <h2>{
   
   {h2}}</h2>
        <h3>{
   
   {h3}}</h3>
        <h4>{
   
   {h4}}</h4>
        <h5>{
   
   {h5}}</h5>
        <p>{
   
   {person}}</p>
        <p>{
   
   {person.name}}</p>
        <!-- 数据必须存在 -->
        <!-- 只能写表达式，能求结果的是表达式 -->
        <!-- 表达式不能在标签属性中使用 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                h1: '标签1',
                h2: '标签2',
                h3: '标签3',
                h4: '标签4',
                h5: '标签5',
                person: {
                    name: '小李',
                    age: 21,
                }
            }
        })
    </script>
</body>
</html>

四、响应式

数据改变，视图会自动更新。使用 Vue 开发 → 专注于业务核心逻辑即可

五、Vue 指令

指令：带有 v- 前缀的特殊标签属性

1，v-html和v-text

v-html相当于innerHTML，识别标签

v-text相当于innerText，不识别标签，把标签当成普通字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <!-- div数据 -->
        <div v-html="msg">div</div>
        <!-- <ahref="#">超链接</a> -->
        <div v-text="str1">div</div>
        <!-- 超链接 -->
        <div v-html="str2">div</div>

        <!-- v-html相当于innerHTML，识别标签 -->
        <!--v-text相当于innerText，不识别标签，把标签当成普通字符串 -->
    </div>

    <script src="https://cd