VUE 2 与vue3

阿卉鸭

已于 2024-04-08 01:06:25 修改

阅读量145

点赞数 8

文章标签： vue.js 前端

于 2024-04-08 00:43:46 首次发布

本文链接：https://blog.csdn.net/m0_72410887/article/details/137482740

版权

本文介绍了Vue框架的概念，包括其在构建用户界面、声明式渲染、组件系统、路由管理和状态管理方面的应用。详细讲解了如何通过核心包创建Vue实例，设置配置项，以及使用插值表达式和响应式特性来实现数据的动态更新。

摘要由CSDN通过智能技术生成

vue概念

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

构建用户界面：基于用户动态渲染画面的

vue相关的语法声明式渲染组件系统客户端路由(VueRouter)

大规模状态管理(Vuex) 建构工具（webpack/Vite）

vue使用方式

核心包开发用于局部模块改造
Vue核心包 & Vue 插件用于整站开发

创建Vue实例

核心四步

准备容器
引包（官网）开发版本 /生产版本
创建Vue实例 new vue（）
指定配置项 --->渲染数据

el 指定挂载点
date 提供数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建Vue实例</title>
</head>
<body>
<!---核心四步

1.准备容器
2.引包（官网）开发版本  /生产版本
3.创建Vue实例   new vue（）
4.指定配置项  渲染数据
    el      指定挂载点   
    date  提供数据

--->

<!--1.准备容器-->
<div id="app">
    <!--编写用于渲染的代码逻辑-->
    <h1>{{msg}}</h1>
    <a href="#">{{count}}</a>
</div>

<!--2.引包-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    const app = new Vue({//3.创建Vue实例
        //4.指定配置项  渲染数据
        //通过el配置选选择器   指定Vue管理的是那个盒子
        el:'#app',
        //通过date提供数据
        data:{
            msg:'hello 你好',
            count:888
        }
    })
</script>


</body>
</html>

插值表达式 {{}}

是一种vue的模板语法

1.作用：利用表达式进行插值，渲染到页面中

2.语法：{{ 表达式}}

vue响应式特征

什么是响应式：数据改变，视图自动更新

使用业务开发专注业务核心逻辑即可

2.如何修改数据或访问数据

date的数据，最终会被添加到实例上去

访问数据： “实例名.属性名”

修改数据：“实例名.属性名=值”

<div id="app">
    <!--编写用于渲染的代码逻辑-->
    <h1>{{msg}}</h1>
</div>

<!--2.引包-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    const app = new Vue({//3.创建Vue实例
        el:'#app',
        data:{
            //响应式数据
            msg:'hello 你好'
        }
    })
</script>