〆﹏为你伏笔-CSDN博客

先看一下代码<!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 108

原创 vue中data为什么要用函数

vue组件化的最重要特点就是可复用性，如果data是对象，每个实例调用时数据所存储的位置都是相同的，一个实例中数据的更改其余的也会更改。使用函数调用时就会重新分配一个地址，各数据之间就没有关联。<body> <div id="app"> <cpn1></cpn1> <cpn1></cpn1> <cpn1></cpn1> <br&g

2022-05-30 17:04:27 218

原创 vue中MVVM模型浅谈

MVVM模型中M(model)后端传的数据，V(view)所看到的dom页面，VM(ViewModel)Vue的实例。自己感觉其实就是通过ViewModel实现后台数据与页面的双向绑定。

2022-05-30 16:39:17 98

原创 vue脚手架的安装

npm的安装cnpm的安装cnpm(淘宝镜像)是国内的，执行效率比npm高如果你已经安装了npm(即安装过脚手架)，那么只需要执行第一步就可以了。yarn的安装同样，如果你安装过npm只需要执行前两步就行。更改默认选项，在C盘用户里面。...

2022-05-26 19:05:12 79

原创 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 649

原创 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 507

原创 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 76

原创 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 165

原创 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 155

原创 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 1165

原创 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 352

原创 watch的三种写法

<body> <div id="app"> <h2>{{watchFullName}}</h2>  <h2>{{getFullName()}}</h2> <h2>{{getFullName()}}</h2> <h2.

2022-05-23 23:33:08 619

原创计算属性的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 1157

原创 Vue循环实现累加的七种方法

只是把之前的知识又复习一遍。<body> <div id="app"> <h2>总价：{{totalPrice}}</h2> </div> <script> const vm = new Vue({ el: "#app", data() { return {

2022-05-23 19:03:01 5726

原创 v-for与v-bind结合使用

2022-05-19 20:31:19 236

原创 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 214

原创 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 77

原创 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 105

原创初识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 70

Q2159621453的博客

原创组件间传参的六种方法----------provide与inject

原创组件间传参的六种方法----------$attrs与$listeners

原创 vue命名视图

原创 Vue路由的嵌套（chidren）

原创 vue-router编程式导航

原创手写vue-router

原创初识react

原创 vue父子间的通讯