Vue学习笔记

  • Vue学习
    • 1. Vue基础
    • 2. Vue本地应用
      • Vue指令
      • v-text
      • v-html
      • v-on
      • v-show
      • v-if
      • v-bind
      • v-for
      • v-model
      • 案例1 计数器
      • 案例2 图片切换
      • 案例3 小黑记事本
    • 3. Vue网络应用
      • axios的使用
      • axios + vue 的使用
      • 案例4 天知道
    • 4. Vue综合应用
      • 案例5 音乐播放器

Vue学习

视频地址：https://www.bilibili.com/video/BV12J411m7MG

1. Vue基础

Vue简介

  1. JavaScript框架
  2. 简化Dom操作
  3. 响应式数据驱动

Vue官方文档：

  • https://cn.vuejs.org
  • https://v3.cn.vuejs.org/

Demo1：第一个程序，初步学会使用Vue。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue基础</title><!-- 导入Vue.js文件 --><script src="vue.js"></script>
</head>
<body><div id="app">{{ message }}</div><script>var app = new Vue({el:'#app',data:{message:"Hello Vue!"}})</script>
</body>
</html>

Demo2：认识Vue实例——el挂载点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- Vue实例的作用范围是什么？ --><!-- Vue会管理el选项命中元素以及其内部的后代元素。 -->app元素外部：{{ message }}<div id="app_1">app元素内部:{{ message }}<br><span>app元素内部的sapn标签下：{{ message }}</span></div><script>var app = new Vue({el:'#app_1',data:{message:"Hello Vue!"}})</script><br><!-- 是否可以使用其他的选择器？ --><!-- 可以，但是推荐使用id选择器，因为其他选择器都不唯一。 --><div class="app_2">{{ message }}</div><script>var app = new Vue({el:'.app_2',data:{message:"现在使用的class选择器"}})</script><br><!-- 是否可以设置其他的DOM元素呢？ --><!-- 可以，可以使用其他饿的双标签，单标签不能、html和body之上也不能挂载。 --><h2 id="app_3">{{ message }}</h2><script>var app = new Vue({el: '#app_3',data:{message:"这是H2元素"}})</script>
</body>
</html>

Demo3：认识Vue实例——data数据对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><div id="app">{{ message }}<h2>{{ school.name }} {{ school.mobile }}</h2><ul><li>{{ campus[0] }}</li><li>{{ campus[1] }}</li><li>{{ campus[2] }}</li><li>{{ campus[3] }}</li></ul></div><!-- data:数据对象Vue中用到的数据定义在data中；data中可以写复杂类型的数据；渲染复杂类型数据时，遵循js的语法即可。--><script>var app = new Vue({el: '#app',data:{message:"你好，小黑。",school:{name:"黑马程序员",mobile:"400-618-9090"},campus:["北京校区","上海校区","广州校区","深圳校区"]}})</script>
</body>
</html>

2. Vue本地应用

通过Vue实现常见的网页效果

Vue指令

内容绑定，事件绑定。
显示切换，属性绑定。
列表循环，表单元素绑定。

Vue指令 作用
v-text 设置标签的内容（textContent）
v-html 设置元素的innerHTML
v-on 为元素绑定事件
v-show 根据真假切换元素的显示状态
v-if 根据表达式的真假切换元素的显示状态
v-bind 为元素绑定属性
v-for 根据数据生成列表结构
v-model 便捷的设置和获取表单元素的值

v-text

Demo_v-text指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- v-textv-text指令的作用是：设置标签的内容（textContent）默认写法会替换全部内容，使用差值表达式{{}}，可以替换指定内容--><div id="app"><h2 v-text="message"></h2><h2 v-text="info"></h2><h2>{{ message }}</h2><h2 v-text="message">深圳</h2><h2>{{ message }}深圳</h2><h2 v-text="message + '!!'"></h2><h2>{{ message + '!!'}}深圳</h2>        </div><script>var app = new Vue({el:'#app',data:{message:"黑马程序员",info:"前端与移动教研部"}})</script>
</body>
</html>

v-html

