初识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. 修改数据:"实例.属性名" = ''值'

相关推荐
你的电影很有趣2 小时前
lesson70:jQuery Ajax完全指南:从基础到4.0新特性及现代替代方案引言:jQuery Ajax的时代价值与演进
javascript·ajax·jquery
2503_928411563 小时前
9.26 数据可视化
前端·javascript·信息可视化·html5
我叫唧唧波3 小时前
【打包工具】webpack基础
前端·webpack
知识分享小能手5 小时前
React学习教程,从入门到精通,React 单元测试:语法知识点及使用方法详解(30)
前端·javascript·vue.js·学习·react.js·单元测试·前端框架
Ares-Wang7 小时前
Vue3 》》vite》》TS》》封装 axios ,Promise<T>
vue.js·typescript
PineappleCoder8 小时前
搞定用户登录体验:双 Token 认证(Vue+Koa2)从 0 到 1 实现无感刷新
前端·vue.js·koa
Min;8 小时前
cesium-kit:让 Cesium 开发像写 UI 组件一样简单
javascript·vscode·计算机视觉·3d·几何学·贴图
EveryPossible8 小时前
展示内容框
前端·javascript·css
伊织code9 小时前
WebGoat - 刻意设计的不安全Web应用程序
前端·安全·webgoat
子兮曰9 小时前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js