vue总结

目录

Vue所具有的特点

Vue和HTML是两个不同的概念

Vue基础知识点

---

学习了vue，我的总结如下：

Vue是一款流行的JavaScript框架，用于构建Web界面。Vue使用了MVVM（Model-View-ViewModel）的模式，它将用户界面和数据分离开来，并提供了响应式和组件化的数据绑定机制。

Vue所具有的特点：

1. 轻量级：Vue的核心库只有17KB大小，因此非常轻便，易于学习和使用。

2. 响应式数据绑定：Vue使用双向数据绑定的方式来实现视图与数据的同步更新，当数据发生变化时，视图会立即更新。

3. 组件化：Vue将UI界面分解为独立的、可复用的组件，通过组合不同的组件来构建复杂的用户界面。

4. 模板语法：Vue使用类似HTML的模板语法，使得开发者可以更容易地理解和调试代码。

5. 生态系统丰富：Vue拥有庞大的生态系统，包括各种第三方插件和库，能够满足开发者的各种需求。

Vue是一款功能强大、易学易用、灵活性高的JavaScript框架，适用于构建现代化的Web应用程序和移动应用程序。

Vue和HTML是两个不同的概念

刚开始的时候，我以为vue和html一样，学完之后就看到了它们的差距。

原来Vue和HTML是两个不同的概念。

HTML（超文本标记语言）是一种用于描述网页结构的标记语言。它定义了网页的各种元素和布局，包括标题、段落、列表、表格等。HTML负责描述页面的结构和内容。

而Vue是一款JavaScript框架，用于构建动态的、交互式的Web界面。Vue主要关注于用户界面的开发，它提供了可复用的组件、数据绑定、事件处理等功能，使得开发者可以更方便地管理和操作页面中的数据和交互逻辑。

所以，Vue和HTML有以下几点区别：

1. 功能层面：HTML用于描述网页的结构，而Vue用于构建动态的、交互式的Web界面。

2. 技术层面：HTML是一种标记语言，而Vue是一款JavaScript框架。

3. 数据绑定：Vue支持双向数据绑定，可以实现数据的动态更新和页面的实时响应，而HTML本身不具备数据绑定的功能。

4. 组件化：Vue将UI界面分解为独立的、可复用的组件，使得开发者可以更好地组织和管理代码，而HTML中没有明确的组件化概念。

Vue和HTML在功能和技术层面上存在着明显的区别，Vue可以与HTML结合使用，通过Vue来管理和操作HTML中的元素和数据。

Vue基础知识点

1.创建vue文件实现效果

图片中的值

el：绑定根目录

new Vue：创建一个vue对象

 data: 定义页面中显示的模型数据

 引用data中的数据要使用{{  }}，不然不生效。

Vue的基础语法主要包括以下几个方面：

1.Vue实例：使用Vue创建一个Vue实例，可以通过传入一个选项对象来进行配置和初始化。

2.数据绑定：使用双花括号{{}}或v-bind指令将数据绑定到页面中。

3.条件渲染：使用v-if和v-show指令来根据条件动态显示或隐藏元素。

<div v-if="show">这是一个条件渲染的元素</div>

4.列表渲染：使用v-for指令来遍历数组或对象，动态生成多个元素。

<ul>

  <li v-for="item in items">{{item}}</li>

</ul>

5.事件处理：使用v-on指令来监听DOM事件，并调用Vue实例中的方法。

<button v-on:click="handleClick">点击我</button>

  var vm = new Vue({

   methods: {

     handleClick: function() {

       // 处理逻辑

     }

   }

})

6.计算属性：使用computed属性来计算、缓存和返回一个动态计算的值。

   var vm = new Vue({

     computed: {

       fullName: function() {

         return this.firstName + ' ' + this.lastName

          }

        }

     })

7.监听属性：使用watch属性来监听一个数据的变化，并在变化时触发回调函数。

     var vm = new Vue({

        watch: {

         message: function(newVal, oldVal) {

           // 处理逻辑

       }

      }

  })

以上是Vue的基础语法，这些特性可以帮助开发者构建动态的、交互式的Web界面，并提高开发效率。

作业案例

1.使用vue实现输入年份出是否是闰年

输入2023后确定，提示框输出不是闰年

此案例中使用了三元运算符：

nf%400==0&&nf%100!=0||nf%4==0 ? alert("是闰年"):alert("不是闰年");

使用三元运算符判断是否为闰年，最后使用alert（提示框）输出。

• % 是取模（求余）运算符，用于判断一个数能否被另一个数整除。例如 nf % 400 表示将 nf 除以 400，取余数。
• == 是相等比较运算符，用于判断两个值是否相等。
• != 是不等比较运算符，用于判断两个值是否不相等。
• && 是逻辑与运算符，当两个条件都为真时，结果为真。
• || 是逻辑或运算符，当两个条件中至少有一个为真时，结果为真。

案例2

计算某月的优惠率（有点bug）

使用switch语句判断

case 是一种在编程语言中用于多分支条件的控制结构，通常与switch搭配使用。

图片中的case代表月份。

以上就是我的总结。