新手小白请求出战！-CSDN博客

原创使用模块作为出口

使用需要暴露到外面的变量，使用一个模块作为出口。步骤：1.在函数内部，定义一个对象。 2.给对象添加各种需要暴露到外面的属性和方法。 3.最后将这个对象返回，并且在外面使用一个MoudleA来接收。在main.js中，需要使用属于自己的模块的属性和方法。常见的模块化规范：CommonJS，AMD，CMD，也有es6的Modules.模块化有两个核心：导入和导出。...

2020-11-23 18:49:29 165

原创编译作用域

父组件模板的所有东西都会在父级作用域编译；子组件模板的所有东西都会在子级作用域内编译。<body>  <div id="app"> <cpn v-show="isShow"></cpn> </div> <template id="cpn"> <div> <h2>我是子组件&l

2020-11-20 20:32:09 207

原创 slot具名插槽的使用

在插槽如果想改变某个值<body> <div id="app"> <cpn><span slot="center">标题</span></cpn> <cpn><button slot="left">left</button></cpn> </div> <template id="cpn"&gt.

2020-11-20 11:01:16 318

组件的插槽：组件的插槽也是为了让我们封装的组件更具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。如何封装合适？抽取共性，保留不同。1.最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。2.一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。3.是搜索框，还是文字，还是菜单，由调用者自己来决定。<body> <div id="app">

2020-11-20 09:46:26 593

原创组件访问-子访问父-$root

<body> <div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <h2>我是cpn组件</h2> <ccpn></ccpn> </div> </temp...

2020-11-19 21:23:28 133

原创组件访问-父访问子-refs

1.使用$children的方法<body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> <button @click="btnClick">按钮</button> </div> <template id="cpn"&gt

2020-11-19 20:49:09 145

原创组件通信-父子组件的案例

