当前位置：首页 > article >正文

Vue2教程001：初识Vue

article 2024/11/18 16:27:41

文章目录

1、初识Vue
- 1.1、Vue2前言
- 1.2、创建Vue实例
- 1.3、插值表达式
- 1.4 Vue响应式特性

1、初识Vue

1.1、Vue2前言

Vue是什么？

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

Vue的两种使用方式：

Vue核心包开发
1. 场景：局部模块改造
Vue核心包&Vue插件工程化开发
1. 场景：整站开发

1.2、创建Vue实例

步骤：

准备容器
引包
创建vue实例
指定配置项->渲染数据
- el指定挂载点
- data提供数据

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    创建Vue实例，初始化渲染
    1、准备容器（Vue所管理的范围）
    2、引包（开发版本和生产版本）
    3、创建实例
    4、添加配置项=》完成渲染
-->
<div id="app">
    <!--这里将来会编写一些用于渲染的代码逻辑-->
    {{msg}}
</div>
<!--引入的是开发版本的包-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    // 一旦引入VueJS核心包，在全局环境下，就有了Vue构造函数
    const app = new Vue({
        // 通过el配置选择器，指定Vue管理的是哪个盒子
        el: '#app',
        // 通过data提供数据
        data: {
            msg: 'Hello Vue2'
        }
    })
</script>
</body>
</html>

1.3、插值表达式

插值表达式{{}}是一种Vue的模板语法。

作用：利用表达式进行插值，渲染到页面中。
语法：{{}}

注意：

使用的数据必须讯在（data）
支持的是表达式，而非语句，比如if、for
<p>{{if}}</p>

不能在标签属性中使用{{}}插值
<p title="{{username}}">我是p标签</p>

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{nickname}}</p>
    <p>{{nickname.toUpperCase()}}</p>
    <p>{{nickname + ' 你好'}}</p>
    <p>{{nickname}}{{age >= 18 ? '成年了' : '未成年'}}</p>
    <p>{{friend.name}}--{{friend.desc}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            nickname: 'tom',
            age: 19,
            friend:{
                name: 'gg',
                desc: '热爱唱跳rap'
            }
        }
    })
</script>
</body>
</html>