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

初识Vue

news 2025/9/10 9:04:51

Vue是什么

创建一个Vue实例

插值表达式

响应式特性

Vue是什么

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

构建用户界：基于数据动态渲染页面

渐进式：循序渐进的学习
框架：一套完整的项目解决方案，提升开发效率个（理解记忆规则）
规则 ---> 官网

创建一个Vue实例

构建用户界面 ---> 创建Vue实例初始化渲染 -----> 核心步骤 4步：

1.准备容器 2.引包（官网）-开发版本 3.创建Vue实例 new Vue（）4.指定配置项 ----> 渲染数据

准备容器

<!--  1.准备容器（Vue所管理的范围）-->
<div id="app"><!-- 编写用于渲染的代码逻辑 --><div>

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

网址：安装 — Vue.js

3.创建Vue实例 new Vue（）

   //一旦引入VueJs核心包，在全局环境，就有了Vue构造函数const app = new vue({})

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

el ：指定挂载点

data：提供数据

<div id="app"><!-- 编写用于渲染的代码逻辑 -->// 插值表达式{{msg}}
<div>
<script>//一旦引入VueJs核心包，在全局环境，就有了Vue构造函数const app = new vue({//通过 el  选择器指定vue管理的盒子el:'#app' ,//通过data提供数据data:{msg:'hello vue'}})  
</script>

总和示例：

<!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.创建实例4.添加配置项=>完成渲染--> 
<!--  1.准备容器（Vue所管理的范围）-->
<div id="app"><!-- 编写用于渲染的代码逻辑 --><!--  插值表达式 -->{{msg}}<h1>{{head}}</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' ,head :'day' }})  
</script>
</body>
</html>

插值表达式

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

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

表达式：是可以被求值的代码，js引擎会计算出一个结果

表达式举例：

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

<h3>{{ nickname }} </h3>
<p>{{ nickname.toUpperCase() }}</p>
<p>{{age >= 18 ? '成年' : '未成年' }}</p>
<p>{{ obj.name}}</p>

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><!-- 插值表达式：Vue的一种模板语法作用：利用表达式进行插值渲染语法：{{表达式}}注意点：1.使用的数据要存在2.支持表达式，不支持语句   if for3.不能在标签属性中使用{{  }}-->
<div id="app"><h3>{{ nickname }} </h3><p>{{ nickname.toUpperCase() }}</p><p>{{age >= 18 ? '成年' : '未成年' }}</p><p>{{ obj.name }}</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:'hello' ,age:18,obj:{name:'张三'}}})
</script></body>
</html>