- 博客(26)
- 收藏
- 关注
RSS订阅
1原创 组件间传参的六种方法----------$attrs与$listeners
我定义了四个组件(包含关系如下) FatherDom.vue SonDom.vue SonChild.vue ChildChild.vue FatherDom.vue SonDom.vue SonChild.vue ChildChild.vue 父向子传递函数。子向父传递函数，写法相似， 不过需要$emit
2022-06-27 20:06:58
512
原创 初识react
1.虚拟dom不加引号，加引号就是字符串2.html混入表达式用{}3.class用className4.内联样式 style={{key:value,key1:value1}}5.只能有一个根标签，多行使用（）6.标签必须闭合7.大括号必须写表达式，就是有返回值 循环小案例。...
2022-06-07 10:46:56
84
原创 vue父子间的通讯
先看一下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
2022-05-31 16:06:36
150
原创 vue中data为什么要用函数
vue组件化的最重要特点就是可复用性，如果data是对象，每个实例调用时数据所存储的位置都是相同的，一个实例中数据的更改其余的也会更改。使用函数调用时就会重新分配一个地址，各数据之间就没有关联。 <body> <div id="app"> <cpn1></cpn1> <cpn1></cpn1> <cpn1></cpn1> <br&g
2022-05-30 17:04:27
291
原创 vue中MVVM模型浅谈
MVVM模型中M(model)后端传的数据，V(view)所看到的dom页面，VM(ViewModel)Vue的实例。 自己感觉其实就是通过ViewModel实现后台数据与页面的双向绑定。
2022-05-30 16:39:17
154
原创 vue脚手架的安装
npm的安装 cnpm的安装 cnpm(淘宝镜像)是国内的，执行效率比npm高 如果你已经安装了npm(即安装过脚手架)，那么只需要执行第一步就可以了。 yarn的安装 同样，如果你安装过npm只需要执行前两步就行。 更改默认选项，在C盘用户里面。 ...
2022-05-26 19:05:12
127
原创 v-model的用法
1、v-model的使用原理。 <body> <div id="root"> <input type="text" :value="msg" @input="changeMsg"> <h2>{{msg}}</h2> </div> <script> const vm = new Vue({ el:"#root",
2022-05-26 10:00:00
710
原创 v-for详细
1.v-for遍历数组与对象，我实验后发现后面接in或of效果是一样的(可能也有什么是我没发现的，后面遇到了再来改)，数组可设置两个参数，对象可设置三个(多一个键值属性)。 <body> <div id="root"> <ul> <li v-for="item in names">{{item}}</li> <li v-for="(item,index) in nam
2022-05-25 19:54:40
591
原创 v-if与v-show
1、v-if <body> <div id="app"> <div v-if="age < 18">未成年</div> <div v-else-if=" age < 60">青壮年</div> <div v-else="age <80">暮年</div> </div> <script>
2022-05-24 19:18:34
136
原创 v-on的事件修饰符与按键修饰符
一、事件修饰符 1.阻止冒泡(重要) .stop <div id="app"> <div @click = "father"> father <div @click.stop = "son">son</div> </div> </div> <script> const vm = new Vue({
2022-05-24 18:48:29
220
原创 v-on 的传参
1、如果需要传参，在页面中的是实参，methods中的是形参。 <div id="app"> <div @click = "btn1('我是实参')">点我</div> </div> <script> const app = new Vue({ el:"#app", data(){ return {
2022-05-24 16:12:53
234
原创 methods与computed区别
methods与computed用法差不多 区别： 1.methods属性内的方法调用可以加括号，而computed属性内的方法调用不能加括号（computed内的fullName其实并不是function，他是简写，内部的setter与getter才是方法）。 <body> <div id="app"> <h2>{{getFullName()}}</h2> <h2>{{fullName}}</
2022-05-24 09:17:53
1315
原创 watch监听复杂数据类型
1、person内的数据改变，不会执行watch监听事件。即watch不能监听复杂数据类型。 需要深度解析才可以。 <body> <div id="app"> <div>FullName: {{person.fullName}}</div> <div>firstName: <input type="text" v-model="person.firstName"></div> .
2022-05-24 09:16:39
413
原创 watch的三种写法
<body> <div id="app"> <h2>{{watchFullName}}</h2> <!-- methods即使firstName与lastName没有改变，也会再次执行 --> <h2>{{getFullName()}}</h2> <h2>{{getFullName()}}</h2> <h2.
2022-05-23 23:33:08
686
原创 计算属性的setter与getter
1、每一个计算属性都包含一个 getter与setter. 2、计算属性会默认使用getter函数，setter函数并不常用，所以一般计算属性setter与getter都没有 3、setter函数内的形参是你修改的值。 <body> <div id="app"> <h2>{{fullName}}</h2> </div> <script> const app = new V
2022-05-23 20:11:17
1296
原创 Vue循环实现累加的七种方法
只是把之前的知识又复习一遍。 <body> <div id="app"> <h2>总价：{{totalPrice}}</h2> </div> <script> const vm = new Vue({ el: "#app", data() { return {
2022-05-23 19:03:01
6657
原创 v-for与v-bind结合使用
<script src="../vue.js"></script> <style> .active { color: red; } </style> <div id="app"> <ul> <li v-for="(item,index) in dataObj" :key="index" ...
2022-05-19 20:31:19
301
原创 v-bind动态绑定class
对象形式 <style> .active { color: red; } </style> <div id="app"> <p :class="{active:isactive}">学习vue的第二天</p> <!-- <p :class="getActive()">学习vue的第二天</p> --&
2022-05-19 20:24:23
269
原创 v-once,v-text,v-pre,v-cloak
v-once <body> <div id="app"> <h2 v-once>{{msg}}</h2> <h2>{{msg}}</h2> </div> <script> const app = new Vue({ el:"#app", data(){
2022-05-19 20:15:22
122
原创 v-bind,v-if,v-on,v-for,v-model,Mustache语法,v-html
v-bind <div id="app"> <span v-bind:title="msg">鼠标悬停查看动态信息</span> </div> <script src="../vue.js""></script> <script> const app = new Vue({ el: " #app", da
2022-05-19 19:57:37
147
原创 初识vue
<div id="app"> <h2>{{msg}}</h2> </div> <script src="../vue.js""></script> <script> const app = new Vue({ el: " #app ", data() { return { .
2022-05-19 13:40:21
104
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人