- 博客(33)
- 收藏
- 关注
RSS订阅原创 （八、路由组件传参）
路由组件传参（1）路由组件传参组件中使用$route会使之与其对应的路由形成高度耦合，从而使组件只能在特定的url上使用限制灵活性。（2）使用props解耦例：const User = { template: '<div>User {{ $route.params.id }}</div>'}const router = new VueRouter({ routes: [ { path: '/user/:id', component: User }
2020-06-11 16:38:19
213
原创 (七、重定向和别名)
重定向和别名（1）重定向通过routes配置完成，例：const router = new VueRouter({ routes: [ // 重/a定向到/b { path: '/a', redirect: '/b' } // 重定向的目标也可以是命名的路由 { path: '/a', redirect: { name: 'foo' }} // 也可以是一个方法，动态返回重定向目标 { path: '/a', redirect: to => {
2020-06-11 10:52:08
159
原创 （六、命名视图）
命名视图有时想同时展示多个视图，例创建一个布局，有sidebar（侧导航）和main（主内容）两个视图。这时命名视图就可以实现这些需求，界面中可以拥有多个单独命名的视图，而不是只有一个单独的出口。如果touter-view没有设置名字，则默认为default。...
2020-06-10 16:39:33
233
原创 （五、命名路由）
命名路由（1.）命名路由通过一个名称表示某个路由更方便。特别在链接一个路由，或执行一些跳转时。可创建Router实例的时候，在routes配置中给某个路由设置名称。const router = new VueRouter({ routes: [ { path:'/user/:userId', name:'user', component:User } ]})要链接到一个命名路由，可以给router-link的to属性传一个对象：<router-link
2020-06-08 15:15:12
538
原创 （四、编程式导航）
编程式导航在vue实例内部，可以通过$router访问路由实例。因此可以调用this.$router.push（1）想要导航到不同url，则使用router.push方法。这个方法会向history栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的url。（2）当点击<router-link>时，这个方法会在内部调用，所以点击<router-link :to="...">等同于调用router.push(...)。例：// 字符串router.push(
2020-06-08 14:45:49
353
原创 (三、v-router嵌套路由)
v-router嵌套路由应用界面通常由多层嵌套组件组合而成。同样url各段动态路径也按照某种结构对应嵌套的各层组件。嵌套路由则 可以很好地表达这种关系 。例：如果在实现上述页面要求时，就会用到嵌套路由。...
2020-06-05 16:37:42
97
原创 （二、v-router动态路由匹配）
v-router动态路由（1）初期（1）在模块化工程中使用，必须要通过Vue.use()明确安装路由功能。// 在router文件中的index.js，import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)（2）动态路由匹配...
2020-06-04 15:55:29
126
原创 十七、过滤器
过滤器过滤器可以用在两个地方：花括号插值和v-bind表达式。过滤器被添加在javascript表达式尾部，由"管道"符号指示，例：{{message | capitalize}}<!--在'v-bind'中--><div v-bind:id="rawid"></div>在组件的选项中定义本地过滤器，例：filters:{ capitalize:function(value) { if(!value)return '' value = va
2020-05-28 16:48:11
89
原创 十六、过渡&动画
进入/离开&列表过渡vue在插入更新或移除DOM时，提供多种不同方式应用过渡效果。（1.）在css过渡和动画中自动应用class（2.）可以配合使用第三方css动画库，如Animate.css（3.）在过渡钩子函数中使用javascript直接操作DOM。（4.）可以配合使用第三方javascript动画库。如Velocity.js（1.）单元素/组件过渡vue提供transition的封装组件，可以给任何元素和组件添加进入/离开过渡条件渲染（v-if）条件展示（v-
2020-05-28 09:32:05
121
原创 十三、插槽
插槽（1.）插槽内容 <template id="componentThree"> <p> 我是子组件模板 <slot></slot> </p> </template> <div id='app'> <...
2020-05-13 17:36:00
243
原创 十一、vue中的prop（父传子）
vue中的prop（父传子）组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过prop才能下发到子组件中。(1.)props是子组件访问父组件数据的唯一接口。(2.)子组件用props来接收父组件传过来的值。(3.)子组件想使用父组件传来的值时，就在props中声明一个变量，之后变量就可引用父元素的数据。（1.）prop的大小写H...
2020-04-27 15:47:22
467
原创 九、表单输入绑定
表单输入绑定用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。v-model会忽略所有表单元素的value、checked、selected的初始值而是总将vue实例的数据作为数据来源，应该在组件的data选项中声明初始值。v-model在内部不同的输入元素使用不同属性并抛出不同事件。text...
2020-04-22 17:18:49
84
原创 十、组件注册
组件注册（1.）全局组件注册全局都可用Vue.component('conponent-a',{....})例：<div id="app"> <componentA></componentA></div><template id="componenta"> <div>This is component...
2020-04-22 17:10:44
92
原创 八、事件处理
事件处理（1.）监听事件使用v-on指令监听DOM事件。在触发时运行js代码<div id="app"> <button v-on:click="counter += 1">加1</button> <p>The number {{counter}}</p></div><script> new V...
2020-04-17 14:51:37
123
原创 六、vue中key值的作用
vue中key值的作用（1）管理可复用的元素vue会复用已有的元素而不是重新开始渲染。比如登录和注册框来回切换，但也存在问题,当切换时用户输入的内容不会改变，因为两个模板使用一样的元素，里面的input标签不会被替换。如下：<div id="app"> <div v-if="loginType === 'username'"> <la...
2020-04-14 10:24:19
593
原创 五、Class与Style绑定
class与style绑定（1）class绑定+ （1.1）传给v-bind:class一个对象，动态的切换class，例：<div id="app"> <div :class="{active:isActive,newfont:changeFont}"> 天气很好 </div></div><script&...
2020-04-07 08:59:30
64
原创 四、计算属性
四、计算属性（1）计算属性 + 缓存机制，不必频繁的 + 运用复杂逻辑时使用计算属性 + 计算属性的值在变化之后会再次执行之后返回新的值<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computer reversed messe...
2020-04-03 14:44:08
111
原创 三、vue内置指令与自定义指令
三、vue指令（1.）常用内置指令 + v:txt 指令一（v-bind 简写为 :） ：强制数据绑定指令二（v-on 简写为 @） ：绑定监听事件指令三（v-model）...
2020-04-02 11:36:42
169
原创 二、vue大概了解
二、vue大概了解（1）引入vue.js（2）创建Vue对象 + el:指定根element（选择器） + data：初始化数据（页面可以访问）（3）双数据绑定：v-model（4）显示数据：{{xxx}}（5）理解vue的MVVM实现MVVM（Model-View-ViewModel）模型解析：View: + 1.指令 ...
2020-04-01 09:48:19
74
原创 一、vue初步了解
一、初识vue（1）vue是什么？ 一个构建用户界面的渐进式框架，全面接管web开发。（2）vue特点 1.遵循MVVM模式 2.编码简洁，体积小，运行效率高，适合移动/PC端开发 3.本身只关心UI，可以轻松引入vue插件或其他第三方库开发工具（3）vue扩展插件 1.vue-cli: vue手脚架（下载基于vue的项目） 2.vue-resour...
2020-03-31 14:32:13
129
原创 js(五、js中内置对象)
对象方法内置对象：js里已经定义好的对象，有现成的属性和方法供我们使用。js中共有17个内置对象：Array：（1.）length：得到数组长度。（2.）push（你要追加的元素）：向数组的结尾追加元素。（栈方法后进先出）（3.）pop（）：删除数组最后一位元素。（栈方法后进先出）（4.）unshift（）：向数组的开头添加元素。（队列方法先进先出）（5.）shift（）：删除...
2020-01-28 15:29:46
235
原创 javascript(四、函数及控制语句)
控制语句if条件判断语句if(条件){ 条件成立执行的代码部分}else{ 条件不成立执行的代码部分}条件判断语句中的判断规则：条件判断中只有6中情况算false其他的都为true。falseundefinednullNaN“” (空字符)函数（方法）函数（方法）：：封装执行一项专门任务的代码段，且函数不调用是不执行的。语法：function 方法名（参数）{作...
2019-11-18 17:58:13
121
原创 javascript(二、初始化及数据的类型，数据类型的转化)
变量的使用声明变量 用var来声明。命名规范，不要用大写，要用英文，不能用特殊符号，不能用特殊符号，不能用纯数字，不能以数字打头，不能加空格。命名需起到见名知意作用。关于初始化var data = 123;js中等号 " = " 读作赋值，把等号后边的数据存放在左边的变量中。使用变量名相当于使用里面的数据。变量是允许更改的。变量无需重新声明。var data...
2019-11-15 14:40:51
302
原创 javascript（一、简介）
js中输出方式 console.log(123);新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到...
2019-11-12 15:30:18
77
原创 前端学习（二、块的划分，css选择器，命名规则）
html块的划分画块原则: 同一个层级的元素不能既在一行上显示又在一列上显示。css选择器1.选择元素的后代：.font span{color:red;}<div class="font"> <span>123</span> <div>pppp</div> <span>666</span><...
2019-10-18 16:50:48
203
原创 前端学习（三、改变元素位置方法与浮动）
html元素分类html元素分为两大类：块元素：1.独占一行，有宽高。如：div。2.如果默认不设宽，宽度会是父元素的100%。内联元素：1.不独占一行，无宽高。如：span.2.内联元素可以设置margin，padding，但只在水平方向有效。3.宽高不可设。元素一行排不开会自动换行。元素默认不设高，高度为零，里面有子级的。高度由子级决定。改变元素位置方法：1. 浮动：...
2019-10-18 14:53:08
1141
原创 前端学习（一、html中添加css样式的方法）
前端学习（基础）你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。网页组成网页是构成网站的基本元素，承载各种网站应用的平台。网页由html，css，js构成。html ，搭建网页基本框架；css，美化网页样式；js ，增加页面功能，使页面有动态交互效果；标...
2019-10-11 22:45:17
930
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人