Vue学习笔记（一）

于 2024-09-03 15:27:51 发布
阅读量1k 收藏 11
点赞数 29
文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wz_1992/article/details/141823884
版权

Vue.js

1、如何引用Vue

<!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>
    <!-- 开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
  
<div id="app">
  {{ message }}
</div>
 
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>
</html>

输出：Hello Vue!

出现问题：
①、运行输出{{ message }}
问题原因：Vue链接有问题，导致没有引用成功
②、拼写Vue时候没有代码提示
使用 newV 这样会有提示

2、Vue的用法

2.1 条件渲染

v-if、v-else

<!DOCTYPE html>
<html lang="en">
  <head>
   
    <title>Document</title>
    <!-- 开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
  
<div id="app">
  <h1 v-if="some">这是some为true时候展示的内容</h1>
  <h1 v-else>这是some为false时候展示的内容</h1>
</div>
 
<script>
  var app = new Vue({
    el:'#app',
    data:{
      some:false
    },
    
  });
</script>
</html>

输出：这是some为false时候展示的内容

v-else-if(2.1.0新增)

<!DOCTYPE html>
<html lang="en">
  <head>
   
    <title>Document</title>
    <!-- 开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
  
<div id="app">
 <h1 v-if="type === 'A'">A</h1>
 <h1 v-else-if="type === 'B'">B</h1>
 <h1 v-else-if="type === 'C'">C</h1>
 <h1 v-else>Not ABC</h1>
</div>
 
<script>
  var app = new Vue({
    el:'#app',
    data:{
      type:'A'
    },
    
  });
</script>
</html>

2.2 列表渲染：v-for

  • v-for
<!DOCTYPE html>
<html lang="en">
  <head>
   
    <title>Document</title>
    <!-- 开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
  
  <ul id="some">
    <li v-for="item in items">
      {{ item.message}}
    </li>
  </ul>
 
 
<script>
  var app=new Vue({
    el:'#some',
    data:{
      items:[
      {  message:'A'},{message:'B'}
      ]

    }
  })
  
</script>
</html>

输出：
在这里插入图片描述

  • v-for 迭代对象
<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!--axios  网络请求-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in objets">{{item}}</li>
      </ul>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          objets: {
            name: "百度",
            url: "http://www.baidu.com",
            slogan: "学的不仅是技术，更是梦想！",
          },
        },
      });
    </script>
  </body>
</html>

输出：
在这里插入图片描述

  • 也可提供多个参数为键名： v-for="(value, key) in object" 或者 v-for="(value, key, index) in object"

两个参数：

<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!--axios  网络请求-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(value, key) in objets">{{ index }}. {{ key }}</li>
      </ul>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          objets: {
            name: "百度",
            url: "http://www.baidu.com",
            slogan: "学的不仅是技术，更是梦想！",
          },
        },
      });
    </script>
  </body>
</html>

输出：
在这里插入图片描述

三个参数：

<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!--axios  网络请求-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(value, key,index) in objets">
          {{ index }}. {{ key }} : {{ value }}
        </li>
      </ul>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          objets: {
            name: "百度",
            url: "http://www.baidu.com",
            slogan: "学的不仅是技术，更是梦想！",
          },
        },
      });
    </script>
  </body>
</html>
  • v-for 迭代整数
<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!--axios  网络请求-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="n in 10">{{n}}</li>
      </ul>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>

输出：

在这里插入图片描述

2.3 事件处理： v-on

  • v-on
<!DOCTYPE html>
<html lang="en">
  <head>
   
    <title>Document</title>
    <!-- 开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
  
    <div id="some">
      <button v-on:click="greet">Greet</button>
    </div>
 
 
<script>
  var app=new Vue({
    el:'#some',
    data:{
    name:'Vue.js'
    },
    methods: {
      greet:function(event){
        alert(`Hello ${this.name}`);
        if(event){
          alert(event.target.tagName);
        }

      }
    },


  })
  
</script>
</html>
  • v-on: 可简写为@
  • 将click换成其他事件同样成立，比如鼠标进入事件mouseenter。
<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <button @mouseenter="number--">-</button>
      <span>{{ number }}</span>
      <button @mouseenter="number++">+</button>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          number: 1,
        },
      });
    </script>
  </body>
