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

vue学习第一阶段

article 2025/1/7 4:19:51

vue

在这里插入图片描述

什么是Vue？

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

Vue的两种使用方式

Vue的核心开发场景： ${\color{red}局部}$ 模块改造

Vue核心包& Vue插件工程化开发场景： ${\color{red}整站}$ 开发

Vue2官网

https://v2.cn.vuejs.org/

资料存放地址

D:\BaiduNetdiskDownload\2、最新Vue2+3 入门到实战课程

echarts官网

https://echarts.apache.org/zh/index.html

layui官网

http://layui.xhcen.com/

课件保留地址

D:\BaiduNetdiskDownload\2、最新Vue2+3 入门到实战课程

在这里插入图片描述

一、创建vue实例

在这里插入图片描述

1.创建html

2.引入vue依赖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建一个Vue实例</title>
</head>
<body>
<!--
    创建Vue实例，初始化渲染
    1.准备容器（Vue所有管理的范围）
    2.引包(开发版本包/生产版本包)官网
    3.创建实例
    4.添加配置-》完成渲染
-->
<div id="app">
    <!--这里将来会编写用于渲染的代码逻辑    -->
    <h1>{
  { msg }}</h1>
    <h2>{
  {name}}</h2>
    <h3>{
  {age}}</h3>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 (不可以写成：<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"/>)-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //一旦引入了VueJS核心包，在全局环境下，就有了Vue构造函数
    const app = new Vue({
     
        //通过el配置选择器，指定Vue管理的是哪个盒子
        el: '#app',
        //通过data提供数据
        data: {
     
           msg:'Hello 黑马',
            name: 'lzp',
            age: 18
        }
    });
</script>
</body>
</html>

二、插值表达式

在这里插入图片描述

三、Vue响应特性

在这里插入图片描述

四、Vue指令

语法糖：

1、保留两位小数

在这里插入图片描述

2、document.querySelector(‘p’)

通过标签名选择元素，允许你通过提供一个 CSS 选择器来选择文档中的第一个匹配的元素。这个函数返回匹配的元素（如果找到了匹配项），否则返回 null。document.querySelector 是一个非常有用的方法，因为它让你可以通过多种选择器轻松地选择和操作 DOM 元素。

value.slice(0, 1)，value.slice(1)：截取字符

v-html:设置元素的innerHTML，语法：v-html=“表达式”

v-show：控制元素的显示隐藏， ${\color{red}true:显示，false：隐藏}$ ，底层原理切换css的display：none来控制显示隐藏，使用场景，频繁切换显示隐藏的场景

v-if：控制元素的显示隐藏（条件渲染 ${\color{red}true:显示，false：隐藏}$