![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue学习
An_1999
这个作者很懒,什么都没留下…
展开
-
vue url 动态拼接
vue url 动态拼接接口地址原创 2022-07-12 16:15:15 · 667 阅读 · 1 评论 -
Vue记录封装方法
Vue记录封装的方法原创 2022-06-10 16:16:22 · 103 阅读 · 0 评论 -
vue手打穿梭框 + Ant Design Vue
vue手打穿梭框 + Ant Design Vue父组件<template> <div class="transfer SF_removed_move"> <div class="left"> <toAddCamera ref="clickToCamera" :cameraTo="cameraToAdd"></toAddCamera> </div> <div class="center原创 2022-05-20 17:18:21 · 580 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/20(v-for、v-on、v-model应用)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hell world</title> <script src='./vue.js'></scrip...原创 2019-10-20 21:46:40 · 104 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/19有时我们需要多个插槽。例如对于一个带有如下模板的 组件:<div class="container"> <header> <!-- 我们希望把页头放这里 --> </header> <main> <!-- 我们希望把主要内容放这里 --> </main&...原创 2019-10-19 20:33:51 · 91 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/18(插槽)将 元素作为承载分发内容的出口。它允许你像这样合成组件:<navigation-link url="/profile"> Your Profile</navigation-link>然后你在 的模板中可能会写为:<a v-bind:href="url" class="nav-link"> ...原创 2019-10-18 20:29:54 · 153 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/17(事件名)不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase (驼峰式)名字的事件:this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何效果的:<!-- 没有效果 --><my-compo...原创 2019-10-17 21:46:41 · 107 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/16(Prop 的大小写)HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:Vue.component('blog-post', { // 在 JavaScript 中是 camelCas...原创 2019-10-16 21:01:42 · 120 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/15(组件注册)定义组件名的方式有两种:使用 kebab-caseVue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 。使用 PascalCaseVue.component('MyC...原创 2019-10-15 18:36:07 · 121 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/14(组件基础)把我们要重复使用的功能封装成组件,可以使开发变得更高效,更方便。<div id="app"> <button-counter></button-counter> <button-counter></button-counter> //组件可复用,互不...原创 2019-10-14 20:37:03 · 257 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/13(表单输入绑定)v-model 指令在表单 、 及 元素上创建双向数据绑定。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:t...原创 2019-10-13 17:04:35 · 153 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/12(事件处理)然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。<div id="app"> <div id="example-1"> <button v-on:click="counter += 1"> 数值 : {...原创 2019-10-12 18:10:28 · 256 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/11v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </di...原创 2019-10-11 17:49:48 · 95 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/8Vue.js的应用分为两个组成部分一个是视图一个是脚本引用Vue脚本的时候会生成一个Vue全局变量在new Vue中有两个重要属性,(1)el即element(元素),利用ID选择器的方式选中div里的元素(2)data,data用于保存数据,视图中声明的那些变量,就需要在data中注册这些变量,并且为这些变量进行初始化赋值。 <script type=...原创 2019-10-10 21:09:07 · 115 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/9(实例生命周期钩子)实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。生命周期钩子需要写在new Vue传递的这个对象内,以属性的方式声明,这个属性是一个函数,在这个Vue应用运行的每一...原创 2019-10-10 21:05:57 · 105 阅读 · 0 评论 -
Vue学习
Vue学习2019/10/10(class与style绑定)active 样式是否绑定到div样式上取决于 isActive变量。 v-bind:class="{active:isActive} " style="width:200px; height:200px; text-align:center; line-height:200px;"> hi vue });...原创 2019-10-10 21:01:21 · 112 阅读 · 0 评论