Vue学习

最新推荐文章于 2022-11-14 16:10:13 发布
最新推荐文章于 2022-11-14 16:10:13 发布
阅读量835 收藏
点赞数
分类专栏： springcloud
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT_Carter/article/details/109384859
版权

Vue

1、Vue概述

Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。x

特点：

  • 只做视图层
  • 网络通信axios
  • 网络跳转：vue-router
  • 状态管理：vuex

2、前端框架

  • JavaScript框架JQuery

  • Angular js:Google收购的前端框架

  • React：facebook出品，一款高性能的JS前端框架，【需要额外学习JSX语言】

  • Vue：一款渐进式JavaScript框架，其特点综合Angular(模块化)和React（虚拟DOM）的优点

  • Axios：前端通信框架；因为Vue的边界很明确，就是为了处理DOM,所以并不具备通信能力

vue-element-admin前端框架熟练

MVVM【异步通信前端】

3、MVVM

Model-View-ModelView—>源于MVC

View：视图层

ViewModel：

  • 连接视图和数据的中间件

  • 能够观察到数据的变化，并对视图类容进行更新

  • 能够监听到视图的变化，并能够通知数据发生改变

3.1 为什么使用MVVM

  • 低耦合
  • 可复用
  • 独立开发
  • 可测试

4、vue程序

idea安装vue.js插件

官网下载vue.js

5、if判断

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>导入vue.js</title>
</head>
<body>
<!--view视图层 模板-->
<div id="app">
    <!--if语句条件判断-->
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>

    <h1 v-bind:title="message">鼠标悬浮显示message</h1>

    <!--if else if else-->
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>

    <!--数组遍历-->
    <h1 v-for="(item,index) in items">
        {{item.msg}}---{{index}}
    </h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model：数据
        data:{
            message: "hello vue",
            ok: true,
            type: 'A',
            items: [
                {msg: 'lsx'},
                {msg: 'carter'},
                {msg: '廖述幸'}
            ]
        }
    });
</script>
</body>
</html>

6、点击事件绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="sayHello">Click me</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--此处的</script>不能省略-->
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "廖述幸"
        },
        methods: {//方法必须定义到Vue 的Method对象中
            sayHello: function (event) {
                alert(this.message);
            }
        }
    });
</script>
</body>
</html>

7、双向绑定

  • 输入框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--双向监听功能-->
输入：<input type="text" v-model="message"> {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "123"
        }
    });
</script>
</body>
</html>
  • 复选框+下拉框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--单选框-->
    性别：
    <input type="radio" name="sex" value="男" v-model="beChecked">男
    <input type="radio" name="sex" value="女" v-model="beChecked">女
    <br>
    <span>
        选中了：{{beChecked}}
    </span>
    <br>
    <!--表单双向绑定-->
    <select v-model="selected">
        <!--预留项-->
        <option disabled value="">==请选择==</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br>
    <span>
        选中了：{{selected}}
    </span>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            beChecked: "",
            selected: ""
        }
    });
</script>
</body>
</html>

8、自定义组件

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--carter是自定义的组件-->
    <carter v-for="item in items" v-bind:value="item.message"></carter>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //carter是标签
    Vue.component("carter",{
        props: ['value'],//value是bind值
        template: '<li>{{value}}</li>'
    });
    new Vue({
        el: "#app",
        data:{
            items: [
                {message: "廖述幸"},
                {message: "唐润之"},
                {message: "陈涛"},
                {message: "姜帅"}
            ]
        }
    })
</script>
</body>
</html>

9、JQuery的缺点

需要频繁访问DOM

10、Axios代替JQuery.Ajax()通信

  • 数据通信

在这里插入图片描述

  • 数据渲染

在这里插入图片描述

11、插槽slot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--slot插槽-->    
<todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="(item,index) in items" :item="item.message" :index="index"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //模板框组件
    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>{{item}}--{{index}}</li>'
    });

    new Vue({
        el: "#app",
        data:{
            title: "书籍列表",
            items: [
                {message: "廖述幸"},
                {message: "唐润之"},
                {message: "陈涛"},
                {message: "姜帅"}
            ]
        }
    })
</script>
</body>
</html>

后端无法干预前端工作

12、前端删除工作

  • 删除按钮在组件中
  • 删除Vue中数据

组件<----->前端<----->Vue实例

组件无法直接调用实例中的删除，只能通过前端中间介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--slot插槽-->
<todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="(item,index) in items"
                :item="item.message" :index="index" v-on:remove="removeItem(index)" v-bind:key="index"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //模板框组件
    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>{{item}} <button v-on:click="remove">删除</button> ---{{index+1}}</li>',
        methods: {
            remove: function (index) {
                //this.$emit 自定义事件发布
                this.$emit('remove',index);
            }
        }
    });

    new Vue({
        el: "#app",
        data:{
            title: "书籍列表",
            items: [
                {message: "廖述幸"},
                {message: "唐润之"},
                {message: "陈涛"},
                {message: "姜帅"}
            ]
        },
        methods: {
            removeItem: function (index) {
                //删除下标index，删除1个
                this.items.splice(index,1);
            }
        }
    })
