摘要：
一般在开发中，我们会人为把组件分2个目录存放，一个代表的页面组件，另一个代表页面一部分的子组件。 src/ |- views/ |- Home.vue |- components/ |- App.vue |- main.js 在组件中编辑三个标签，编写视图、vm对象和css样式代码。 1、templ 阅读全文
posted @ 2021-10-01 21:28
映辉
阅读(161)
评论(0)
推荐(0)
摘要：
组件有两种：脚本化组件、单文件组件 脚本化组件的缺点： html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。 脚本化组件用在小项目中非常合适，但是复杂的大项目中，如果把更多的组件放在html文件中，那么维护成本就会变得非常昂贵。 脚本化组件只是整合了js和html 阅读全文
posted @ 2021-10-01 21:24
映辉
阅读(71)
评论(0)
推荐(0)
摘要：
整个项目是一个主文件index.html，index.html中会引入src文件夹中的main.js，main.js中会导入顶级单文件组件App.vue，App.vue中会通过组件嵌套或者路由来引用其他页面组件文件，页面组件也可以嵌套或者路由引用的方式加载子组件。 阅读全文
posted @ 2021-10-01 21:22
映辉
阅读(193)
评论(0)
推荐(0)
摘要：
src 主开发目录，要开发的单文件组件全部在这个目录下的components目录下 static 静态资源目录，所有的css，js文件放在这个文件夹 dist 项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了 阅读全文
posted @ 2021-10-01 21:21
映辉
阅读(89)
评论(0)
推荐(0)
摘要：
1、生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录。 该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目： // 生成一个基于 webpack模板的新项目 vue create 目录名 例如： 阅读全文
posted @ 2021-10-01 21:19
映辉
阅读(57)
评论(0)
推荐(0)
摘要：
1、安装node.js Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别： 运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件， 阅读全文
posted @ 2021-10-01 21:16
映辉
阅读(99)
评论(0)
推荐(0)
摘要：
组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。 而在网页中实现一个功能，需要使用html定义功能的内容结构，使用css声明功能的外观样式，还要使用js来定义功能的特效，因此就产生了把一个功能相关的[HTML、 阅读全文
posted @ 2021-10-01 21:13
映辉
阅读(338)
评论(0)
推荐(0)
摘要：
ajax跨域(跨源)方案：后端授权[CORS]，jsonp，服务端代理 CORS是一个W3C标准，全称是"跨域资源共享"，它允许浏览器向跨源的后端服务器发出ajax请求，从而克服了AJAX只能同源使用的限制。 实现CORS主要依靠<mark>后端服务器中响应数据中设置响应头信息返回</mark>的。 阅读全文
posted @ 2021-10-01 21:12
映辉
阅读(318)
评论(0)
推荐(0)
摘要：
同源策略，是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址（例如服务端接口地址与浏览器客户端页面地址）之间比较，是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有明确授权的情况下，没有权限读写对方信息。 ajax本质上还是javascrip 阅读全文
posted @ 2021-10-01 21:11
映辉
阅读(295)
评论(0)
推荐(0)
摘要：
vue.js默认没有提供ajax功能的。 所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。 注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。 下载地址： https://unpkg.com/axios@0.18.0/dist 阅读全文
posted @ 2021-10-01 21:08
映辉
阅读(339)
评论(0)
推荐(0)
摘要：
在vue使用指令过程中，还提供了一些增加或者削弱指令效果的修饰符。 @事件名.stop="js代码" 阻止事件冒泡 @事件名.once="js代码" 限制事件只能触发一次 @事件名.prevent="js代码" 阻止页面刷新，常用于a元素或者form元素中 v-model.number="变量" 把 阅读全文
posted @ 2021-10-01 21:05
映辉
阅读(98)
评论(0)
推荐(0)
摘要：
每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在vm对象创建的不同阶段加上我们需要的代码，实现特定的功能。 <!DOCTYPE html> <html lang="en"> <head> <meta chars 阅读全文
posted @ 2021-10-01 21:04
映辉
阅读(63)
评论(0)
推荐(0)
摘要：
侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。 侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。 案例1： <! 阅读全文
posted @ 2021-10-01 21:03
映辉
阅读(104)
评论(0)
推荐(0)
摘要：
在vue开发中，有时候我们需要在页面中展示一些数据的结果或者是一些数据的相关信息，此时我们可以通过声明计算属性来声明一些新的变量，这些变量与原来的数据进行一一绑定。也就是计算属性的变量会随着data数据的改变而改变。 案例1： <!DOCTYPE html> <html lang="en"> <he 阅读全文
posted @ 2021-10-01 21:02
映辉
阅读(112)
评论(0)
推荐(0)
摘要：
1、使用Vue.filter()进行全局定义 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue-2.6.14.js"></script> <s 阅读全文
posted @ 2021-10-01 21:00
映辉
阅读(35)
评论(0)
推荐(0)
摘要：
在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。 数据是数组： <ul> <!--i是列表的每一个元素--> <li v-for="book in book_list">{{book.title}}</li> </ul> <ul> <!--i是列表的每一个元素， 阅读全文
posted @ 2021-10-01 20:58
映辉
阅读(116)
评论(0)
推荐(0)
摘要：
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。 1、v-if 标签元素： <!-- vue对象最终会把条件的结果变成布尔值 --> <h1 v-if="ok">Yes</h1> data数据： data:{ ok:false // true则是显示，false是隐藏 阅读全文
posted @ 2021-10-01 20:57
映辉
阅读(159)
评论(0)
推荐(0)
摘要：
1、控制标签style样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { font-size: 14px; } table, tr, th, td 阅读全文
posted @ 2021-10-01 20:54
映辉
阅读(41)
评论(0)
推荐(0)
摘要：
有两种绑定事件的方式： v-on:事件名（vue1版本） @事件名（vue2以上版本） 格式： <标签名 @事件名="方法或者基本JS代码">标签内容</标签名> 例子： <div id="box"> <div @click="func01">姓名：{{name}}</div> <div @clic 阅读全文
posted @ 2021-10-01 20:49
映辉
阅读(89)
评论(0)
推荐(0)
摘要：
格式： <标签名 :标签属性="data属性"></标签名> 指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 m 阅读全文
posted @ 2021-10-01 20:46
映辉
阅读(36)
评论(0)
推荐(0)
浙公网安备 33010602011771号