快速上手Vue

目录

概念

创建实例

插值表达式

Vue响应式特性


概念

Vue是一个用于 ++构建用户界面++ 的 ++渐进式++ ++框架++

构建用户界面:基于数据渲染出用户看到的页面

渐进式:Vue相关生态:声明式渲染<组件系统<客户端路由<大规模状态管理<构建工具

Vue的两种使用方式:

①Vue核心包开发

场景:局部模块改造

②Vue核心包&Vue插件 工程化开发

场景:整站开发

Vue 是一种非常适合循序渐进学习和开发的前端框架,无需一次性掌握所有技术,可以根据自己的需求和进度逐步深入学习和应用

框架:一套完整的项目解决方案

优点:开发效率提升

缺点:框架具有一些语法限制,可以去官网获得
Vue相关生态

创建实例

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>001创建一个Vue实例</title>

    <!-- 引入 Vue2 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="box1">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>
    </div>

    <div id="box2">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>
    </div>

    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>

    </div>

    <script>
        const vm = new Vue({
            el: '#app',//该vm实例渲染id="app"的元素
            data: {//在Vue2中使用data 属性来声明响应式数据
                msg: 'Hello Vue',
                count: 666
            }
        })
        console.log(vm)
    </script>
</body>

</html>

​​​​​

插值表达式

作用:利用 表达式 进行插值渲染,将数据渲染于页面中

语法:{{表达式}}

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>002插值表达式</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{nickname}}</p>
        <p>{{nickname.toUpperCase()}}</p>
        <p>{{nickname+'你好'}}</p>
        <p>{{age>=18?'成年':'未成年'}}</p>
        <p>{{friend.name}}</p>
        <p>{{friend.desc}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                nickname: 'tony',
                age: 18,
                friend: {
                    name: 'jepson',
                    desc: '热爱Vue'
                }
            }
        })
    </script>
</body>

</html>

Vue响应式特性

即 数据驱动视图(数据改变,视图会自动更新)

Vue底层监听到数据修改->进行Dom操作,自动更新视图

使用Vue开发,关注业务的核心逻辑,根据业务修改数据即可

data中的数据,被添加到实例上

  1. 访问数据:实例.属性名
  2. 修改数据:实例.属性名=值
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003Vue响应式特性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>

    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                count: 100
            }
        })
        console.log(vm)
    </script>
</body>

</html>
相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试