</html>

2.4 表单输入绑定 ：v-model（双向绑定）

入门 - vue中v-model的实现原理和完整用法详解

<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  
  </head>
  <body>
    <div id="app">
      <input type="text" name="name" id="myName" v-model="message" />
      <p>内容为：{{message}}</p>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello",
        },
      });
    </script>
  </body>
</html>
  • v-model结合radio类型使用:
<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <label for="male">
        <input type="radio" id="male" name="sex" value="男" v-model="sex" />男
      </label>
      <label for="female">
        <input type="radio" id="female" name="sex" value="女" v-model="sex" />女
      </label>

      <div>你选择的性别为：{{ sex}}</div>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          sex: "男",
        },
      });
    </script>
  </body>
</html>
  • v-model结合复选框类型使用:

单选：

<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <label for="agree">
        <input
          type="checkbox"
          id="agree"
          value="男"
          v-model="isAgree"
        />是否阅读并同意用户协议
      </label>

      <div>你的选择为：{{ isAgree}}</div>
      <button :disabled="!isAgree">下一步</button>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          isAgree: true,
        },
      });
    </script>
  </body>
</html>

输出：
在这里插入图片描述

在这里插入图片描述

多选：

<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" name="hobby" value="苹果" v-model="choose" />苹果
      <input type="checkbox" name="hobby" value="香蕉" v-model="choose" />香蕉
      <input
        type="checkbox"
        name="hobby"
        value="车厘子"
        v-model="choose"
      />车厘子
      <div>你的选择为：{{ choose}}</div>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          choose: [],
        },
      });
    </script>
  </body>
</html>

输出：
在这里插入图片描述

  • 值的绑定：
<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <label :for="item" v-for="(item, index) in hhobbies" :key="index">
        <input
          type="checkbox"
          name="hobby"
          :value="item"
          v-model="hobby"
        />{{item}}
      </label>

      <div>你的选择为：{{ hobby}}</div>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          hhobbies: ["肖战", "王一博", "谢怜"],
          hobby: [],
        },
      });
    </script>
  </body>
</html>

输出：
在这里插入图片描述

  • v-model结合select实现单选或者多选：
<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <!-- 单选 -->
      <select name="pinPai" v-model="pinPai">
        <option value="纪梵希">纪梵希</option>
        <option value="YSL">YSL</option>
        <option value="雅诗兰黛">雅诗兰黛</option>
      </select>
      <div>你的选择为：{{ pinPai }}</div>
      <!-- 多选 按住ctrl键实现多选-->
      <select name="pinPais" v-model="pinPais" multiple>
        <option value="纪梵希">纪梵希</option>
        <option value="YSL">YSL</option>
        <option value="雅诗兰黛">雅诗兰黛</option>
      </select>

      <div>你的选择为：{{ pinPais}}</div>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          pinPai: "纪梵希",
          pinPais: [],
        },
      });
    </script>
  </body>
</html>

输出：
在这里插入图片描述

2.5 计算属性：computed

  • computed
<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!--axios  网络请求-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>原始字符串为：{{message}}</p>
      <p>翻转后的字符串为：{{reversedMessage}}</p>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello",
        },
        computed: {
          //计算属性的getter
          reversedMessage: function () {
            return this.message.split("").reverse().join();
          },
        },
      });
    </script>
  </body>
</html>

输出：
在这里插入图片描述

2.6 监听属性:watch

<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>计数器：{{count}}</p>
      <button @click="count++">点击计数</button>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          count: 1,
        },
        watch: {
          count: function (newvalue, oldValue) {
            this.count = newvalue;
            // alert("原值：" + oldValue + "新值：" + newvalue);
          },
        },
      });
    </script>
  </body>
</html>

2.7 样式绑定: v-bind

Vue - v-bind

v-bind 指令用于动态绑定 HTML 属性和组件属性。通过 v-bind 指令，可以将 Vue 实例中的数据动态地绑定到 HTML 元素的属性上，从而实现数据的动态更新和响应式渲染。

2.7.1 使用v-bind指令:

