![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 74
蔚蓝色的风暴
我很想改变什么,但我得不到救赎
展开
-
Vue笔记(五):路由基础
路由用于组件间的跳转 首先定义组件: const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } 这是我们现在实例用的组件,实际项目中一个组件可能就是一整个页面 接下来我们创建一个路由对象 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component原创 2021-09-09 21:10:22 · 103 阅读 · 0 评论 -
Vue笔记(三):深入理解组件
在Vue笔记(二)中简单看了一下组件 现在做一个更详细的学习 来看一个经典的组件代码(来源于Vue官网) // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} tim原创 2021-09-07 20:44:40 · 197 阅读 · 0 评论 -
Vue笔记(二):条件渲染 列表渲染 事件绑定 表单输入绑定 组件 路由
条件渲染 使用v-if v-else-if v-else来实现条件渲染 示例如下 <div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else-if="type === 'C'">C</div> <div v-else>Not A/B/C</div> 如图所示,在vue类中对 type赋值,即可决定是否进行渲原创 2021-08-30 20:59:45 · 344 阅读 · 0 评论 -
Vue笔记(一):基本语法 实例 生命周期 指令 style绑定
基本语法 <div id="app"> {{ message }} </div> div的id是app,内容为一个名为message的变量 在js代码块内: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 声明一个名为app的对象,该对象是一个vue对象,其中element使用id选择器,选择了id为app的代码 块,并为变量message赋值"hello vue" 完成原创 2021-08-28 20:27:19 · 244 阅读 · 0 评论