Vue
关注
分享
扫一扫
文章平均质量分 54
Mr.菜园子
欢迎关注，如想查看新篇，请关注我个人的博客吧：www.sddzcyz.cn
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue-17 多个组件示例
效果演示可将 组件注册 抽取在一个一个的 js 文件中方便管理 在 vue-05-组件化 目录下创建 component 目录存放组件: Header.js Main.js Footer.jsHeader.js内容Vue.component('app-header',{ template: '<div class="header"><h1>头部组件</h1></div>'})Main.js内容Vue.componen.原创 2021-03-13 23:05:54 · 165 阅读 · 0 评论 -
vue-16 组件的概念及基本使用
组件（component） 是 Vue.js 最强大的功能之一。Vue 中的组件化开发就是把网页的重复代码抽取出来 ，封装成一个个可复用的视图组件，然后将这些视图组件拼接到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率。通常一套系统会以一棵嵌套的组件树的形式来组织：例如：项目可能会有头部、底部、页侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。组件就是对局部视图的封装，每个组件包含了HTML 结构 CSS 样式 Jav原创 2021-03-10 22:37:52 · 179 阅读 · 0 评论 -
vue-15 自定义插件
插件的作用插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等 Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能 通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成.案例演示开发插件(function(){ //声明 MyPlugin 插件对象 const MyPlugin = {} MyPlugin.install = function (Vue,原创 2021-03-09 22:17:28 · 141 阅读 · 0 评论 -
vue-14 过滤器
什么是过滤器过滤器对将要显示的文本，先进行特定格式化处理，然后再进行显示注意：过滤器并没有改变原本的数据, 只是产生新的对应的数据使用方式1. 定义过滤器：全局过滤器：局部过滤器：在Vue实例中使用 fifilter 选项 ， 当前实例范围内可用梦学谷mengxuegu.com第五章 Vue 过滤器和插件5.1 过滤器5.1.1 什么是过滤器过滤器对将要显示的文本，先进行特定格式化处理，然后再进行显示注意：过滤器并没有改变原本的数据, 只是产生新的原创 2021-03-07 20:49:45 · 162 阅读 · 1 评论 -
vue-13 经典实战项目——TodoMVC
TodoMVC 是一个非常经典的案例，功能非常丰富，并且针对多种不同技术分别都开发了此项目，比如 React、AngularJS、JQuery等等。 TodoMVC 案例官网：https://todomvc.com/examples/vue/ 在官网首页右下角， 有 案例的模板下载 和 开发规范（需求文档），如下图： 数据列表渲染当任务列表（items ）没有数据时， #main 和 #footer 标识的标签应该被隐藏 任务涉及字段 : id 、任务名称（name ）、是否完成.原创 2021-03-05 22:50:40 · 995 阅读 · 0 评论 -
vue-12 自定义指令
自定义指令的作用 除了内置指令外，Vue 也允许注册自定义指令。有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候 使用自定义指令更为方便。 自定义指令文档： https://cn.vuejs.org/v2/guide/custom-directive.html 注意：注册时，指令名不要带 v- 使用指令： 引用指令时，指令名前面加上 v- 直接在元素上在使用即可 ： v-指令名='表达式' 代码展示<!DOCTYPE html><.原创 2021-03-05 22:24:56 · 130 阅读 · 0 评论 -
vue-11 vue内置指令总结
参考：https://cn.vuejs.org/v2/api/#指令 v-html 内容按普通 HTML 插入，可防止 XSS 攻击 v-show 根据表达式的真假值，切换元素的 display CSS 属性来显示隐藏元素 v-if 根据表达式的真假值，来渲染元素 v-else 前面必须有 v-if 或 v-else-if v-else-if 前面必须有 v-if 或 v-else-if v-for 遍历的数组或对象 v-on 绑定事件监听器 v-bind 用于绑定元...原创 2021-03-04 22:12:41 · 162 阅读 · 1 评论 -
vue-10 动画效果案例
CSS 动画用法同 CSS 过渡，只不过采用 animation 为指定动画效果 功能实现： 点击按钮后, 文本内容有放大缩小效果 在 vue-02-过渡&动画和指令 目录下创建 02-动画效果.html 注意：官网上面源码有问题，要在 <p> 元素上增加样式 style="display: inline-block" <!DOCTYPE html><html lang="en"><head> <meta ch原创 2021-03-04 22:05:47 · 203 阅读 · 1 评论 -
vue-09 过渡和动画效果
什么是过渡&动画 元素在显示和隐藏时，实现过滤或者动画的效果。常用的过渡和动画都是使用 CSS 来实现的在 CSS 中操作 trasition （过滤 ）或 animation （动画）达到不同效果 为目标元素添加一个父元素 <trasition name='xxx'> , 让父元素通过自动应用 class 类名来达到效果过渡与动画时，会为对应元素动态添加的相关 class 类名：1. xxx-enter ：定义显示前的效果。2. xxx-enter-active ：定原创 2021-03-03 22:38:31 · 141 阅读 · 1 评论 -
vue-08 表单数据双向绑定v-model
单向绑定：数据变，视图变；视图变（浏览器控制台上更新html），数据不变；上面的都是单向绑定 双向绑定：数据变，视图变；视图变（在输入框更新），数据变；v-model 指令用于表单数据双向绑定，针对以下类型：text 文本 textarea 多行文本 radio 单选按钮 checkbox 复选框 select 下拉框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"原创 2021-03-03 22:30:29 · 113 阅读 · 2 评论 -
vue-07 事件处理 v-on
事件处理方法完整格式： v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)" 缩写格式： @事件名="函数名" 或 @事件名="函数名(参数……)" 注意： @ 后面没有冒号 event ：函数中的默认形参，代表原生 DOM 事件 当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入 作用：用于监听 DOM 事件 事件修饰符.stop 阻止单击事件继续传播 event.stopPropagation() .prevent原创 2021-03-02 23:16:16 · 131 阅读 · 0 评论 -
vue-06 列表渲染 for
列表渲染指令1.v-for 迭代数组语法： v-for="(alias, index) in array" 说明： alias : 数组元素迭代的别名； index : 数组索引值从0开始(可选)2.v-for 迭代对象的属性语法： v-for="(value, key, index) in Object" 说明： value : 每个对象的属性值; key : 属性名(可选); index : 索引值(可选) 。3.可用 of 替代 in 作为分隔符<!DOCTYPE ht原创 2021-02-28 23:12:52 · 248 阅读 · 0 评论 -
vue-05 条件渲染 v-if
v-if 是否渲染当前元素 v-else v-else-if v-show 与 v-if 类似，只是元素始终会被渲染并保留在 DOM 中,只是简单切换元素的 CSS 属性 display 来显示或隐藏效果图代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" conte..原创 2021-02-26 22:07:09 · 162 阅读 · 0 评论 -
vue-04 Class与Style绑定 v-bind
通过 class 列表和 style 指定样式是数据绑定的一个常见需求。它们都是元素的属性，都用 v-bind 处理，其中表达式结果的类型可以是：字符串、对象或数组。语法格式v-bind:class='表达式' 或 :class='表达式'class 的表达式可以为：字符串 :class="activeClass"对象 :class="{active: isActive, error: hasError}"数组 :class="['active', 'error']" 注意要加上单引号,原创 2021-02-24 20:37:03 · 137 阅读 · 0 评论 -
vue-03 计算属性和监听器
computed 选项定义计算属性计算属性 类似于 methods 选项中定义的函数计算属性 会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。 函数 每次都会执行函数体进行计算。计算属性（双向绑定）计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter监听器 watch当属性数据发生变化时,对应属性的回调函数会自动调用, 在函数内部进行计算 通过 watch 选项 或者 vm 实例的 $watch() 来监听指定的属性 需求：通过 watch 选项原创 2021-02-23 21:52:44 · 126 阅读 · 0 评论 -
vue-02 模板数据绑定渲染
可生成动态的HTML页面，页面中使用嵌入 Vue.js 语法可动态生成1. {{xxxx}}双大括号文本绑定2. v-xxxx以v-开头用于标签属性绑定，称为指令双大括号语法{{}}格式：{{表达式}}作用：使用在标签体中，用于获取数据可以使用 JavaScript 表达式一次性插值v-once通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新输出HTML指令v-html格式：v-html='xxxx'作用：如果是HTML原创 2021-02-22 22:56:31 · 180 阅读 · 0 评论 -
vue-01 hello world
1、打开VS code，点击File->Open folder，找到D:\workspace\vscode\vue-demo2、新建目录，demo-013、安装vue4、编写html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="I...原创 2021-02-22 22:46:44 · 113 阅读 · 0 评论 -
VS code 安装教程
一、介绍 Visual Studio CodeVisual Studio Code (简称 VS Code / VSC) 是一款免费开源跨平台的现代化轻量级代码编辑器，支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作……在 Build 2015 大会上，微软宣布推出免费跨平台的 Visual Studio Code 编辑器。介原创 2021-02-18 22:39:39 · 858 阅读 · 0 评论 -
第1章 NPM 包管理工具
1.1 什么是 NPMNPM 全称 Node Package Manager，它是 JavaScript 的包管理工具, 并且是 Node.js 平台的默认包管理工具。通过NPM 可以安装、共享、分发代码,管理项目依赖关系。可从NPM服务器下载别人编写的三方包到本地使用。可从NPM服务器下载并安装别人编写的命令行程序到本地使用。可将自己编写的包或命令行程序上传到NPM服务器供别人使用。其实我们可以把 NPM 理解为前端的 Maven。我们通过 npm 可以很方便地安装与下载 js 库原创 2021-02-18 22:23:43 · 245 阅读 · 0 评论 -
Jenkins一键部署vue项目
1、插件安装2、新建任务3、项目描述4、源码管理5、构建环境6、执行shellecho $PATHnode -vnpm -v #检查编译环境npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedrivernpm installnp...原创 2018-09-05 10:57:34 · 12574 阅读 · 1 评论 -
cnpm安装vue
1、安装淘宝镜像cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org2、升级cnpmcnpm install cnpm -g3、安装vuecnpm install vue4、安装vue-clicnpm install --global vue-cli5、指定一个目录存放项目vue i...原创 2018-08-24 15:37:22 · 671 阅读 · 0 评论 -
vue跨域解决方法
一、什么是跨域跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。所谓同源是指，域名，协议，端口均相同，举个例子：http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）http://www.123.com/index.html 调用 http...原创 2018-07-31 16:52:53 · 827 阅读 · 0 评论