<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <img v-bind:src="img" alt="Image" />
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          img: "search.png",
        },
      });
    </script>
  </body>
</html>

输出：

在这里插入图片描述

  • v-bind语法糖（简写）
 <img :src="img" alt="Image" />

2.7.2 v-bind动态绑定class

  • 基本使用:
<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <h1 :class="className">标题</h1> -->
      <h1 :class="className">标题</h1>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          className: "active",
        },
      });
    </script>
  </body>
</html>
  • class动态绑定 ( 对象语法 )

对象语法有下面这些用法

（1）直接通过{ }绑定一个类 : <h2 :class="{'active': isActive}">Hello World</h2>
（2）可以通过判断, 传入多个值 : <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
（3）和普通的类同时存在 : <h2 class="title" :class="{'active': isActive}">Hello World</h2>

对象里面的参数是以键值对形式存在的.
键为类名, 值为布尔值.
当值为true的时候, 这个类就会被添加到标签上面

<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <h1 :class="className">标题</h1> -->
      <h1 :class="{active: isActive}">动态绑定</h1>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          isActive: false,
        },
      });
    </script>
  </body>
</html>

isActive为true时候h1的颜色为red

  • 示例：点击实现字体变色：
<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1 :class="{active:isActive}">标题</h1>
      <button v-on:click="btnClick">点击变换颜色</button>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          isActive: true,
        },
        methods: {
          btnClick: function () {
            this.isActive = !this.isActive;
          },
        },
      });
    </script>
  </body>
</html>
  • 把class的对象提取为一个方法并调用：
<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1 :class="getClasses()">标题</h1>
      <button v-on:click="btnClick">点击变换颜色</button>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          isActive: true,
        },
        methods: {
          getClasses: function () {
            return { active: this.isActive };
          },
          btnClick: function () {
            this.isActive = !this.isActive;
          },
        },
      });
    </script>
  </body>
</html>
  • class动态绑定 ( 数组语法 )：
<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <li
          v-for="(item, index) in items"
          :class="{active:index==currentIndex}"
          v-on:click="setIndex(index)"
        >
          {{item}}
        </li>
      </ul>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          currentIndex: 0,
          items: ["大话西游1", "大话西游2", "大话西游3"],
        },
        methods: {
          setIndex: function (index) {
            this.currentIndex = index;
          },
        },
      });
    </script>
  </body>
</html>
  • v-bind动态绑定style
    语法：
<h2 :style="{key(属性名): value(属性值)}"></h2>

<!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>
    <!-- 开发版本 -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1 :style="{'font-size': '50px'}">标题1</h1>
      <h1 :style="{'font-size': size}">标题2</h1>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          size: "100px",
        },
      });
    </script>
  </body>
</html>

输出：

在这里插入图片描述

