[Vue]的快速上手

[Vue]的快速上手

文章目录

博客主页: He guolin-CSDN博客

关注我一起学习,一起进步,一起探索编程的无限可能吧!让我们一起努力,一起成长!
嗨!收到一张超美的图, 愿你每天都能顺心!

Vue是什么

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

构建用户界面:基于数据渲染出用户的页面

下面是代码的数据,而我们构建用户界面需要做的就是将它转化成用户可视化的视图。

js 复制代码
title:'清仓大促'
products:[
    {id:1,name:'手机',price:'1999元'},
    {id:2,name:'平板',price:'2999元'},
    {id:3,name:'电脑',price:'3999元'}
]

渐进式:循序渐进

Vue的两种使用方法:

1.Vue核心包开发

场景:局部 模块改造

2.Vue核心包&Vue插件工程化开发

场景:整站开发

框架:一套完整的项目解决方案

优点:大大提升开发效率 (70%)

缺点:需要理解记忆规则->官网

创建vue实例,初始化渲染

步骤如下:

引包的官网:
Vue2官网https://v2.cn.vuejs.org/

点击起步,计入安装界面

那么接下来按上述四部来简单写一个vue代码

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.添加配置项 => 完成渲染
     -->
    <div id="app">
        <!-- 这里编写一些用于渲染的代码逻辑 -->
         {{msg}}
    </div>

    <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    <script>
        //一旦引入VueJS核心包,在全局环境,就有了Vue构造函数
        const app = new Vue({
            //通过el配置选择器,指定Vue管理的是那个盒子
            el:'#app',
            data:{
                msg:'Hello He guolin'
            }
        });


    </script>
</body>
</html>

可以看见我们成功渲染出来了

插值表达式

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

上面的代码对data里的msg就用来插值表达式。
1.作用 :利用表达式进行插值,渲染到页面中

表达式:是可以被求值的代码,Js引擎会将其计算出一个结果
2.语法 :{{表达式}}
3.注意点

(1)使用的数据必须存在(data)

(2)支持的是表达式,而非语句,比如if for等都是不可以的。

(3)不能在标签属性中使用{{}}插值。

在div盒子里面我们可以这么写插值表达式

html 复制代码
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<p>{{msg + '你好'}}</p>

Vue的响应式特性

其实除了基本的模板渲染,Vue背后还做了大量工作。

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

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

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

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

我们在上述代码中举两个例子

这样视图界面会自动更新。

开发者工具

安装Vue开发者工具:装插件调试Vue应用

(1)通过谷歌应用商店安装(国外网站)

(2)极简插件:下载->开发者模式->拖拽安装->插件详情允许访问文件
极简插件https://chrome.zzzmh.cn/index
下载6.5.0的这个版本

下载安装解压缩,找到.crx文件,里面有安装说明,可以仔细观看。

打开chrome的扩展程序,将文件拖进去

安装好后,允许文件访问地址要打开。

此时重新打开的我们的chrome,可以看到最后一栏有个vue

在这里调试会比我们的控制台调试更加方便。

结语

本次分享就到这里了,感谢小伙伴的浏览,如果有什么建议,欢迎在评论区留言,如果给小伙伴们带来了一些收获,请留下你的小赞,你的点赞和关注将会成为博主分享每日学习的动力。

相关推荐
沉迷...6 分钟前
el-input限制输入只能是数字 限制input只能输入数字
开发语言·前端·elementui
xx240613 分钟前
date-picker组件的shortcuts为什么不能配置在vue的data的return中
前端·javascript·vue.js
古时的风筝21 分钟前
Caddy 比Nginx 还优秀吗
前端·后端·程序员
Anlici27 分钟前
无脑字节面基🥲
前端·面试·架构
古时的风筝30 分钟前
Cursor 建议搭配 CursorRules 食用
前端·后端·cursor
前端南玖31 分钟前
通过performance面板验证浏览器资源加载与渲染机制
前端·面试·浏览器
树深遇鹿35 分钟前
SSE(Server-Sent Events)的使用
前端·javascript·面试
代码哈士奇38 分钟前
记录一次无界微前端的简单使用
前端
用户20311966009642 分钟前
clipped的基本用法
前端