初识Vue - 技术栈

Vue是什么

创建一个Vue实例

插值表达式

响应式特性

Vue是什么

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

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

渐进式：循序渐进的学习

框架：一套完整的项目解决方案，提升开发效率个（理解记忆规则）

规则 ---> 官网

创建一个Vue实例

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

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

准备容器

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

网址：安装 --- Vue.js

3.创建Vue实例 new Vue（）

java 复制代码

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

   })

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

el ：指定挂载点

data：提供数据

html 复制代码

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

总和示例：

html 复制代码

<!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.语法：{{ 表达式 }}

html 复制代码

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

3.注意点

表达式 ：表达式是代码的片段，它计算并返回一个值。

核心特征：会产生一个值。

语句：语句是执行操作的指令。它本身不产生值，而是用来组织和控制程序的流程

核心特征：完成一个任务，但不直接产生可用于赋值或传递的值

举例：

html 复制代码

<!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 for
      3.不能在标签属性中使用{{  }}
    -->
<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>

响应式特性

我们已经掌握了基础的模板渲染，其实除了基本的模板渲染，Vue背后还做了大量的工作。

比如：数据的响应式处理 -----> 响应式：数据变化，视图自动更新

如何访问 or 修改? data中的数据，最终会被添加到实例上。

访问数据：" 实例.属性名 "
修改数据："实例.属性名" = ''值'