文阿花
关注
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
【Vue】——组件的注册与引用
最新发布
shsjssnn的博客
06-08 835
(一)理解vue3.0中的选项式API与组合式API； (二)理解组件的生命周期函数； (三)掌握工程化vue项目中组件的注册与引用；
vue学习总结
写代码的女生酷不酷
04-28 2481
vue学习总结 事件的触发和监听(emit，on) 它们是父子组件的时候，可以直接在父组件上绑定事件，然后子组件触发的时候，就可以被监听到。 注意，这里是用v-on 绑定在引用的子组件标签上。然后，你在子组件$.emit(‘changDivText’)就可以触发 父组件里面定义的事件。 他们不是父子组件的时候，就要借用到一个新的实例，来触发和监听事件了。因为什么
引用Vue的方式
walfyywn的博客
09-29 1732
vue 引入
01-Vue-Vue的引入方式
m0_57103348的博客
08-29 1653
vue的引入方式
Vue快速入门：引入、简单使用
toufahuacai的博客
12-12 1996
本篇文章帮助读者快速入门vue，了解vue基本语法格式。如有不妥欢迎大佬指正。
如何在vue项目中引入html页面
热门推荐
qq_45801837的博客
11-18 5万+
在vue项目中引入html页面的两种方法第一种：/static/page.html第二种：通过iframe嵌入 第一种：/static/page.html 在static或public文件夹下，新建html页面，通过/static/page.html或者/page.html即可访问 第二种：通过iframe嵌入 第一种方法不需要新建路由，iframe方法在正常的vue页面中内嵌一个其他的html页面，所以需要正常建立路由。 ...
【前端内容学习】vue的引用，下载，语法
weixin_62697030的博客
11-25 1807
原版本应该是三种使用方式，但是现在vue官网好像已经找不到关于本地下载的内容了1，直接在官网上引用网络CDN文件，注意这种引用方式，要把这一段写在所有使用vue的部分前面2.对于大型文件，例如开发前后端分离程序（手绘组管理系统），使用npm下载我这里使用的应该是的。。。。这样会直接创建一个完整的前端部分，注意，为了后面不被卡住，我们最好使用一下淘宝镜像在命令行窗口使用指令如果想知道自己是否成功安装镜像，可以用指令验证然后再下载vue。
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
【vue-html】怎么在 VUE 页面中加载外部 HTML
小墨鱼的前端问题录
07-20 4427
指令时需要格外小心，因为它会将字符串中的所有 HTML 代码都渲染为实际的 HTML 内容。这可能会导致跨站脚本（XSS）攻击，因此应该仔细过滤或转义任何动态生成的 HTML 内容。这个指令可以用来将 HTML 字符串渲染为实际的 HTML 内容。库获取外部 HTML 文件的内容，并将其存储在 Vue 实例的。在 Vue 中加载外部 HTML 可以使用。然后，在模板中，我们使用。以下是一个简单的示例，展示如何使用。渲染为实际的 HTML 内容。在这个示例中，我们首先使用。
VUE的引入以及基本使用
qq_58805860的博客
04-05 9918
VUE的简单概述和基本使用方法
Vue 官方周报 #122 - 如何使用Head插件
南城
12-05 1344
Hi 👋本周的问题中，您将学习在Vue中如何使用Head插件。@unhead是一个与框架无关的文档头管理器，您可以使用它来管理页面元数据，如 Vue应用程序中的标题。它用于Nuxt核心，是UnJS生态系统的一部分。
vue项目建立一个head组件-vue项目初见存储笔记
myqdhi的博客
01-05 2149
一.vue环境搭建  过程中遇到的问题 （1）在使用cmd命令的时候  打开本地磁盘  F:\test 文件夹命令记录 F: cd test 在环境搭建中不熟悉命令操作,这个地方容易成为一个越不过的坎！ 二.使用开发工具 VSCODE 需要安装所需扩展 大概8,9的样子， 三.完成vue搭建，开始建立head组件 1.在src->components文件中建立pu
Vue中引入HTML静态资源文件（包含数据的传递）（html大屏）
weixin_49376462的博客
07-29 1万+
Vue中引入HTML静态资源文件（包含数据的传递），引入可视化大屏并出传递数据。
推荐使用：Vue Use Head（现更名为Unhead）- 现代化的文档头管理解决方案
gitblog_00087的博客
05-16 827
推荐使用：Vue Use Head（现更名为Unhead）- 现代化的文档头管理解决方案 项目地址:https://gitcode.com/gh_mirrors/hea/head @vueuse/head 这个强大的Vue插件已经被重命名为@unhead/vue，并被纳入了更广阔的Unhead框架中。它是一个跨框架的文档头管理工具，以其优秀的开发体验和性能而受到业界的广泛赞誉。由著名开发者egoi...
Vue3中SEO优化实践：利用unhead vue插件设置Mate标签
qq_46083602的博客
04-29 668
我们在构建Vue3项目时，搜索引擎优化（SEO）是一个不可忽视的重要方面。优化网站结构、内容和代码，使其更符合搜索引擎的排名规则，对于提升网站曝光度和吸引更多用户至关重要。其中，设置合适的Mate标签（如标题、描述和关键词）是SEO优化的关键步骤之一。在Vue3项目中，我们可以利用unhead插件来轻松实现Mate标签的设置，从而提升网站的SEO效果。
Vue学习笔记：核心概念与生命周期解析
"个人学习vue笔记，包含作者在学习和工作中整理的重要知识点，涵盖vue的指令、生命周期、计算属性等内容" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。以下是对标题和描述中提及知识点的详细说明： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值