vue
〆﹏为你伏笔
前端小白,可能会发文章记录自己的学习生涯,如有错误,希望指正
展开
-
组件间传参的六种方法----------provide与inject
app.vueFatherDom.vuesonChild.vue原创 2022-06-27 20:17:35 · 352 阅读 · 2 评论 -
组件间传参的六种方法----------$attrs与$listeners
我定义了四个组件(包含关系如下) FatherDom.vue SonDom.vueSonChild.vueChildChild.vueFatherDom.vueSonDom.vue SonChild.vueChildChild.vue父向子传递函数。子向父传递函数,写法相似, 不过需要$emit原创 2022-06-27 20:06:58 · 429 阅读 · 0 评论 -
vue命名视图
当实现头部或侧边栏的复用时可能会用到命名视图。App.vueindex.js原创 2022-06-17 11:56:51 · 569 阅读 · 0 评论 -
Vue路由的嵌套(chidren)
1、index.js引入路由组件2、父路由渲染(例子上的AboutView)原创 2022-06-16 14:04:52 · 239 阅读 · 0 评论 -
vue-router编程式导航
编程式导航点击时会有一些错误,需要改写push方法(index.js中改)原创 2022-06-13 14:14:18 · 88 阅读 · 0 评论 -
手写vue-router
1、写出路由规则(index.js配置)2、引入挂载路由3、使用路由(App.vue所有组件的父组件)原创 2022-06-13 13:50:06 · 96 阅读 · 0 评论 -
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 · 109 阅读 · 0 评论 -
vue中data为什么要用函数
vue组件化的最重要特点就是可复用性,如果data是对象,每个实例调用时数据所存储的位置都是相同的,一个实例中数据的更改其余的也会更改。使用函数调用时就会重新分配一个地址,各数据之间就没有关联。<body> <div id="app"> <cpn1></cpn1> <cpn1></cpn1> <cpn1></cpn1> <br&g原创 2022-05-30 17:04:27 · 220 阅读 · 0 评论 -
vue中MVVM模型浅谈
MVVM模型中M(model)后端传的数据,V(view)所看到的dom页面,VM(ViewModel)Vue的实例。自己感觉其实就是通过ViewModel实现后台数据与页面的双向绑定。原创 2022-05-30 16:39:17 · 99 阅读 · 0 评论 -
vue脚手架的安装
npm的安装cnpm的安装cnpm(淘宝镜像)是国内的,执行效率比npm高如果你已经安装了npm(即安装过脚手架),那么只需要执行第一步就可以了。yarn的安装同样,如果你安装过npm只需要执行前两步就行。更改默认选项,在C盘用户里面。...原创 2022-05-26 19:05:12 · 80 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 511 阅读 · 0 评论 -
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 · 78 阅读 · 0 评论 -
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 · 167 阅读 · 0 评论 -
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 · 156 阅读 · 0 评论 -
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 · 1180 阅读 · 0 评论 -
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 · 354 阅读 · 0 评论 -
watch的三种写法
<body> <div id="app"> <h2>{{watchFullName}}</h2> <!-- methods即使firstName与lastName没有改变,也会再次执行 --> <h2>{{getFullName()}}</h2> <h2>{{getFullName()}}</h2> <h2.原创 2022-05-23 23:33:08 · 620 阅读 · 0 评论 -
计算属性的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 · 1173 阅读 · 0 评论 -
Vue循环实现累加的七种方法
只是把之前的知识又复习一遍。<body> <div id="app"> <h2>总价:{{totalPrice}}</h2> </div> <script> const vm = new Vue({ el: "#app", data() { return {原创 2022-05-23 19:03:01 · 5850 阅读 · 0 评论 -
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 · 238 阅读 · 0 评论 -
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 · 215 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
初识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 阅读 · 0 评论