正文

vue.js学习之——安装

小楼昨夜又东风  2022-02-13  525

关键词：

Vue.js的安装方式有三种：

1、script引入

2、CDN

3、NPM

前两种不细说，重点讨论第三种——NPM安装

Vue.js提供了一个名为Vue-cli的官方命令工具，使用之前先进行如下准备工作：

1、安装nvm（Node Version Manager），简单来说就是一个管理node.js版本的控制器。

2、安装npm（Node package Manager），实际上就是个node包管理器。事实上在通过nvm安装node的时候，npm就已经附带了。

完成上述准备之后可以安装Vue了

1、安装Vue

npm install vue

2、安装cli

npm install -g vue-cli

3、创建项目

vue init webpack my_app

4、进入创建的项目文件夹

cd my_app

5、安装模块

npm install

6、运行项目

npm run dev

vue.js学习之入门实例

之前一直看过vue.js官网api，但是很少实践，这里抽出时间谢了个入门级的demo，记录下一些知识点，防止后续踩坑，牵扯到的的知识点：vue、vue-cli、vue-router、webpack等。首先看下实现的效果：源码下载戳这里：源码1、使用vue-... 查看详情

vue.js基础学习之组件

什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性... 查看详情

vue.js学习之跨域请求代理与axios传参

vue.js学习之跨域请求代理与axios传参一：跨域请求代理1：打开config/index.jsmodule.exports{dev:{}}在这里面找到proxyTable{}，改为这样：proxyTable:{‘/api‘:{target:‘http://121.41.130.58:9090‘,//设置你调用的接口域名和端口号别忘了加httpchangeOrigi... 查看详情

vue.js基础学习之过滤器

过滤器：filter格式化变量的输出内容，只用于一些简单的在制作的最后一步对内容的输出格式做些调整（如日期格式化，字母大小写，数字再计算等等）例如我们需要将最终的结果字符串以大写方式展示出来，还有将小数转化成... 查看详情

vue.js基础学习之混合mixins

混合以一种灵活的方式为组件提供分布复用功能。混合对象可以包含任意的组件选项。当组件使用了混合对象时，混合对象的所有选项将被“混入”组件自己的选项中。当混合对象与组件包含同名选项时，这些选项将以适当的策... 查看详情

vue学习之四组件系统(代码片段)

vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。一、Vue.js组件系统每一个新技术的诞生，都是为了解决特定的问题... 查看详情

vue.js源码学习之flag篇(代码片段)

TheProgressiveJavaScriptFramework——vuejs.org起因第一次接触Vue.js是因为要做一个通讯录的外包项目，这个项目要有前台展示和中后台管理，从轮子做起肯定是不明智的选择，所以当时初步定下的是Vue.js+ElementUI的技术栈。项目过程很漫... 查看详情

vue学习之vuex(代码片段)

单向数据流概念Vuex介绍解决问题多个视图依赖于同一状态（菜单导航）来自不同视图的行为需要变更为同意状态（例如：评论弹幕）Vuex应运而生为vue.js开发的状态管理模式组件状态集中管理组件状态改变遵循统一的规则store.js//... 查看详情

vue.js学习之如何在better-scroll加载完成后，自动滚动到最底部

首先我们需要使用scrollTo这个方法：scrollTo(x,y,time,easing)参数：{Number}x横轴坐标（单位px）{Number}y纵轴坐标（单位px）{Number}time滚动动画执行的时长（单位ms）{Object}easing缓动函数，一般不建议修改，如果想修改，参考源码中的e... 查看详情

vue学习之介绍(代码片段)

一.vue概念#1.什么是Vue#Vue.js是一个渐进式JavaScript框架#渐进式：vue从小到控制页面中的一个变量到页面一块内容到整个页面，最终大到整个项目，东可以用vue框架来实现#vue可以干哪些事#将数据渲染到指定区域（数据可以是后台获... 查看详情

12.2vue学习之控制行内样式(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>vue</title><linkrel="stylesheet"href=""><scripttype=... 查看详情

12.2vue学习之-if判断,实践加减input里的值(代码片段)

06.vue学习之非常实用的计算属性computed实例(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>vue</title><linkrel="stylesheet"href=""><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--<scripttype="text/... 查看详情

11.vue学习之提交表单时拿到input里的值(代码片段)

45.vue学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><scripttype="text/javascript"src="../js/vue.js"></script><!--<... 查看详情

29.vue学习之--键盘事件.键盘修饰符的实例讲解(代码片段)

键盘事件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><scripttype="text/javascript"src="../js/vue.js"></script></head><body><divid="hdcms">&... 查看详情

vue学习之渲染(代码片段)

一.计算命令computed```html<body><divid="app">姓<inputtype="text"v-model="first_name"><hr>名<inputtype="text"v-model="last_name"><hr><p>first_name+""+last_name</p><p>full_name_fn()</p><!--一个变量的值依赖于多个变量的... 查看详情

24.vue学习之-变异方法filter与regexp实现评论搜索功能(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><scripttype="text/javascript"src="../js/vue.js"></script></head><body><divid="hdcms"><liv-for="... 查看详情