[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

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

结语

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

相关推荐
酷酷的名字2 分钟前
初识Docker,入门篇及实战操作
前端·后端
谎言西西里3 分钟前
🤔 还在为跨域问题头疼?JSONP 是你的答案!
前端
AndyGoWei6 分钟前
什么时候fixed定位不会相对于视口,看这篇文章就够了
前端·javascript
10年前端老司机6 分钟前
高级前端需要会的手写响应式原理(reactive, effect,依赖收集,依赖触发)
前端·javascript·vue.js
SoaringHeart9 分钟前
Flutter进阶:日志信息的快速定位解决方案 DLog
前端·flutter
Ariel_提拉米苏13 分钟前
将页面导出为PDF
前端·javascript·vue.js·pdf
Canace17 分钟前
用 Cursor 提高工作效率实战笔记
前端·cursor·mcp
水煮白菜王18 分钟前
如何实现高性能的在线 PDF 预览
前端·性能优化·pdf
coding随想20 分钟前
scss报错Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0
前端·node.js·sass·scss
庸俗今天不摸鱼35 分钟前
【万字总结】前端全方位性能优化指南(八)——Webpack 6调优、模块联邦升级、Tree Shaking突破
前端·webpack·性能优化