Demo_v-html指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- v-htmlv-html指令的作用是：设置元素的innerHTML；内容中有html结构会被解析为标签；v-text指令无论内容是什么，只会解析为文本。--><div id="app"><p v-html="content"></p><p v-text="content"></p></div><script>var app = new Vue({el:'#app',data:{// content:"黑马程序员"content: "<a href='http://www.itheima.com'>黑马程序员</a>"}})</script>
</body>
</html>

v-on

Demo_v-on指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- v-on指令 v-on指令的作用是：为元素绑定事件事件名不需要写on指令可以简写为@绑定的方法定义在methods属性中方法内部通过this关键字可以访问定义在data中数据--><div id="app"><input type="button" value="事件绑定-点击" v-on:click="dolt"><input type="button" value="事件绑定-双击" v-on:dblclick="dolt"><!-- 简写 --><input type="button" value="事件绑定-简写点击" @click="dolt"><h2 @click="change">{{ food }}</h2></div><script>var app = new Vue({el:"#app",data:{food:"西蓝花炒鸡蛋"},methods:{dolt:function(){alert("做IT");},change:function(){// console.log(this.food);this.food += "好好吃！"}}})</script>
</body>
</html>

Demo_v-on指令补充

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- 事件绑定的方法写成函数调用的形式，可以传入自定义参数定义方法时需要定义形参来接受传入的实参事件的后面跟上.修饰符可以对事件进行限制，例如.enter可以限制触发的按键为回车--><div id="app"><input type="button" value="点击" @click="doIt(666)"><input type="text" @keyup.enter="sayHi"></div><script>var app = new Vue({el:'#app',methods:{doIt:function(p1){console.log("做It");console.log(p1);},sayHi:function(){alert("吃了没");}}})</script>
</body>
</html>

v-show

Demo_v-show指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- v-showv-show指令的作用是：根据真假切换元素的显示状态原理是修改元素的display，实现显示隐藏指令后面的内容，最终都会解析为布尔值值为true元素显示，值为false元素为隐藏--><div id="app"><input type="button" value="切换显示状态" @click="changeIsShow"><img v-show="IsShow" src="1.png" alt=""><br><span>{{ age }}</span><input type="button" value="年龄age增加" @click="changeAge"><img v-show="age >= 18" src="1.png" alt=""></div><script>var app = new Vue({el:'#app',data:{IsShow:false,age:17},methods:{changeIsShow:function(){this.IsShow = ! this.IsShow;},changeAge:function(){this.age++;}}});</script>
</body>
</html>

v-if

Demo_v-if指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- v-if指令v-if指令的作用是根据表达式的真假切换元素的显示状态本质是通过操纵dom元素来切换显示状态表达式的值为true，元素存在于dom树中；表达式的值为false，从dom树中移除。--><div id="app"><button @click="ChangeShow">切换状态</button><p v-if="IsShow">我是一个p标签，由v-if控制</p><p v-show="IsShow">我是一个p标签，由v-show控制</p><p v-if="temperature >= 35">热死了！</p></div><script>var app = new Vue({el:'#app',data:{IsShow:true,temperature:40},methods:{ChangeShow:function(){this.IsShow = !this.IsShow;}}});</script>
</body>
</html>

v-bind

Demo_v-bind指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script><style>.active{border: 1px solid red;}</style>
</head>
<body><!-- v-bind指令 v-bind指令的作用是为元素绑定属性完整写法是v-bind:属性名简写的话可以直接省略v-bind，只保留 :属性名--><div id="app">全写：v-bind:src<img v-bind:src="imgSrc" v-bind:title="imgTitle" alt=""><br>简写 ：src<img :src="imgSrc" :title="imgTitle + '!!!!'" alt=""><br>添加类_三元表达式<button @click="toggleActive">点击我改变class属性</button><img :src="imgSrc" :title="imgTitle + '!!!!'" :class="isActive?'active':''" alt=""><br>添加类_对象方式<button @click="toggleActive">点击我改变class属性</button><img :src="imgSrc" :title="imgTitle + '!!!!'" :class="{active:isActive}" alt=""></div><script>var app = new Vue({el:'#app',data:{imgSrc:"http://www.itheima.com/images/logo.png",imgTitle:"黑马程序员",isActive:false},methods:{toggleActive:function(){this.isActive = !this.isActive;}}});</script>
</body>
</html>

v-for

Demo_v-for指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- v-for指令的作用是根据数据生成列表结构数组经常和v-for结合使用语法是(item,index) in 数据item和index可以结合其他指令一起使用数组长度的更新会同步到页面上，是响应式的--><div id="app"><ul><li v-for="item in Array">你好,{{ item }}</li></ul><h2 v-for="item in vegetables" :title="item.name">{{ item.name }}</h2><button @click="add">点我添加</button><button @click="remove">点我移除</button></div><script>var app = new Vue({el:'#app',data:{Array:["张三","李四","王五","马六","二蛋"],vegetables:[{name:"葱花炒蛋"},{name:"番茄炒蛋"}]},methods:{add:function(){this.vegetables.push({ name:"韭菜炒蛋"});},remove:function(){// 移除最左边的一个this.vegetables.shift();}}}) </script>
</body>
</html>

v-model

Demo_v-model指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- v-model指令的作用是便捷的设置和获取表单元素的值绑定的数据会和表单元素值相关联--><div id="app"><input type="text" v-model="message" @keyup.enter="getMessage"><h2>{{ message }}</h2><input type="button" value="点我修改" @click="setMessage"></div><script>var app = new Vue({el:'#app',data:{message:"黑马程序员"},methods:{getMessage:function(){alert(this.message);},setMessage:function(){this.message = "111";}}});</script>
</body>
</html>

案例1 计数器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- 计数器创建Vue示例时：el（挂载点）、data（数据）、methods（方法）v-on指令的作用是绑定事件，简写为@方法中通过this关键字获取data中的数据v-text指令的作用是设置元素的文本值，简写为{{}}--><div class="input-num" id="app"><button @click='reduce'>-</button><span>{{ num }}</span><button @click='add'>+</button></div><script>var app = new Vue({el:'#app',data:{num:1},methods:{reduce:function(){console.log("reduce")if(this.num == 1){alert("不能为0")}else{this.num--;}},add:function(){console.log("add")if(this.num>=9){alert("不能超过10个")}else{this.num++;}}}});</script>
</body>
</html>

案例2 图片切换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- 图片切换 列表数据使用数组保存v-bind指令可以设置元素属性，比如srcv-show和v-if都可以切换元素的显示状态，频繁切换用v-show--><div id="app"><img :src="imgArray[index]" alt=""><a href="#" @click="prev" v-show="index>0">上一张</a><a href="#" @click="next" v-show="index<imgArray.length-1">下一张</a></div><script>var app = new Vue({el:'#app',data:{imgArray:["https://img20.360buyimg.com/pop/s590x470_jfs/t1/222408/26/6055/99082/61b997c0Ead36013d/9b2da06b3f438624.jpg.webp","https://img14.360buyimg.com/pop/s590x470_jfs/t1/208171/7/13900/69634/61c96765E6e65374c/642ed952f9778144.jpg.webp","https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f4/a10ab487/cr/s/q.jpg","https://img12.360buyimg.com/pop/s590x470_jfs/t1/205354/16/17988/82004/61b1dc96Ee600f3f3/9ffa616349105df0.png.webp"],index:0,},methods:{prev:function(){this.index--;},next:function(){this.index++;}}});</script>
</body>
</html>

案例3 小黑记事本

<!-- 列表结构可以通过v-for指令结合数据生成v-on结合事件修饰符可以对事件进行限制，比如.enterv-on在绑定事件时可以传递自定义参数通过v-model可以快速的设置和获取表单元素的值基于数据的开发方式-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script>
</head>
<body><!-- 主体区域 --><section id="todoapp"><!-- 输入框 --><header class="header"><h1>小黑笔记本</h1><input v-model="inputValue" @keyup.enter="add" type="text" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new_todo"></header><!-- 列表区域 --><section class="main"><ul class="to_list"><li class="todo" v-for="(item,index) in list"><div class="view"><span class="index">{{ index+1 }}</span><label>{{ item }}</label><button @click="remove(index)" class="destory">×</button></div></li></ul></section><!-- 统计和清空 --><footer class="footer"><span class="todo_count" v-if="list.length!=0"><strong>{{ list.length }}</strong>items left</span><button @click="clear" class="clear_completed" v-show="list.length!=0">Clear</button></footer></section><!-- 底部 --><footer class="info"></footer><!-- JS --><script>var app = new Vue({el:'#todoapp',data:{list:["写代码","吃饭饭","睡觉觉"],inputValue:"好好学习", //用来获取用户输入的内容},methods:{add:function(){this.list.push(this.inputValue);},remove:function(index){console.log("1")this.list.splice(index,1);},clear:function(){this.list = [];}}})</script>
</body>
</html>

3. Vue网络应用

axios的使用

<!-- axios在线地址：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
随机获取笑话的接口请求地址： https://autumnfish.cn/api/joke/list请求方法：get请求参数：numnum——笑话条数——类型为数字响应内容：随机笑话
用户注册接口1请求地址： https://autumnfish.cn/api/user/reg请求方法：post请求参数：usenamenum——用户名——不能为空响应内容：注册成功或者失败 -->
<!-- axios必须先导入才可以使用使用get或者post方法即可发送对应的请求then方法中的回调函数会在请求成功或者失败时触发通过回调函数的形参可以获取响应内容或者错误信息--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 官网提供的axios在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head>
<body><input type="button" value="get请求" class="get"><input type="button" value="post请求" class="post"><!-- 随机获取笑话接口 --><script>document.querySelector(".get").onclick = function(){axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(response){console.log(response);},function(err){console.log(err);})}</script><!-- 用户注册接口 --><script>document.querySelector(".post").onclick = function(){//post的数据是放到第二个参数里面写的axios.post("https://autumnfish.cn/api/user/reg",{username:"张三aichidoya"}).then(function(response){console.log(response);}),function(err){console.log(err)}}</script>
</body>
</html>

axios + vue 的使用

<!-- axios回调函数中的this已经改变，无法访问到data中数据，把this保存起来，回调函数中直接使用保存的this的变量即可。-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 官网提供的axios在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="vue.js"></script>
</head>
<body><div id="app"><input type="button" value="获取笑话" @click="getjoke"><p>{{ joke }}</p></div><script>var app = new Vue({el:'#app',data:{joke:"笑话"},methods:{getjoke:function(){// this会变，所以我们现在外边获取到this赋值到that。var that = this;axios.get("https://autumnfish.cn/api/joke").then(function(response){that.joke = response.data;},function(err){console.log(err);that.joke = "获取笑话失败哦"})}}})</script>
</body>
</html>

案例4 天知道

<!-- 查询天气的应用 -->
<!-- 回车查询按下回车（v-on .enter）查询数据（axios接口 v-model）渲染数据（v-for 数组 that）天气接口：请求地址：http://wthrcdn.etouch.cn/weather_mini请求方法：get请求参数：city（查询城市名）响应内容：天气信息点击查询点击城市（v-on 自定义参数）查询数据（this关键字）渲染数据--><!-- 应用的逻辑代码建议和页面分离，使用单独的js文件编写axios回调函数中this指向改变了，需要额外的保存一份--><!-- 自定义参数可以让代码的复用性更高methods中定义的方法内部，可以通过this关键字点出其他的方法--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天知道</title><link rel="stylesheet" href="快速入门Vue.js资料\04-源代码\demo-天知道\css\index.css"><link rel="stylesheet" href="快速入门Vue.js资料\04-源代码\demo-天知道\css\reset.css" /></head><body><div class="wrap" id="app"><div class="search_form"><div class="logo"><img src="快速入门Vue.js资料\04-源代码\demo-天知道\img\logo.png" alt="logo" /></div><div class="form_group"><input type="text" v-model="city"  @keyup.enter="searchWeather"   class="input_txt" placeholder="请输入查询的天气"/><button class="input_sub" @click="searchWeather">搜 索</button></div><div class="hotkey"><a href="javascript:;" @click="changeCity('北京')">北京</a><a href="javascript:;" @click="changeCity('上海')">上海</a><a href="javascript:;" @click="changeCity('广州')">广州</a><a href="javascript:;" @click="changeCity('深圳')">深圳</a></div></div><ul class="weather_list"><li v-for="item in weatherList"><!-- 天气类型 --><div class="info_type"><span class="iconfont">{{ item.type }}</span></div><!-- 天气温度 --><div class="info_temp"><b>{{ item.low }}</b>~<b>{{ item.high }}</b></div><!-- 日期 --><div class="info_date"><span>{{ item.date }}</span></div></li></ul></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- 自己的js --><script>var app = new Vue({el:'#app',data:{city:"",weatherList:[]},methods:{searchWeather:function(){var that =  this;axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(response){console.log(response.data.data.forecast);that.weatherList = response.data.data.forecast;},function(err){console.log(err);})},changeCity:function(city){this.city = city;this.searchWeather();}        }})</script></body></html>

4. Vue综合应用

案例5 音乐播放器

本篇文章用于作者本人学习回顾时使用。

【Vue学习笔记】黑马程序员四小时速成VUE相关推荐

  1. [学习笔记]黑马程序员-Hadoop入门视频教程

    文章目录 参考资料 第一章:大数据导论与Linux基础(p1-p17) 1.1 大数据导论 1.1.1 企业数据分析方向 1.1.2 数据分析基本流程步骤 明确分析的目的和思路 数据收集 数据处理 数 ...

  2. [学习笔记]黑马程序员Spark全套视频教程，4天spark3.2快速入门到精通，基于Python语言的spark教程

    文章目录 视频资料: 思维导图 一.Spark基础入门(环境搭建.入门概念) 第二章:Spark环境搭建-Local 2.1 课程服务器环境 2.2 Local模式基本原理 2.3 安装包下载 2.4 ...

  3. [学习笔记]黑马程序员python教程

    文章目录 思维导图 Python基础知识图谱 面向对象 SQL入门和实战 Python高阶技巧 第一阶段 第九章:Python异常.模块与包 1.9.1异常的捕获 1.9.1.1 为什么要捕获异常 1 ...

  4. Node.js学习笔记 [黑马程序员]——day2

    文章目录 模块化的基本概念 模块化规范 Node.js 中模块的分类 Node.js 中模块的分类 加载模块 Node.js 中的模块作用域 向外共享模块作用域中的成员 `module` 对象 `mo ...

  5. Node.js学习笔记 [黑马程序员]——day34

    文章目录 初识 Express 简介 Express 的基本使用 托管静态资源 nodemon Express 路由 路由的概念 :dog:什么是路由 :dog:Express 中的路由 :dog: ...

  6. SSM 框架学习（黑马程序员）

    (Spring+SpringMVC+MyBatis) SSM框架教程 黑马程序员最全SSM框架教程|Spring+SpringMVC+MyBatis全套教程 01. Spring 简介 1.1 Spr ...

  7. 编程开发学习笔记之程序员如何用1年时间获得3年成长（图）

    2019独角兽企业重金招聘Python工程师标准>>> 编程开发学习笔记之程序员如何用1年时间获得3年成长(图) 前言 这世界存在这么一个银行,你一出生,就自动享有这家银行为你开设的 ...

  8. vue学习笔记（四）- cmd无法识别vue命令解决方法

    vue学习笔记(四)- cmd无法识别vue命令解决方法 参考文章: (1)vue学习笔记(四)- cmd无法识别vue命令解决方法 (2)https://www.cnblogs.com/suRimn ...

  9. 知乎live笔记09 程序员跳槽时，如何优雅地谈薪水？

    标题: 程序员跳槽时,如何优雅地谈薪水? 主讲人:康康 链接: https://www.zhihu.com/lives/892036047502999552 影响薪水的因素 主观因素 学历学校 面试官 ...

  10. Vue学习笔记(2) 在html文件中创建Vue实例，并使用http-vue-loader注册单文件组件

    本篇博客基于Vue2.x 官方文档:https://cn.vuejs.org/v2/guide/instance.html 最近和同学合作一个设备信息管理的小项目,而同学找的模板不是前后端分离的 因此 ...

最新文章

  1. css 自动换行_前端必备！20个CSS小技巧
  2. 他总在逆风翻盘，绝地反击！最不爱钱却成了最有钱的人...
  3. linux下使用extundelete恢复ext3/ext4分区数据
  4. Java连接Redis及操作（二）
  5. 修改JBOSS服务器的端口号
  6. 2-用EasyNetQ连接RabbitMQ(黄亮翻译)
  7. （89）FPGA除法器设计
  8. 第三十八篇、给UITabBar按钮的动画效果
  9. 技术检验检测管理系统之样品检验模块概况(四)
  10. NGUI系列教程五（角色信息跟随）
  11. Beta阶段 - 博客链接合集
  12. IE10 CSS hack
  13. 整数规划---指派问题
  14. Word2003中Visio2003图打印错误的解决方法
  15. 想进大公司先测你EQ
  16. 浏览器（Microsoft Edge）主页被360劫持的终极解决办法
  17. 深度学习开源图片数据库汇总
  18. CCF关于举办CSP-J1 CSP-S1 初赛的报名通知
  19. Odoo 16 企业版手册 - 库存管理之库存调拨
  20. 节日头像小程序源码，直接部署可用！

热门文章

  1. Java实现拖动图片验证处理
  2. DBeaver之MYSQL驱动安装
  3. java自动化开发_五大Java自动化测试框架
  4. 声道测试音频_AirPods Pro 空间音频的这7个问题，你都了解吗？
  5. 中国高校改名(总结篇)(转载)
  6. easyui框架和显示（一）
  7. Eclipse环境搭建-scala
  8. UA OPTI512R 傅立叶光学导论1 为什么光学需要傅立叶变换
  9. 【STC15】串口使用
  10. BLE芯片商总结和市场趋势分析【选型使用，建议收藏】