Vue学习笔记

最新推荐文章于 2022-09-21 12:03:31 发布
最新推荐文章于 2022-09-21 12:03:31 发布
阅读量175 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Eimhin_Tang/article/details/109488170
版权
本文深入探讨Vue前端核心技术，包括MVVM模式、Vue基本语法如v-bind、v-if、v-for，Vue组件、事件绑定及双向数据绑定。同时，介绍了前端发展史，从MVC到SPA，再到全栈时代的NodeJS。还涵盖了Vue CLI的使用，以及Axios在Vue中的应用。
摘要由CSDN通过智能技术生成

1、前端核心分析

Soc原则(关注度分离原则)：

HTML + CSS + JS：视图：给用户看，刷新后台给的数据

网络通信：aniox

页面跳转：vue-router

状态管理：vuex

Vue-UI：飞冰

webpack打包(类似Maven)：let->var

MVVM：VM(数据双向绑定)

虚拟DOM：利用内存

JavaScript框架

  • JQuery
  • Angular
  • React
  • Vue
  • Axios

UI框架

  • Ant-Design
  • ElementUI、ivew、ice
  • Bootstrap
  • AmazeUI

JavaScript构建工具

  • Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
  • WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载

后端技术 NodeJS

  • Express：NodeJS框架
  • Koa：Express简化版
  • NPM：项目综合管理工具，类似于Maven
  • YARN：NPM的替代方案，类似于Maven和Gradle

2、前端发展史

后端为主的MVC时代

以后端Struts，Spring MVC等框架的使用为出发点

缺点：

  • 开发效率低
  • 前后端职责纠缠不清

基于AJAX的SPA时代

优点：

  • 前后端的分工非常清晰，前后端的关键协作点是AJAX接口。

  • 但是这与JSP时代区别不大，复杂度从服务端的JSP里移到了浏览器的JavaScript。这个时代开始出现浏览器端的分层架构

缺点：

  • 前后端接口的约定
  • 前端开发的复杂度控制

前端为主的MV*时代

此处的MV*模式如下：

  • MVC(同步通信为主): Model, View, Controller
  • MVP(异步通信为主): Model, View, Presenter
  • MVVM(异步通信为主): Model, View, ViewModel

优点：

  • 前后端职责很清晰
  • 前端开发的复杂度可控
  • 部署相对独立

缺点：

  • 代码不能复用，比如后端依旧需要对数据做各种校验，校验逻辑无法复用浏览器端的代码。如果可以复用，那么后端的数据校验可以相对简单化。
  • 全异步，对SEO不利。往往还需要服务端做同步渲染的降级方案
  • 性能并非最佳，特别是互联网环境下
  • SPA不能满足所有需求，依旧存在大量多页面应用。URL Design需要后端配合，前端无法完全掌握。

NodeJS带来的全栈时代

随着NodeJS的兴起，JavaScript开始有能力运行在服务端。这意味着可以有一种新的研发模式。

3、第一个Vue程序

<body>
    <div id="app">
        {{message}}
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello, vue"
            }
        });
    </script>
</body>

4、Vue基本语法 绑定元素,条件,循环

v-bind

可以用v-bind来绑定元素特性

<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </span>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello, vue"
        }
    });
</script>

v-bind 等被称为指令。指令带有前缀v-

v-bind: 将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致

if

<body>
<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
    
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            ok: false,
            type: 'A'
        }
    });
</script>
</body>

for

<div id="app">
    <li v-for="item in items">
        {{item.name}}
    </li>
    
    <li v-for="(item, index) in items">
        {{index}}--{{item.name}}
    </li>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {name: "tyx1"},
                {name: "tyx2"},
                {name: "tyx3"}
            ]
        }
    });
</script>

5、Vue绑定事件

<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "tyx"
        },
        methods: {   // 方法必须定义在Vue的method对象中, v-on: 事件
            sayHi: function () {
                alert(this.message)
            }
        }
    });
</script>

6、Vue双向绑定

什么是双向数据绑定

当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

在表单中使用双向数据绑定

可以用v-model指令在表单<input>、<textarea>、select元素上创建双向数据绑定。它会根据类型自动选取正确的方法来更新元素。

注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。

<div id="app">
    输入的文本:<input type="text" v-model="message">{{message}}
    <br/>

    <textarea v-model="message"></textarea>
    {{message}}
    <br/>

    <input type="radio" name="sex" value="男" v-model="sex"/>男
    <input type="radio" name="sex" value="女" v-model="sex"/>女
    选中了{{sex}}
    <br/>

    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    {{selected}}
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: 123,
            sex: '',
            selected: ''
        }
    });
