随笔分类 -  vue

摘要:前面学习了普通组件以后,接下来我们继续学习单文件组件则需要提前先安装准备一些组件开发工具。否则无法使用和学习单文件组件。 一般情况下,单文件组件,我们运行在 自动化工具vue-CLI中,可以帮我们编译单文件组件。所以我们需要在系统中先搭建vue-CLI工具, 官网:https://cli.vuejs 阅读全文
posted @ 2021-06-30 14:48 urls 阅读(105) 评论(0) 推荐(0)
摘要:介绍: 一个html文件 vue就是我们学习的vue基础,vue + vue-router 主要用来做SPA(Single Page Application),单页面应用 为什么要使用单页面应用呢?因为传统的路由跳转,如果后端资源过多,会导致页面出现'白屏现象',所以我们希望让前端来做路由,在某个生 阅读全文
posted @ 2021-06-30 11:23 urls 阅读(653) 评论(0) 推荐(0)
摘要:1.在虚拟环境中初始化vue vue init webpack renranweb vue项目目录: 2.配置前端访问后端地址,在src目录前settings.js文件中加入 export default { 'host': 'http://127.0.0.1:8000', } 3. index.j 阅读全文
posted @ 2021-05-20 09:47 urls 阅读(153) 评论(0) 推荐(0)
摘要:1.什么是组件化开发? 组件(Component)是自定义封装的功能。在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能。 而在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js来定义功能的特效,因此就产生了把一 阅读全文
posted @ 2021-04-13 10:00 urls 阅读(312) 评论(0) 推荐(0)
摘要:1.什么是同源? 同源策略,是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址(例如服务端接口地址与浏览器客户端页面地址)之间比较,是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有明确授权的情况下,没有权限读写对方信息。 ajax本质上还是 阅读全文
posted @ 2021-04-13 09:30 urls 阅读(503) 评论(0) 推荐(0)
摘要:1.使用.stop和.prevent <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: tan; height: 200 阅读全文
posted @ 2021-04-12 15:47 urls 阅读(1898) 评论(0) 推荐(0)
摘要:1.每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数,我们可以使用这些函数,在对象创建的不同阶段加上我们需要的代码,实现特定的功能。 <!DOCTYPE html> <html lang="en"> <head> <meta chars 阅读全文
posted @ 2021-04-12 14:31 urls 阅读(84) 评论(0) 推荐(0)
摘要:1.计算属性 我们之前学习过字符串反转,如果直接把反转的代码写在元素中,则会使得其他同事在开发时时不易发现数据被调整了,所以vue提供了一个计算属性(computed),可以让我们把调整data数据的代码存在在该属性中。其实计算属性主要用于监听,可以监听多个对象. <!DOCTYPE html> < 阅读全文
posted @ 2021-04-12 11:25 urls 阅读(406) 评论(0) 推荐(0)
摘要:过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中。 定义过滤器的方式有两种,全局和局部过滤器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</titl 阅读全文
posted @ 2021-04-12 10:25 urls 阅读(190) 评论(0) 推荐(0)
摘要:1.列表渲染指令v-for 在vue中,可以通过v-for指令可以将一组数据渲染到页面中,数据可以是数组或者对象。 <!-- v-for不仅可以遍历数组,还可以遍历对象,这里大家记住v-for里面的一个东西 :key, 就是v-bind:key,这个key是干什么的呢,就是为了给现在已经渲染好的li 阅读全文
posted @ 2021-04-12 09:29 urls 阅读(274) 评论(0) 推荐(0)
摘要:示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #card{ width: 500px; height: 350px; } .title{ height 阅读全文
posted @ 2021-04-11 22:58 urls 阅读(181) 评论(0) 推荐(0)
摘要:1. 控制标签style样式 格式1:值是json对象,对象写在元素的:style属性中 标签元素: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="vie 阅读全文
posted @ 2021-04-11 22:48 urls 阅读(1967) 评论(0) 推荐(0)
摘要:1.操作样式 控制标签class类名 格式: <h1 :class="值">元素</h1> 值可以是对象、对象名、数组(数组的方式用的比较少) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</t 阅读全文
posted @ 2021-04-11 22:24 urls 阅读(133) 评论(0) 推荐(0)
摘要:1.事件绑定v-on和methods属性 有两种事件操作的写法,@事件名 和 v-on:事件名 <button v-on:click="num++">按钮</button> <!-- v-on 是vue1.x版本的写法 --><button @click="num+=5">按钮2</button> 阅读全文
posted @ 2021-04-11 21:53 urls 阅读(218) 评论(0) 推荐(0)
摘要:vue显示与隐藏密码. 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-widt 阅读全文
posted @ 2021-04-11 21:00 urls 阅读(206) 评论(0) 推荐(0)
摘要:1. vue常用的指令有哪此? 在vue中,提供了很多指令,常用的有:v-html、v-if、v-model、v-for等等。 示例代码: v-html v-text v-text相当于js代码的innerText,相当于我们上面说的模板语法,直接在html中插值了,插的就是文本,如果data里面写 阅读全文
posted @ 2021-04-11 20:58 urls 阅读(405) 评论(0) 推荐(0)
摘要:vue是一个前端框架,封装的是原生js, vue里面封装的基本都是es6的方法. 1.vue.js的快速入门使用. 官方网站: 中文:https://cn.vuejs.org/ 英文:https://vuejs.org/ 官方文档:https://cn.vuejs.org/v2/guide/ vue 阅读全文
posted @ 2021-04-11 19:53 urls 阅读(1910) 评论(0) 推荐(0)