vue基础

目录

一、简单认识Vue

  • Vue是一个渐进式框架：

  • Vue有很多特点和高级特性

    • 解耦视图和数据

    • 可复用的组件

    • 前端路由技术

    • 状态管理

    • 虚拟DOM

  • 安装：

    • 方式一：直接CDN引入
      • 选择开发版本或者是生产版本
<!-- 开发版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script>
  <!-- 生产版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdeliver.net/npm/vue"></script>
  • 方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js

生产环境 https://vuejs.org/js/vue.min/js

  • 方式三：NPM安装

后续通过webpack和CLI的使用，我们使用该方式。

二、使用vue

es6中定义变量let，定义常量const。

1、vue初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 创建元素 -->
<div id="app">{{message}}</div>
 
<script src="../js/vue.js"></script>
<script>
    // 变成范式:声明式编程   好处:界面数据分离
    const app = new Vue({
        el:'#app',   // 挂载元素，由Vue管理这个元素
        data:{
            message:"你好！世界！"
        }
    })
 
    // 原始js的做法
    // 1.创建div元素,设置id属性
    // 2.定义一个变量叫message
    // 3.将message变量放在前面的div元素中显示
</script>
 
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<div id="app">
  <ul>
    <li v-for="item in movies">{{item}}</li>
  </ul>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el : '#app',
    data : {
      movies:['星际穿越', '大话西游', '少年派', '盗梦空间']
    }
  })
</script>
 
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<div id="app">
  <h2>当前计数:{{counter}}</h2>
  <!--<button v-on:click="counter++">+</button>
  <button v-on:click="counter&#45;&#45;">-</button>-->
  <button v-on:click="add">+</button>
  <button v-on:click="sub">-</button>
  <!-- 语法糖:简写@click是v-on:click的简写 -->
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      counter:0
    },
    methods:{
      add: function(){
        this.counter++;
        console.log("add被执行");
      },
      sub: function(){
        this.counter--;
        console.log("sub被执行");
      }
    }
  })
</script>
 
</body>
</html>

2、vue中的MVVM

model viewmodel view

3、创建vue实例传入的options

  • el：

    • 类型：string|HTMLElement
    • 作用：决定之后Vue实例会管理哪一个DOM

  • data:

    • 类型：Object|Function（组件当中，data必须是一个函数）
    • 作用：Vue实例对象的数据对象

  • methods：

    • 类型：{[key:string]:Function}（后面会用ES6的写法）

    • 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

4、vue的生命周期

生命周期：主要包括生命周期过程中执行的一些函数，可以进行回调

  • beforeCreate：

  • created：一般在这个时候进行一些网络数据的请求，将数据渲染到data中去。

  • mounted：

三、vue的小问题

vue在进行渲染DOM的时候，出于性能的考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

vue在切换input过程时，会发现原来的input不再使用，直接作为切换后的input来使用了。

解决办法：

加上key属性，保证两个input不是同一个input。

posted @   coderElian  阅读(34)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
点击右上角即可分享
微信分享提示