</script>

注意：如果v-model表达式的初始值未能匹配任何选项，元素将被渲染为’未选中’状态。在IOS中，这会使用户无法选择第一个选项。因为这样的情况下，IOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

7、Vue组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模版，跟JSTL的自定义标签、Thymeleaf的th:fragment等框架有这异曲同工之妙。通常一个应用会以一颗嵌套的组件树的形式来组织。

<div id="app">
    <tangyixing></tangyixing>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    // 定义一个Vue组件component
    Vue.component("tangyixing", {
        template: '<li>Hello</li>\n'
    });

    var vm = new Vue({
        el: "#app"
    });
</script>

<div id="app">
    <tangyixing v-for="item in items" v-bind:tang="item"></tangyixing>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    // 定义一个Vue组件component
    Vue.component("tangyixing", {
        props: ['tang'],
        template: '<li>{{tang}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            items: ["Java", "Linux", "前端"]
        }
    });
</script>
</body>

8、Axios

Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用就是实现AJAX异步通信。

第一个Axios应用程序

  1. 创建模拟一个名为data.json的文件放入项目的根目录下
{
  "name": "唐毅兴",
  "url": "https//www.tangyixing.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "春建乡",
    "city": "杭州",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com"
    },
    {
      "name": "淘宝",
      "url": "https://www.taobao.com"
    }
  ]
}
  1. 建议在mounted钩子函数中实现AJAX
<div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <div>{{info.address.city}}</div>
    <div>{{info.address.country}}</div>
    <div v-for="item in info.links">{{item.name}} {{item.url}}</div>
    <a v-bind:href="info.links[0].url">{{info.links[0].name}}</a>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#vue",
        // 是data()方法不是data属性, return来接收mounted返回的数据
        data() {
            return {
                // 请求的返回参数格式必须和json字符串一样
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    links: []
                }
            }
        },
        // 钩子函数，链式编程
        mounted() {
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>

获取实时公交demo

<div id="app">
    <div v-for="item in info.items">{{item}}</div>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                info: {
                    items: []
                }
            };
        },
        mounted() {
            axios.get("https://app.ibuscloud.com/v1/bus/getBusPositionByRouteId?city=330100&h5Platform=6&userLng=120.19&userLat=30.26&routeId=1001002489").then(response=>(this.info=response.data));
        }
    });
</script>

9、计算属性

计算出来的结果保存在属性中，内存中运行：虚拟DOM

计算属性的重点突出在属性两个字上，首先它是个属性，其次这个属性有计算的能力，这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性，可以想象为缓存。

<body>
<div id="app">
    <p>currentTime1 {{currentTime1()}}</p>
    <p>currentTime2 {{currentTime2}}</p>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello, tanyixing"
        },
        methods: {
            currentTime1: function () {
                return Date.now(); // 返回一个时间戳
            }
        },
        computed: { //计算属性: methods, computed中的方法名不能重名, 重名之后只会调用methods中的方法
            currentTime2: function () {
                this.message;
                return Date.now(); // 返回一个时间戳
            }
        }
    });
</script>
</body>

10、插槽slot

在Vue.js中我们使用<slot>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中。

<body>
<div id="app">
<!--    <p>列表书籍</p>-->
<!--    <ul>-->
<!--        <li>Java</li>-->
<!--        <li>Linux</li>-->
<!--        <li>Python</li>-->
<!--    </ul>-->
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    //slot:插槽
    Vue.component("todo", {
        template: '<div>\
            <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    });
    Vue.component("todo-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: "书籍列表",
            todoItems: ['Java', '前端', 'Linux']
        }
    });
</script>
</body>

11、自定义事件内容分发

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                    :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    //slot:插槽
    Vue.component("todo", {
        template: '<div>\
            <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    });
    Vue.component("todo-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item', 'index'],
        // 只能绑定当前组件的方法
        template: '<li>{{index}}  {{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                // this.$emit 自定义事件分发
                this.$emit('remove', index);
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: "书籍列表",
            todoItems: ['Java', '前端', 'Linux']
        },
        methods: {
            removeItems: function (index) {
                console.log("删除了" + this.todoItems[index] + "ok")
                this.todoItems.splice(index, 1);    //一次删除一个元素
            }
        }
    });
</script>

12、第一个vue-cli程序

  1. 安装Node.js

    http://nodejs.cn/download/

    Windows 安装包 64位

    确认Node.js安装成功: node -v, npm-v

  2. 安装Node.js淘宝镜像

    # -g就是全局安装
