初识Vue

最新推荐文章于 2024-11-07 19:48:34 发布

NHuan^_^

最新推荐文章于 2024-11-07 19:48:34 发布

阅读量623

点赞数 14

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_80093566/article/details/140407193

版权

文章目录

初识Vue
Vue快速上手

初识Vue

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

构建用户界面：基于数据动态渲染页面
渐进式：循序渐进的学习，学习了局部知识可以进行页面的局部开发，学完整套知识可以进行完整开发
框架：一套完整的项目解决方案，提升开发效率（理解记忆规则）规则 ->官网

Vue快速上手

一、创建Vue实例，初始化渲染

核心步骤：

1.准备容器（Vue所管理的范围）

<div id = "app">
	<!-- 这里将来会编写一些用于渲染的代码逻辑 -->
</div>

2.引包（官网）- 开发版本/生产版本

v2官网：https://v2.cn.vuejs.org
v3官网：https://cn.vuejs.org
进入官网->起步->安装->直接用

// 也可以不用下载，可以引入在线链接（开发版本），包含完整的注释和警告
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

3.创建Vue实例 new Vue（）

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

4.指定配置型 -> 渲染数据

①el指定挂载点（指定Vue管理的是哪个盒子）

el: '#app'

②data提供数据

data: {
    	msg: 'Hello Vue!'
		}

5.示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 
        创建Vue实例，初始化渲染
        1.准备容器（Vue所管理的区域）
        2.引包
        3.创建Vue实例
        4.添加配置项，完成渲染
    -->

    <div id="app">
        <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
        <h1>{{msg}}</h1>
    </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 Vue!'
            }
        })
    </script>

</body>

</html>

二、插值表达式

### 1.介绍插值表达式是一种vue的模板语法 #### ①作用利用表达式进行插值，渲染到页面中。而表达式就是可以被求值的代码，JS引擎会将其计算出一个结果。 #### ②语法 {{ 表达式 }} ```

``` #### ③注意点

使用的数据必须存在（数据必须被定义）

// 错误示例，其中，变量a并没有被定义，即a不存在
<p>{{ a }}</p>

支持的是表达式，而非语句，比如：if for …

// 错误示例
<p>{{ if }}</p>

不能在标签属性中使用{{ }}进行插值

// 错误示例
<p title = "{{ name }}">我是p标签</p>

2.示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</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 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: {
                nickname: 'tony',
                age: 18,
                friend: {
                    name: 'baobo',
                    desc: '热爱学习'
                }
            }
        })
    </script>

</body>

</html>

运行结果：

三、Vue核心特性：响应式

1.介绍

数据的响应式处理：数据变化，视图自动更新。

2.通过响应式特性来访问和修改数据

由于data中的数据最终会被添加到实例上，所以访问数据和修改数据可操作实例进行引用。即
①访问数据：“实例.属性名”
②修改数据：“实例.属性名” = “值”

3.示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <!-- 编写一些用于渲染的代码逻辑 -->
        <h1>{{msg}}</h1>
    </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 Vue!'
            }
        })
    </script>

</body>
</html>