![](https://img-blog.csdnimg.cn/20210129112712104.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
#Vue.js基础学习
Vue.js 是目前最火的一个前端框架,也是最主流的一个框架,作为前端工程师必备的。
过客尘烟
这个作者很懒,什么都没留下…
展开
-
Vue初学 error Extra semicolon semi
在学黑马电商Vue项目时,出现这个错误Login.vue原代码:<template> <div> 登录组件 </div></template><script>export default {};</script><style lang="less" scoped></style>只需要将分号;去掉就行 export default {}...原创 2022-02-20 10:57:27 · 633 阅读 · 0 评论 -
Vue初学碰到Module not found: Error: Can‘t resolve ‘./components/Login.vue‘ in
解决方法很简单 把 ./ 改成 …/import Vue from 'vue'import Router from 'vue-router'import Login from '../components/Login.vue'Vue.use(Router)export default new Router({ routes: [ { path: '/login', component: Login } ]})原创 2022-02-20 10:47:59 · 14645 阅读 · 0 评论 -
error Newline required at end of file but not found
显示这个错误,只需要在最后一行加个回车就行原创 2022-02-20 09:50:54 · 442 阅读 · 0 评论 -
Missing space before value for key ‘routes‘
显示空格错误,找了好久总算找到原来是routes: []错了,请记住:后面要加一个空格export default new Router({ routes: [ ]})原创 2022-02-20 09:46:55 · 907 阅读 · 0 评论 -
loader-配置处理css、less、scss文件处理
使用webpack打包css文件import './css/index.css'直接运行会报错,需要配置loader运行cnpm i style-loader css-loader --save-dev修改webpack.config.js这个配置文件:module: { // 用来配置第三方loader模块的 rules: [ // 文件的匹配规则 { test: /\.css$/, use: ['style-loader', 'css-loader原创 2022-01-22 12:05:47 · 922 阅读 · 0 评论 -
02-webpack-dev-server的使用
实现webpack的实时打包构建由于每次重新修改代码之后,都需要手动运行webpack打包的命令,比较麻烦,所以使用webpack-dev-server来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。运行cnpm i webpack-dev-server --save-dev安装到开发依赖安装完成之后,在命令行直接运行webpack-dev-server来进行打包,发现报错,此时需要借助于package.json文件中的指令,来进行运行webpack-dev-server命令,在scri原创 2022-01-21 18:47:05 · 755 阅读 · 0 评论 -
01-webpack最基本的配置文件的使用
以变色案例为例import $ from 'jquery'$(function () { $('li:odd').css('backgroundColor', 'red') $('li:even').css('backgroundColor', function () { return '#' + 'D97634' }) })如果要切换颜色的话,可以在终端在输出 webpack ./src/main.js -o ./dist/bundle.js,但是,这样没原创 2022-01-21 17:52:18 · 593 阅读 · 0 评论 -
ERROR in main Module not found: Error: Can‘t resolve ‘.dist/bundle.js‘ in ‘D:\VisualStudioCode\webpa
这个错误困扰了我一天,刚学webpack就运行不出来,百度好久都百度不到最后是怎么解决的呢,发现了很多的错误1.路经的错误,我一直使用的是 \ ,然后我改成 / ,就解决了一个错误2.webpack ./src/main.js -o ./dist/bundle.js`没有错误了只剩下一个警告了最后在index.html <script src="../dist/bundle.js/main.js"></script><!DOCTYPE html>.原创 2022-01-21 15:01:20 · 1030 阅读 · 0 评论 -
watch-监视路由地址的改变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l原创 2022-01-20 14:56:38 · 463 阅读 · 0 评论 -
路由-使用命名试图实现经典布局
<!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>Doc原创 2022-01-18 21:21:37 · 403 阅读 · 0 评论 -
路由传参-使用params方式传递路由参数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l原创 2022-01-18 20:01:36 · 846 阅读 · 0 评论 -
路由的基本使用
什么是路由**后端路由:**对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;**前端路由:**对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由);<!DOCTYPE html><html la原创 2022-01-18 16:40:17 · 643 阅读 · 0 评论 -
06.ref获取DOM元素和组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l原创 2022-01-18 15:38:33 · 157 阅读 · 0 评论 -
使用过渡类名实现动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l原创 2022-01-18 15:35:36 · 49 阅读 · 0 评论 -
创建组件的三种方式
<div id="app"> <mycoml></mycoml> <mycom2></mycom2> <mycom3></mycom3> <template id="tm"> <div><h1>这个是通过template创建组件的第三种方式</h1></div> .原创 2022-01-15 21:32:35 · 506 阅读 · 0 评论 -
使用钩子函数模拟小球半场动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l原创 2022-01-15 10:04:16 · 119 阅读 · 0 评论 -
JSONP的实现原理
由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全;可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持Get请求);具体实现过程:先在客户端定义一个回调方法,预定义对数据的操作;再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口;服务器数据接口组织好要.原创 2022-01-13 09:07:41 · 309 阅读 · 0 评论 -
vue-resource发起的get、post、jsonp请求
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l原创 2022-01-13 08:56:28 · 94 阅读 · 0 评论 -
Promise用法
Promise作用Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的满息。可以避免多层异步调用嵌套问题(回调地狱)下面的嵌套函数是不是看出来非常的复杂,但是使用Promise我们可以简化 $.ajax({ url: 'http://localhost:3000/data', success: function(data) { console.log(data) $.ajax({ url:原创 2021-03-01 15:46:40 · 165 阅读 · 0 评论 -
vue组件化购物车
第一步建立一个组件的布局上面部分划为3部分的组件块,第一部分标题,第二部分内容,第三部分结算实现步骤实现整体布局和样式效果划分独立的功能组件组合所有的子组件形成整体结构逐个实现各个组件功能具体代码如下<body><div id="app"> <div class="container"> <my-cart></my-cart> </div></div><scr原创 2021-02-28 23:16:12 · 601 阅读 · 0 评论 -
组件插槽
(1)组件插槽基本用法1:插槽的作用 组件最大的特性就是复用性,插槽能大大提高组件的复用性2:插槽的使用 提供一个插槽的位置 提供插槽的内容<div id="app"> <mcom4>有一个错误</mcom4> <mcom4></mcom4></div><script src="../../js/vue-2.4.0.js"></script><script>原创 2021-02-25 11:58:39 · 883 阅读 · 0 评论 -
vue组件数据交互
1:父组件向子组件传值<div id="app"> <com :pad="msg" content="xiaoming"></com></div><script> var vm=new Vue({ el:'#app', data:{ msg:'这是父组件' }, methods:{ }, componen原创 2021-02-07 22:13:18 · 109 阅读 · 0 评论 -
V-on和跑马灯效果
1:v-on是什么?v-on是一个事件绑点机制吧,通俗来说就是javascrpit中的onclick点击事件,具体用法是v-on:click=“show”,也可以写成@click=“show”<div id="app"> <input type="button" v-on:click="show" value="点击"> <input type="button" @click="hid" value="点击"></div&原创 2020-12-16 10:25:19 · 140 阅读 · 0 评论 -
Vue.js的基本常用指令
## Vue指令之v-text和v-html,v-bind:v-text指令和v-html很简单,v-text是用于渲染普通文本,无论何时,绑定的数据对象上 msg属性发生了改变,插值处的内容都会更新。如果你想输出真正的 HTML,你需要使用 v-html指令,v-text仅渲染标签,不能解析 HTML 代码。1:v-text和v-html用法<div id="dd"> <h4 v-text="mag"></h4> <div>{{ma原创 2020-12-16 09:58:03 · 158 阅读 · 0 评论 -
v-cloak的学习
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一、v-cloak是什么?二、使用步骤1.css代码如下2.Htnl代码一、v-cloak是什么?在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的。二、使用步骤1.css代码如下 <style> [v-cloak]{ display: none; } </style>2.Htnl代码代码原创 2020-12-16 09:17:36 · 101 阅读 · 0 评论 -
Vue.js是什么?
文章目录前言一、Vue.js是什么?二、 为什么要学习流行框架?1.企业中1.如何使用vue.js框架?2.那vue.js的基本结构是什么呢?总结前言随着编程技术的不断发展,前端开发也越来越重要,很多人都开启了前端的学习,本文就介绍了前端开发的框架之一vue.js的基础内容。一、Vue.js是什么?vue.js是一个框架,目前来说是比较火的框架, Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只关注原创 2020-12-16 09:00:12 · 3088 阅读 · 0 评论