![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE学习
文章平均质量分 53
Revin050
这个作者很懒,什么都没留下…
展开
-
项目笔记1(尚品汇)
项目创建与配置以及非路由组件与路由组件项目创建与配置首先利用脚手架创建项目,具体步骤如下。在桌面新建一个名为SPH的文件夹。进入后打开命令行,如下图所示。输入vue create app。之后选择vue2,生成项目。项目生成之后进行配置。配置三个地方。1浏览器自动打开在package.json文件中找到"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-servi原创 2022-03-12 16:37:45 · 1061 阅读 · 0 评论 -
Vue学习 23组件之间的通信2(自定义事件、全局事件总线、消息订阅)
组件通信 之前学过的组件通信是通过props进行的,这种方法比较繁琐,接下来介绍三种较为简单的组件通信方法。自定义事件一种组件间通信的方式,适用于:子组件 ===> 父组件使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。绑定自定义事件(假设事件名是getData):(1) 第一种方式,在父组件中:<Demo @getData="test"/>或 <Demo v-on:getData="test"/>原创 2022-02-23 17:42:29 · 143 阅读 · 0 评论 -
Vue学习 22webStorage存储
webStorageWindow.sessionStorageSessionStorage存储的内容会随着浏览器窗口关闭而消失。相关API:1. ```sessionStorage.setItem('key', 'value');``` 该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。2. ```sessionStorage.getItem('person');``` 该方法接受一个键名作为参数,返回键名对应的值。3. `原创 2022-02-22 21:38:25 · 208 阅读 · 0 评论 -
Vue学习 21混入、插件、scoped
混入、插件、scoped混入1.功能:可以把多个组件共用的配置提取成一个混入对象2.使用方式:第一步定义混合:```{ data(){....}, methods:{....} ....}```第二步使用混入: 全局混入:```Vue.mixin(xxx)``` 局部混入:```mixins:['xxx'] ```(局部混入与methods、data等同级)插件功能:用于增强Vue本质:包含install方法的一个对象,install的原创 2022-02-22 17:53:54 · 162 阅读 · 0 评论 -
Vue学习 20ref属性
ref属性在使用组件的时候,有时会需获取完整的DOM元素。以往获取完整DOM元素的方法是通过给DOM元素添加一个id或者其他属性,通过操作DOM拿到一个完整的DOM元素。但是这在vue中是不合适的,vue的目的就是不需要用户操作DOM直接实现功能。因此引出ref属性。ref属性的使用方法为$refs为了更好展示,以下面的组件代码为例说明。<!-- 父组件 --><template> <div> <h1 v-text="msg" ref="title原创 2022-02-22 17:45:51 · 273 阅读 · 0 评论 -
Vue学习 19组件之间的通信(props)
组件通信 在开发过程中,往往需要组件之间进行数据传输,这就涉及到了组件之间的通信父组件给子组件传递数据 父组件给子组件传递数据的方法是:父组件通过属性传递数据,子组件通过props接受数据。props接收数据有三种书写形式。 数据具体传输方法与接受数据的三种方式举例如下,假设父组件给子组件传递姓名与年龄。<!-- 父组件 --><template> <div> <!-- --> <People name="Revin" :a原创 2022-02-22 17:26:59 · 561 阅读 · 0 评论 -
Vue学习 18安装vue/cli
安装vue.cli配置npm淘宝镜像首先先配置npm淘宝镜像,加快vue.cli的安装速度配置方法如下配置代码:npm config set registry https://registry.npm.taobao.org安装vue.cli输入如下指令安装vue.cli,但此时会安装最新版本vue.cli。我运行如下命令安装了5.0.1版本,由于新版本和之前版本存在差异,并且还没有完全普及,所以我又换了4.5.15版本。更换版本首先卸载原版本,然后安装指定版本vue.cli。指令如下安装原创 2022-02-22 16:45:13 · 368 阅读 · 0 评论 -
Vue学习 17组件
组件Vue中使用组件的三大步骤: 一、定义组件(创建组件) 二、注册组件 三、使用组件(写组件标签) 这个过程类似绑定事件的过程。一、如何定义一个组件? 使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别; 区别如下: 1.el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。 2.data必须写成函数,为什么? ———— 避免组件被原创 2022-02-21 18:31:53 · 86 阅读 · 0 评论 -
Vue学习 16生命周期
生命周期生命周期的简单介绍1.生命周期又叫做:生命周期回调函数、生命周期函数、生命周期钩子。2.生命周期是:Vue在关键时刻帮我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm 或 组件实例对象。在Vue官网教学中,Vue实例=>实例生命周期钩子中列举了8个生命周期函数分别是:1.beforeCreate()2.created()3.beforeMount()4.mounted()(重点)原创 2022-02-20 22:55:23 · 346 阅读 · 0 评论 -
Vue学习 15内置指令与自定义指令
内置指令与自定义指令内置指令内置指令是Vue编写好的,用户可以直接使用,在以往的学习中,我们使用学习过了。v-bind : 单向绑定解析表达式, 可简写为 :xxxv-model : 双向数据绑定v-for : 遍历数组/对象/字符串v-on : 绑定事件监听, 可简写为@v-if : 条件渲染(动态控制节点是否存存在)v-else : 条件渲染(动态控制节点是否存存在)v-show : 条件渲染 (动态控制节点是否展示)这些都是内置指令,除了这些内置指令,还有v-t原创 2022-02-20 18:41:46 · 466 阅读 · 0 评论 -
Vue学习 14过滤器
过滤器过滤器的目的是对data进行特定格式化,随后显示出来过滤器的内容相对较少,通过实例来演示以下过滤器的用法以及注意事项。示例如下<body> <div id="demo"> <h2>显示格式化后的时间</h2> <!-- 计算属性实现 --> <h3>现在是:{{fmtTime}}</h3> <!-- methods实现 --> <h3>现在是:{{getFmtTim原创 2022-02-19 19:02:33 · 236 阅读 · 0 评论 -
Vue学习 13收集表单数据
收集表单数据 在上网注册各种应用的时候,都离不开账号的注册,账号注册的信息也就是填写表单的数据都会被收集整理起来。例如用户的账号名称、账号密码、姓名、年龄等。这就涉及到了如何收集表单数据的问题。在表单中常出现的有如下几种标签1.<input type="text"/> 文本2.<input type="password"/>密码3.<input type="radio"/>单选4.<input type="checkbox"/>复选5.<原创 2022-02-19 18:29:28 · 205 阅读 · 0 评论 -
Vue学习 12列表渲染
列表渲染v-for指令在列表渲染中首先介绍一下v-for指令。v-for指令:1.用于展示列表数据2.语法:v-for="(item, index) in xxx" :key=“yyy”3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)(1)遍历数组时返回的第一个参数是数组对象,第二个参数是数组对象索引值(2)遍历对象时返回的第一个参数是属性值,第二个参数是属性名(key)(3)遍历字符串时返回的第一个参数是字符,第二个参数是字符对应的索引值(4)遍历指定次数时返回的第一个原创 2022-02-18 23:43:30 · 442 阅读 · 0 评论 -
Vue学习 11条件渲染
条件渲染条件渲染主要为v-if和v-show。需要注意的是: 使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。v-if写法: (1).v-if=“表达式” (2).v-else-if=“表达式” (3).v-else=“表达式”适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。为了展示v-if的使用,展示示例如下<body> <d原创 2022-02-17 22:04:13 · 189 阅读 · 0 评论 -
Vue学习 10绑定样式
绑定样式绑定class在开发中,经常涉及到为元素增加类名、修改类名的操作。关于class样式的绑定有三种写法1.字符串写法(适用于)类名不确定,要动态获取。2.数组写法(适用于)要绑定多个样式,个数不确定,名字也不确定。3.对象写法(适用于)要绑定多个样式,个数确定,名字也确定,但不确定用不用。这三种方法在下面的实例中展示。<body> <div id="demo"> <!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 --&原创 2022-02-17 21:16:33 · 265 阅读 · 0 评论 -
Vue学习 9监视属性
监视属性监视属性watch,写法与computed类似。当我们需要监听属性变化时,就可以使用watch。watch中包含deep(深度监听)、immediate(立即执行)、与handler()handler()handler的调用发生在所监视的属性发生变化时。handler具有两个参数,分别为newVlaue和oldValue。如果实现一个功能,功能要求是点击按钮切换姓名,并且查看新旧名字的变化,那么watch的具体使用如下所示<body> <div id="demo原创 2022-02-17 17:41:31 · 181 阅读 · 0 评论 -
Vue学习 8计算属性
计算属性计算属性与属性的区别在Vue实例中的data里我们可以设置属性。举例来说,如果我想设置名字为’Revin’,年龄为26那么可以这么设置。在这个例子中name和age就是属性。const vm = new Vue({ el:'#demo', data:{ name:'Revin', age:26 } })计算属性与属性不同,计算属性可以对属性进行操作。例如在上个例子中,若想实现输出:Revin的年龄是26这个功能并且能随着输入进行修改,那么就可以采用原创 2022-02-17 16:01:32 · 135 阅读 · 0 评论 -
Vue学习 7事件处理
事件处理事件的基本使用事件修饰符键盘事件原创 2022-02-16 23:41:12 · 163 阅读 · 0 评论 -
Vue学习 6数据代理
数据代理Object.defineProperty方法首先介绍一下Object.defineProperty。该方法传入三个参数。第一个参数为需要修改的对象,第二个参数为需要修改的属性,第三个属性为配置项,配置项的主要内容有以下几个:1.value:这个用来设定属性值2.enumerable:这个用来控制属性是否可以枚举,它的默认值时false。需要枚举时可设置为true。3.writable:这个用来控制属性是否可以修改,默认值也是false。4.configurable:这个用以控制属性是否原创 2022-02-16 21:22:40 · 315 阅读 · 1 评论 -
Vue学习 5MVVM模型
MVVM模型的含义M:模型(Model) :data中的数据V:视图(View) :模板代码VM:视图模型(ViewModel):Vue实例举例来说简单来说,MVVM模型就是利用Vue将原本混乱的数据(M)展示到页面元素(V)中,同时页面元素(V)的修改也可以通过Vue对数据(M)进行修改。Vue在V与M中起到中介的作用。注意:通过观察发现1.在Vue实例中的data的属性会直接暴露在vm身上,可以直接使用。2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。原创 2022-02-15 10:17:09 · 265 阅读 · 0 评论 -
Vue学习 4el与data的两种写法
el与data的两种写法el的两种写法在Vue实例中,我们通常采用在配置文件中直接声明el的方法来连接dom元素。例如下面这样 <body> <div id="demo"> <h1>你好,{{name}}</h1> </div> <script type="text/javascript"> var x =new Vue({ el:'#demo', data:{ name:'Revin'原创 2022-02-15 10:00:32 · 294 阅读 · 0 评论 -
Vue学习 3数据绑定
数据绑定单向绑定(v-bind)单向绑定通俗来讲就是将Vue实例中的data值传输到页面中,而页面中的值无法修改Vue实例中的data数据。例如如下的v-bind实例。在该例子中,当Vue实例中的data数据进行变化时,表单元素的value也会相应变化,但当表单元素value变化时,Vue实例中的data数据却不会变化。 <div id="demo"> 单向绑定:<input type="text" :value="name"> </div> <原创 2022-02-14 19:59:04 · 575 阅读 · 0 评论 -
Vue学习 2模板语法
Vue中的模板语法插值语法在Vue中,共有两大类模板语法。插值语法的功能是用于解析标签体内容。具体举例如下 <body> <div id="demo"> <h1>你好,{{name}}</h1> </div> <script type="text/javascript"> var x=new Vue({ el: '#demo', data: { name: 'Revin' }原创 2022-02-14 19:30:59 · 173 阅读 · 0 评论 -
Vue学习 1初识Vue
Vue与传统方法的区别(以Hello Revin为例)传统方法渲染页面传统方法渲染页面代码如下<body><div id="demo"> <h1>Hello,Revin</h1></div></body> 传统渲染页面的方法是将传入的固定数据,在数据变化时修改较为麻烦。Vue方法渲染页面使用Vue方法完成Hello Revin实例的代码如下<head><!-- 首先需要引入Vue --&g原创 2022-02-14 00:13:14 · 195 阅读 · 0 评论