当前位置: 首页 > news >正文

前端基础之《Vue(1)—简介》

一、vue2特点

1、特点 
(1)MVVM框架
(2)响应式的
(3)支持组件化的(自己封装自定义组件)
(4)丰富的指令(DOM功能的抽象)
(5)基于选项的(templete、data、computed、watch、methods)
    选项:固定的东西放在固定的位置(react没有选项所以更灵活更难)
    react相当于空白的房间,整理东西
    vue相当于有家具的房间,整理东西
(6)vue文档集中(官网都有)
(7)vue生态丰富且简单

二、安装

1、脚手架用npm安装

2、用script引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

例子代码:

<html>
    <title>hello world</title>
    <head></head>
    <body>
        <div id="app">
            <!-- 这个作用域中都是vue的地盘 -->

             <h1 v-text="msg"></h1> <!-- v-text就是指令 -->
             <hr>

             <h1 v-text="num"></h1>
             <button @click="add">vue 增加num</button>
             <hr>

             <h1 id="num2">0</h1>
             <button onclick="addNum()">JS 增加num2</button>
             <hr>

             <h1 v-bind:style="{color: cc}">我是变色龙</h1>
             <button @click="change">变色</button>
             <hr>

             <h1 v-if="show">我是谁</h1>
             <button @click="toggle">显示/隐藏</button>
             <hr>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

        <script>
            console.log("Vue", Vue)

            //这种方式叫单页面应用程序
            const app = new Vue({
                //下面el、data等都是vue官方提供的选项(语法规定)
                el: '#app', //挂载节点,把vue组件(响应式系统)挂载到真实DOM上
                data: { //声明变量的部分
                    msg: 'HelloWorld',
                    num: 1,
                    cc: 'black',
                    show: true
                },
                methods: { //声明方法的部分
                    add() {
                        this.num++ //只要改这个变量就可以了,因为已经绑定了
                    },
                    change() {
                        this.cc = 'red'
                    },
                    toggle() {
                        this.show = !this.show //直接取反就好了
                    }
                }
            })
        </script>

        <script>
            function addNum() {
                var num = document.getElementById("num2").innerText;
                num++;
                document.getElementById("num2").innerText = num;
            }
        </script>
    </body>
</html>

3、效果
(1)F12控制台中会打印vue的构造函数

Vue ƒ Vue(options) {
      if (!(this instanceof Vue)) {
          warn$2('Vue is a constructor and should be called with the `new` keyword');
      }
      this._init(options);
  }

(2)vue做点击事件和js做点击事件比较

<button onclick="addNum()">JS 增加num2</button>

js是添加事件,通过dom选择器选择这个标签,修改text

<button @click="add">vue 增加num</button>

vue是响应式

三、从jquery时代过度到mvvm框架

1、jquery开发思想
DOM开发思想,当我们需要在交互事件中改变视图时,使用DOM选择器选中目标节点,再使用DOM方法直接改变视图

2、vue开发思想
声明式思想,先在data选项中声明一个合适的变量,再在交互事件中改变这个声明式变量即可,视图自动更新。这是一种间接的操作

3、例如改变样式
(1)先声明个变量cc
(2)再通过指令让这个变量和标签绑定
(3)改变cc,视图自动更新

4、渐进式
vue可大可下,可单页面、可做成一个复杂的管理系统

四、选项说明

1、el
挂载节点,把vue组件(响应式系统)挂载到真实DOM上。对于<div id="app">这个作用域中都是vue的地盘。在这个作用域中可以用指令,否则无法识别

2、data
专门用于定义声明式变量,这些声明式变量有什么特点?当声明式变量变化时,它所对应的视图节点自动更新,这就是所谓的响应式

3、methods
专门用于定义函数方法的地方

五、示例代码用到的指令和说明

1、v-text
改变innerText

2、@click和v-on click
相当于addEventListener,绑事件

3、v-bind
动态绑定属性

4、new Vue(...)
构造函数,创建一个Vue的组件,new的Vue要给选项,所以在()内要给一层{}里面放选项

5、v-if
v-if指令的用法和v-show指令的用法相同,都是用来控制DOM元素的显示或隐藏

六、知识源头

1、从官方文档中获取知识点
 

http://www.dtcms.com/a/108725.html

相关文章:

  • 安装 AWS CLI
  • 在汇编层面理解MESI
  • win32汇编环境,网络编程入门之十八
  • 基于CNN-LSTM的深度Q网络(Deep Q-Network,DQN)求解移动机器人路径规划,MATLAB代码
  • RT-Thread 和 FreeRTOS 嵌入式实时操作系统对比
  • 嵌入式学习笔记——ARM
  • 科普:One-Class SVM和SVDD
  • 机器学习的一百个概念(9)学习曲线
  • RK3568下截屏工具weston-screenshooter
  • Oracle数据库数据编程SQL<6.3 获取用户、表名、表中文描述、列名、列中文描述、主键标识等完整信息>
  • 【愚公系列】《高效使用DeepSeek》050-外汇交易辅助
  • 使用typescript实现游戏中的JPS跳点寻路算法
  • C++20 的新工具:std::midpoint 和 std::lerp
  • Keil中关闭宏定义提示方法
  • 【JavaEE进阶】Spring AOP入门
  • OpenCV从零开始:30天掌握图像处理基础
  • DSSD框架
  • 辉视IPTV系统,重构智慧酒店全场景服务新生态
  • Postman参数化设置如何设置?
  • SpringBoot项目瘦身指南:从臃肿到高效的优化实践
  • 深度解析“熵”
  • 每日算法-250403
  • 20.IP协议
  • spring-ai-alibaba第七章阿里dashscope集成RedisChatMemory实现对话记忆
  • 行式、 列式数据库
  • Python | 使用Matplotlib绘制Swarm Plot(蜂群图)
  • 2025 AI智能数字农业研讨会在苏州启幕,科技助农与数据兴业成焦点
  • OpenRouter开源的AI大模型路由工具,统一API调用
  • 【3.软件工程】3.6 W开发模型
  • 【Python算法】双指针算法