初识Vue

目录

Vue是什么

创建一个Vue实例

插值表达式

响应式特性


Vue是什么

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

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

渐进式:循序渐进的学习

框架:一套完整的项目解决方案,提升开发效率个(理解记忆规则)

规则 ---> 官网

创建一个Vue实例

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

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

  1. 准备容器

2.引包(官网)-开发版本

网址:安装 --- Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

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中的数据,最终会被添加到实例上。

  1. 访问数据 :" 实例.属性名 "

  2. 修改数据:"实例.属性名" = ''值'

相关推荐
Javian5 小时前
浅谈前端工程化理解
前端
艾小码5 小时前
新人必看!3天啃下大型前端项目,我是这样做到的
前端
袁煦丞5 小时前
宝塔FTP远程文件管理+安全防护:cpolar内网穿透实验室第417个成功挑战
前端·程序员·远程工作
三十_5 小时前
【NestJS】构建可复用的数据存储模块 - 动态模块
前端·后端·nestjs
干就完了15 小时前
js数组方法,其实也就这么多东西,一篇全搞懂
前端·javascript
JIE_5 小时前
【Hero动画】用一个指令实现Vue跨路由/组件动画
前端
aidingni8885 小时前
Comet浏览器不为人知的故事
前端·javascript
Cache技术分享5 小时前
182. Java 包 - 创建和使用 Java 包
前端·后端
libokaifa5 小时前
C++ 基础学习
前端·架构·github