</script>
</body>
</html>

书籍列表

  • 廖述幸 删除 —1
  • 唐润之 删除 —2
  • 陈涛 删除 —3
  • 姜帅 删除 —4

13、总结

13.1 常用属性

  • v-if
v-if="type==='A'"
  • v-else-if
v-else-if="type==='B'"
  • v-else
  • v-for
v-for="(item,index) in items" :item="item.message" :index="index"
  • v-on 绑定事件 ，简写==@==
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

v-on:remove="removeItem(index)"//自定义remove方法--->来自Vue实例的删除方法
  • v-model 数据双向绑定
  • v-bind 给组件绑定参数，简写==:==

14、安装NodeCli脚手架

http://nodejs.cn/download/

安装步骤下一步即可

C:\Users\海角天涯S>node -v
v14.14.0

C:\Users\海角天涯S>npm -v
6.14.8
  • 安装淘宝镜像加速器（cnpm）
npm install cnpm -g //执行此命令安装
  1. 安装Vue-cli
cnpm install vue-cli -g

deprecate：是正常

C:\Users\海角天涯S>vue list //查看可创建的模板

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

15、创建Vue项目

  • 到文件夹下cmd
vue init webpack myvue//myvue是项目名
  • 进入myvue中
cd myvue
  • 执行下载依赖
npm install
  • 执行报错
npm audit fix//这是它自己出现的提示命令
  • NodeJS启动项目
npm run dev
  • 停止
ctrl + c
  • 然后去idea打开myvue

2. 安装webpack

npm install webpack -g

16、项目与vue

1、创建一个名为hello-vue的工程

vue init webpack hello-vue

2、安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass 四个插件

# 进入工程
cd hello-vue
# 安装vue-router
npm install vue-router --save-dev
# 安装element-ui
npmi element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev
  • 执行报错
npm audit fix//这是它自己出现的提示命令
  • NodeJS启动项目
npm run dev
  • 停止
ctrl + c
  • 然后去idea打开myvue

2. 安装webpack

npm install webpack -g

16、项目与vue

1、创建一个名为hello-vue的工程

vue init webpack hello-vue

2、安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass 四个插件

# 进入工程
cd hello-vue
# 安装vue-router
npm install vue-router --save-dev
# 安装element-ui
npmi element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev
IT_Carter
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 30万+
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 学习
freeking101的博客
07-17 7713
​Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。................................................
Vue学习心得
weixin_49331914的博客
07-08 4267
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点; mvvm ●Model:模型层，在这里表示JavaScript对象 ●View:视图层,在这里表示DOM (HTML操作的元素) ●ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者 在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通
Vue学习总结
魅控
08-07 5815
Vue 基础 指令： 插值表达式： 语法：{{要插入的值}}，此时相当于占位符，到时候{{关键字}}会被替换成 Model中的数据 bug点： 当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示 出来，加载完毕之后又会被替换成真实结果，造成闪烁（Vue的加载代码写在 HTML元素之后时会出现该bug） 1.v-cloak指令： 语法：把它当作HTML元素的一个属性使用 示例： {...
十天学完Vue学习总结
H215919719的博客
11-14 9050
内容比较概念，了解，看过即可。当然不是只有看看和跟着敲这么简单，要做1~2个项目加以理解我做的第一个项目是：音乐网站（不需要后台技术，发送请求就可以获得数据）适合新手小白练手第二个项目是一个点餐系统：前后端进行交互，适合想往全栈发展的小白去做最后祝大家学好吃好喝好！我的vue学习专辑就结束啦！
vue学习
02-18
vue学习
Vue学习笔记
04-29
最火的前端框架VUE学习中所记录的所有笔记，其中包括了一些案例，如果亲自动手，按照笔记完整的走一遍代码，VUE也就学的差不多了，简单的开发是不成问题的。
vue学习资源
07-29
vue 比较好的教学资源，供参考
Vue学习手册
02-26
前端超热门的框架Vue，学习笔记，具体内容来自Vue官方文档
vue学习笔记
11-22
vue学习笔记，刚开始学习vue，接触了一些基础，整理一下。
vue学习基础以及大纲
07-19
vue学习大纲
Vue学习20210314.pdf
08-27
Vue学习总结
VUE学习笔记
07-17
VUE学习笔记
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
适合想要学习Vue.js前端框架的新人、复习资料，里面资料都是个人从0开始学习所总结的笔记（希望能帮到更多人）
vue学习总结
07-18
总结vue 各种类型的用法和实例 上面为2.0 大量换行下面是1.0
vue学习资料.rar
10-22
vue学习资料.
Vue学习源码
06-20
Vue学习源码
vue学习（vue基础篇、vue进阶篇、Vue模块篇）.rar
07-30
包含vue基础篇、vue进阶篇、Vue模块篇三部分
尚硅谷vue学习笔记
最新发布
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值