VUE
文章平均质量分 52
PanDa____
努力努力再努力
展开
-
Vue Props是什么
props相当于一个组建的输入,和JS中function(a,b){}中的a和b很像,是一种参数 如图展示 const foo={ props:['title'], template:'<div>局部组件{{title}}</div>', }; const a=new Vue({ el:'#app', components:{foo}, template:'&l原创 2022-02-23 17:51:38 · 3220 阅读 · 0 评论 -
vue 组件生命周期
所有生命周期钩子的this上下文将自动绑定至实例中,因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文,所以this不会指向预期的组件实例,并且this.fetchTodos将会是 undefined。 组件生命周期分为11种: 1)创建beforeCreate、created 2)挂载beforeMount...原创 2022-02-23 14:42:55 · 687 阅读 · 0 评论 -
Vue 组件全局注册与局部注册
实现以下效果 Html <div id='app'></div> Js //局部注册 let fot={ data(){ return{ count:0, } }, template:'<div>foot {{count}}<button @click="count++">点.原创 2022-02-23 12:13:43 · 1006 阅读 · 0 评论 -
vue实现对数据的渲染和删除
实现如下页面效果: 页面样式: <style> *{padding:0;margin: 0;} tr{line-height: 40px; } th,td{text-align: center; border: 1px solid #ccc;} ul{width:12.5rem; box-sizing: border-box; display: -webkit-box; -webkit-box-orient:horizontal; -we原创 2022-02-23 10:45:20 · 1170 阅读 · 0 评论 -
简易水果购物车效果实现与reduce()函数累加器
<div id="fruit"> <ul> <li v-for="item in products"> {{item.name}}--{{item.count}} <span v-show="item.count==0">卖没啦</span> <button @click="item.count++"&g.原创 2022-02-21 16:41:28 · 357 阅读 · 0 评论 -
VUE循环 排序 多条件判断添加样式
1.使用v-for对数据进行渲染并按照语文成绩从高到低进行排序 <div id="sorting"> <table> <tr v-for="(item,index) in sortScore"> <td>{{index}}</td> <td>{{item.name}} </td原创 2022-02-21 15:00:28 · 1494 阅读 · 0 评论 -
从本地引用VUE
1.切换目录 2.创建文件夹 3.初始化项目 执行命令npm init -y 路径选错了应该是E:\VueSpace\vue_two>npm init -y ,领会精神 执行结果: 文件夹里会写入这么一个文件 4.通过npm安装vue 执行命令npm i vue 执行结果 5.需要引用的vue.js位置如图 ...原创 2022-02-21 14:37:05 · 841 阅读 · 1 评论 -
v-if与v-show的不同
false状态下 v-show为隐藏状态而v-if dom不加载适用于懒加载 而true状态下两者没有什么区别原创 2022-02-20 16:38:10 · 182 阅读 · 0 评论 -
Vue-cli创建项目步骤
一. 使用 vue-cli 搭建项目 下面整个过程是基于已经安装node.js和cnpm的基础上,node.js如何安装就不在这里详说了。 如何全局化安装cnpm,这里简单提一下: npm install cnpm -g --registry=https://registry.npm.taobao.org 其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,个人觉得使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是觉得使用cnpm稳一点。 (1)全局安装 vue-原创 2021-10-05 15:47:25 · 16079 阅读 · 0 评论