vue入门_vue的简介

2401_85124286

于 2024-07-04 23:01:14 发布

阅读量265

点赞数 3

分类专栏：资料搜公宗号文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2401_85124286/article/details/140192197

版权

资料搜公宗号专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

- - vue基础
    - 本地应用
    - 网络应用

vue基础

vue简介

JavaScript框架
简化dom操作
响应式数据驱动

el：挂载点

el用来设置vue实例挂载（管理）的元素
el命中的元素内部（命中的元素及其内部的后代元素）
建议选择id选择器，也可用class 和元素选择器
双标签都支持，除了html和body

data：数据对象

vue中用到的数据定义在data中
data中可以写复杂类型的数据

本地应用

vue指令

v-text：设置标签内容，会替换全部内容，支持表达式，只能解析文本
v-html：设置元素的innerHTML，可以解析html结构
v-on：为元素绑定事件，可以用@代替
v-show：根据表达式的真假，切换元素的显示和隐藏，修改元素的display属性
v-if：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素），当表达式的值为true时，元素存在于dom树中，为false，从dom树中移除。操纵dom树的性能消耗较大，不宜频繁使用
v-bind：设置元素的属性可以使用**：属性**来实现
v-for：根据数据生成列表结构，经常和数组结合使用
v-model：获取和设置表单元素的值（双向数据绑定）

网络应用

vue+axios ：vue结合网络数据开发应用
axios：网络请求库
在这里插入图片描述
基本使用：

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var get = document.querySelector('.get');
        var post = document.querySelector('.post');
        get.addEventListener('click', function () {
            //get请求 三条数据
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
                .then(function (response) {
                    console.log(response);
                }, function (err) {
                    console.log(err);
                })
        })
        post.addEventListener('click', function () {
            //post请求 注册
            axios.post("https://autumnfish.cn/api/user/reg", { username: "vivianlhm" })


### 最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

*   技术要深入到什么程度？

*   做久了技术总要转型管理？

*   我能做什么，我想做什么？

*   **一技之长，就是深耕你的专业技能，你的专业技术。**（重点）

*   独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

*   拥有事业，选择一份使命，带领团队实现它。（创业）

**一技之长分五个层次**

*   栈内技术 - 是指你的前端专业领域技术

*   栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

*   工程经验 - 是建设专业技术体系的“解决方案”

*   带人做事 - 是对团队协作能力的要求

*   业界发声 - 工作经验总结对外分享，与他人交流



> 永远不要放弃一技之长，它值得你长期`信仰持有`。



> 主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

![](https://img-blog.csdnimg.cn/img_convert/44bc3d1e2743a7cf1e94e28026aedf8d.png)