[Vue]的快速上手

$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/vue@2.7.16/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

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

结语

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

[Vue]的快速上手