npm install cnpm -g
# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

  3. 安装vue-cli

    cnpm install vue-cli -g
# 测试是否安装成功
# 查看可以基于哪些模版创建vue应用程序, 通常我们选择webpack
vue list

  4. cd进入相关文件夹，创建初始化项目

    vue init webpack myvue
檀雨溪Ising
关注
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue 学习笔记
weixin_43971312的博客
05-22 2297
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
vue+axios
qq_48236096的博客
07-01 117
这样作用是把10张图都存放在了数组里，让index改变的时候，图就会随着index的改变而改变， v-bind是可以取出我们自己定义的vue里边的值 也可以用：。 v-if的用法是 如果是判断条件成立 显示 ，不成立就不显示东西 2.笔记本 3.aniox get和post请求 ...
vue学习笔记
weixin_42765975的博客
09-21 1016
/1.想要vue工作必须new一个vue对象出来，容器依旧符合html模板规范，只是加入了一些vue的语法例如双括号{{}},//5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。//7.指令语法包括v-bind:,v-if:等等，他可以用于解析标签体内容，标签属性，标签事件等。
alexnet模型-通过CNN卷积神经网络的动漫角色识别-不含数据集图片-含逐行注释和说明文档.zip
最新发布
11-07
本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 首先是代码的整体介绍 总共是3个py文件，十分的简便 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集 运行02CNN训练数据集.py,会自动读取txt文本内的内容进行训练，这里是适配了数据集的分类文件夹个数，即使增加了分类文件夹，也不需要修改代码即可训练 训练过程中会有训练进度条，可以查看大概训练的时长,每个epoch训练完后会显示准确率和损失值 训练结束后，会保存log日志，记录每个epoch的准确率和损失值 最后训练的模型会保存在本地名称为model.ckpt 运行03pyqt界面.py，就可以实现自己训练好的模型去识别图片了
电商购物网站 SSM毕业设计 附带论文.zip
11-07
电商购物网站 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
题目源码2024年强网杯全国网络安全挑战赛 Pwn题目chat-with-me源码
11-07
强网杯
mobilenet模型-基于深度学习AI算法对建筑装饰风格识别-不含数据集图片-含逐行注释和说明文档.zip
11-07
本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 首先是代码的整体介绍 总共是3个py文件，十分的简便 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集 运行02CNN训练数据集.py,会自动读取txt文本内的内容进行训练，这里是适配了数据集的分类文件夹个数，即使增加了分类文件夹，也不需要修改代码即可训练 训练过程中会有训练进度条，可以查看大概训练的时长,每个epoch训练完后会显示准确率和损失值 训练结束后，会保存log日志，记录每个epoch的准确率和损失值 最后训练的模型会保存在本地名称为model.ckpt 运行03pyqt界面.py，就可以实现自己训练好的模型去识别图片了
2-数字化转型对企业劳动力就业的影响的研究数据（2001-2021年）.zip
11-07
随着数字技术和企业数字化转型的推进，企业的人力资源管理方式也在不断的变化，尤其是企业数字化转型对劳动力就业产生了深远的影响。 传统制造企业的工作模式一般是人工操作，处于低劳动力成本下的位置，而数字化转型要求企业应用物联网、云计算、大数据等先进技术，提高生产效率和减少人力成本。 数字化转型对企业劳动力就业的影响是多方面的，除替代性影响外，还会给企业带来新的机会，促进员工自我提升和企业人力资源管理意识的提高。本数据的整理让大家能够更清晰了解数字化转型对有关企业劳动力就业的影响。 相关数据指标 企业年龄 ， 资产负债率 ， 流动比率 ， 股权集中度 ， 所有制性质， 总资产收益率， 地区人均GDP
非常好的电子设计小软件GIF2BMP非常好用的软件.zip
11-07
非常好的电子设计小软件GIF2BMP非常好用的软件.zip
学报稿件管理系统 SSM毕业设计 附带论文.zip
11-07
学报稿件管理系统 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
OpenSSL 1.1加密开源库
11-07
OpenSSL 是一个用于实现安全通信的软件包，它由一组密码学函数库组成。它的主要目标是通过使用公开的密码学算法来保护数据的机密性、完整性和身份验证。它支持对称加密、非对称加密、数字签名、证书管理等功能。
文书用电子小印生成器V124
11-07
可以根据需要生成小印章，自己输入文字、选择日期、调整颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值