快速上手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>
相关推荐
10年前端老司机26 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js