父传子<body> <div id="app"> <cpn :cnum1="num1" :cnum2="num2"></cpn> </div> <template id="cpn"> <div> <h2>props:{{cnum1}}</h2> <h2>data:{{dnumb.

2020-11-18 22:04:59 161

原创 Vue中的组件通信

组件通信父组件向子组件传递数据在组件中，使用选项props来声明需要从父级接收到的数据在props的值有两种方式：方式1：字符串数组，数组中的字符串就是传递时的名称。方式2：对象，对象可以设置传递时的类型，也可以设置默认值等。...

2020-11-18 10:49:02 105

原创 Vue组件中的data为什么必须是个函数

在创建或注册模板的时候，传入一个data属性作为用来绑定的数据。但是在组件中，data必须是一个函数，而不能直接把一个对象赋值给它。<body>  <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div> <template id

2020-11-17 20:55:53 96

原创 Vue中组件数据的存放问题

<body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div>   <!-- <script.

2020-11-17 20:31:18 266 1

原创 Vue中组件模板抽离的写法

第一种分离写法1.script标签，注意：类型必须是text/x-template<body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div><!-- 1.script标签，注意：类型必须是text/x-templat...

2020-11-17 20:00:21 507 2

原创 Vue中组件使用语法糖的方式

这是全局<body> <div id="app"> <cpn1></cpn1> </div> <script src="../vue.js"></script> <script> // 1.全局组件注册的语法糖 // 2.创建组件的构造器 // 以前的写法 // const cpnC1 ...

2020-11-17 19:44:03 510 1

原创 Vue中子组件和父组件

父组件和子组件：组件和组件之间存在层级关系而其中一种非常重要的关系就是父子组件的关系<body> <div id="app">  <cpn2></cpn2> </div> <script src="../vue.js"></script> <script&g.

2020-11-17 19:37:15 222

原创 Vue里面的全局组件和局部组件

大多数情况下，我们都是使用的局部组件，大概率只实例化一个app<body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div> <script src="../vue.js"></script> <scrip..

2020-11-17 17:27:48 96

原创 Vue中组件化的基本使用

注册组件的步骤：1.创建组件构造器2.注册组件3.使用组件<body>  <div id="app"> <!-- //

2020-11-17 17:08:14 197 2

原创 Vue中v-model结合修饰符的使用

lazy修饰符:默认情况下, v-model默认是在input事件中同步输入框的数据的。也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变lazy修饰符可以让数据在失去焦点或者回车时才会更新;number修饰符:默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符申类型进行处理但是如果我们希望处理的是数字类型,那么最好直按将内容当做数字处理。number修饰符可以让在输入框中输入的内容自动转成数字类型trim修饰符:如果输入的内容..

2020-11-17 10:41:51 601 1

原创 v-model结合select的使用

1.下面是选择一个和选择多个的时候的情况<body> <div id="app">  <select name="abc" id="" v-model="fruit" > <option value="苹果" >苹果</option> <option value="香蕉" >香蕉</option&gt

2020-11-16 20:40:27 595

原创 Vue中v-model结合checkbox类型

1.单选框<body> <div id="app"> <label for="agree"> <input type="checkbox" id="agree" v-model="isAgree">同意协议 </label> <h2>您选择的是：{{isAgree}}</h2> <button :disabled="!

2020-11-16 20:26:47 360

原创 Vue中v-model结合radio的类型

<body> <div id="app">  <label for="male"> <input type="radio" id="male" name="sex" value="男" v-model="sex">男 </label> <label for="female"&gt.

2020-11-16 19:26:40 304

原创 Vue中v-model的双向绑定

v-model的双向绑定原理：通过v-bind将model数据绑定进页面，然后又通过v-on绑定事件来监听页面的变化，并将变化了的数据重新绑定进model数据中。<body> <div id="app"> <input type="text" v-model="message">  <!-- <input type="tex

2020-11-16 17:42:10 224

原创高阶函数的运用

需求：取出所有小于100的数字函数式编程：命令式编程/声明式编程编程范式：面向对象编程(第一公民:对象)/函数式编程(第一公民：函数)下面是普通写法const nums = [10, 20, 30, 40, 554];let newNums = [];for (let n of nums) { if (n < 100) { newNums.push[n]; }}//2.将所有小于100的数字进行转化：全部*2let new2Nums = []

2020-11-16 16:02:41 192

原创 VUE-书籍购物车案例

要求：可以实现购买数量增加和减少的操作，还有移除，以及在增加和删除的时候显示价格，如果当全部移除时，把购物车为空显示出来话不多说，上代码这是html的<body> <div id="app"> <div v-if="books.length"> <table> <thead> <tr>

2020-11-13 22:19:10 885

原创 VUE点击不同的列显示颜色

要求：一个点击谁时，谁就变成红色<body> <div id="app">  <ul> <li v-for="(item,index) in movies" :class="{active:currentIndex===index}" @click='liClick(index)'>{{ite.

2020-11-13 16:03:08 273

原创 VUE里面那些数组方法是响应式的？

今天我们来了解一下。哪些方法是响应式的1.push方法2.pop()方法3.shift方法4.unshift()方法5.splice（）方法6.sort（）方法7.reverse（）方法<body> <div id="app"> <ul> <li v-for="item in letters">{{item}}</li> </ul>.

2020-11-13 15:40:20 95

原创 VUE中v-for使用过程添加key

<body> <div id="app"> <ul>  <li v-for="item in letters" :key="item ">{{item}}</li>  </ul> <.

2020-11-13 14:32:07 676

原创 Vue里面的循环遍历

1.v-for遍历数组时<body> <div id="app">  <ul> <li v-for="item in names">{{item}}</li> </ul>  <ul>

2020-11-12 20:57:21 418

原创 Vue里面v-show的使用

1.v-show和v-if的区别<body> <div id="app"> <h2 v-if="isShow" id="aaa">{{message}}</h2> <h2 v-show="isShow" id="bbb">{{message}}</h2> </div> <script src="../vue.js"></script>

2020-11-12 20:11:12 1391

原创 vue里面的条件渲染案例

1.通过按钮切换不同的状态<body> <div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号"> </span> <spa

2020-11-12 19:55:19 123

原创 vue里面的条件判断

1.v-if和v-else的结合使用<body> <div id="app"> <h2 v-if="isShow"> <div>abc</div> <div>abc</div> <div>abc</div> <div>abc</div>

2020-11-12 16:36:56 737

原创 vue里面的事件监听

1.v-on的基本使用 <body> <div id="app"> <h2>{{counter}}</h2>  <!-- <button v-on:click="counter++">+</button> <button v-on:click="counter--"&

2020-11-12 16:11:31 596

原创 vue的学习记录1

1.1认识vue.js 1.为什么学习vue.js 2.vue的读音 3.vue的渐进式 4.vue的特点1.2安装vue 1.cdn的引入 2.下载引入 3.npm安装1.3vue的初体验1.hello vue.js mustache ->体验vue的响应式2.vue列表展示.v-for.后面给数组追加元素的时候，新的元素也可以在界面中渲染出来3.vue计数器的小案例.时间监听：click->...

2020-11-12 09:54:30 77 1

原创 vue中计算属性的使用

1.计算属性的基本使用<body> <div id="app">  <h2>{{firstName+' '+lastName}}</h2>  <h2>{{firstName}} {{lastName}}</h2>

2020-11-11 21:32:12 1264

原创 3-v-bind动态绑定style的语法

<body> <div id="app">   .

2020-11-11 20:46:40 96

原创 2-vue-动态绑定属性

1.v-bind动态绑定class属性的对象语法点击按钮可以转化颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>...

2020-11-11 19:45:48 229

原创 1.vue的插值操作

1.v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点被视作为静态内容并跳过。 <div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2> </div> <script src="../vue.js"></script> <script>

2020-11-11 16:21:46 100

原创数组的创建，删除等一些方法

哈喽哈今天我又写了一些代码话不多说上代码小朋友们记得看注释哦前言：在JavaScript中的数据类型是弱类型，用var定义数组的时候，数组元素可以不同。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

2020-11-09 20:57:37 225 1

原创一个看完之后即将暴富的动画

小白写的一个简简单单的掉钱动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>搞钱</title> <script src="../jquery-1

2020-11-09 16:48:10 97

原创小王的日志

哈喽哈朋友们下午好啊跟你们港就是这不是双十一要到了吗然后我昨晚逛淘宝逛到一点多才睡哈哈哈哈很多衣服降价就很开心以前一百多的现在只要八九十了我已经很久没有买衣服了然后准备这两天好好选一下双十一冲一下在降价的基础上还还满两百减二十五就离谱对我来说像白给一样哈哈哈哈哈哈哈哈每次降价买东西就这样安慰自己不过大家还是要理性剁手哦...

2020-11-09 16:45:52 84

原创用JavaScript实现增删查改啦

只能继续当个美丽的程序员了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单的增删查改</title> <script src="./jquery-

2020-11-08 11:49:21 595 3

原创今日日志

哈喽哈喽好久不见跟大家说我最近在忙秋招的事情嘛我学的前端我自己觉得我自己学习的技术还没有达到可以去做技术岗位然后我就投了很多非技术岗位比如像什么实施顾问啥的不过我也在准备技术的面试哈我们目前还没有学习前端的框架比如像ajax，vue之类的不过为了应付面试官我还是背了很多然后我面试的技术岗位通过了面试的非技术岗位没通过真的是命运弄人不过从现在开始我要好好搞技术了为了钱害一起共勉既然没有让你如愿以偿的选择生活那就让生..

2020-11-08 11:39:32 79

空空如也

空空如也