Vue
Vue基础知识
oneheart初心
这个作者很懒,什么都没留下…
展开
-
Vue 监听子组件事件的几种方法
1.在Vue实例模板上监听,并调用Vue实例的方法直接使用v-on绑定事件并调用即可。<body> <div id="app"> <button @click="vueSay(0)">组件0</button> </div> <script> new Vue({ methods: { vueSay(num) { console.log('组件' + num +原创 2020-07-22 00:23:52 · 5855 阅读 · 0 评论 -
Vue 入门基础知识(三)条件渲染和列表渲染
一、条件渲染v-if v-else v-else-if指令用法与if else else if类似。v-showv-show 的元素始终会被渲染并保留在 DOM 中。v-if和v-show的区别v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。v-show 总是会渲染元素,并且只是简单地基于 CSS 进行切换(CSS的display原创 2020-07-06 16:03:38 · 196 阅读 · 0 评论 -
Vue入门基础知识(一)Vue的介绍、安装和模板语法
前置知识框架和库框架:是一套完整的解决方案,对项目的侵入性较大,如果需要更换框架,则需要重新架构整个项目。库:提供一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其他库实现需求。一、Vue介绍与安装vue的特点核心只关注视图层轻量,灵活适用于移动端项目渐进式框架对渐进式的理解声明式渲染组件系统客户端路由(vue-router)大规模状态管理(vuex)构建工具(vue-cli)###安装vue//cdn的方式<script src="原创 2020-07-06 13:20:50 · 110 阅读 · 0 评论 -
Vue利用计算属性和侦听属性实现简易计算器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router.js" type="text/javascript原创 2020-06-24 14:53:30 · 1867 阅读 · 0 评论 -
vue-router 命名视图-嵌套
如果 < router-view >设置了名称,则会渲染对应的路由配置中 components 下的相应组件。一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。.parent{ background-color: #aaa; height: 200px;}.child1{ background-color: #FF0000; height: 50px;}.child2{ background-color: #FFFF00; height: 50px;.原创 2020-06-23 23:29:35 · 304 阅读 · 0 评论 -
vue-router 命名视图-同级
.v-enter, .v-leave-to { opacity: 0; transform: translateX(20px);}.v-enter-active, .v-leave-active { transition: all .3s ease;}<div id="app"> <h1>命名视图-单路由多组件切换</h1> <ul> <li> <router-link to="/">/</route原创 2020-06-23 21:07:45 · 151 阅读 · 0 评论