VUE
关注
分享
扫一扫
黄宝康
这个作者很懒，什么都没留下…
展开
-
vue自定义指令
示例：我们注册一个全局的v-focus指令<div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus></div> <script>// 注册一个全局自定义指令 v-focusVue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素转载 2020-08-05 11:28:31 · 319 阅读 · 0 评论 -
Vue子组件触发父组件事件
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。<div id="app"> <div id="counter-event-example"&原创 2020-08-04 15:48:25 · 2529 阅读 · 0 评论 -
vue-router入门
安装npm install vue-router官网提到的功能嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为...原创 2020-08-04 14:56:29 · 305 阅读 · 0 评论 -
解决Chrome无法从该网站添加应用、扩展程序或脚本问题
1、先将下载下来的crx文件的后缀名改为.zip2、然后将这个zip文件解压出来3、打开Chrome浏览器的扩展程序，更多工具 -> 扩展程序，打开开发者模式，然后点击“加载已解压的扩展程序”，如下图4、定位到之前解压的文件夹即可...转载 2020-07-21 15:12:41 · 4007 阅读 · 1 评论 -
Vue事件修饰符的使用
Vue2.0学习笔记：Vue事件修饰符的使用事件处理如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中。在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡.prevent：等同于JavaScript中的event.preven转载 2020-07-21 11:22:35 · 295 阅读 · 0 评论 -
vue学习笔记（组件）
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例，注册组件Vue.component('todo-item',{ template:'<li>这是自定义组件</li>'})使用的话<ol> <todo-item></todo-item></ol>上面这种方式每次文本都是一样的，我们可以定义一个参数Vue.component('todo-item', { // todo-item 组件现在接原创 2020-07-20 11:14:30 · 358 阅读 · 0 评论 -
vue部署访问单页面404问题
vue单页面的启动页面是index.html，路由的路径实际是不存在的，所以会出现访问单页面404问题，需要设置所有找不到的路径直接映射到index.html root D:/nginx-0.8.55/html/dist/; index index.html index.htm; location / { try_files $uri $uri @router; index index.html; } location @router {原创 2020-06-11 11:28:15 · 1038 阅读 · 0 评论 -
Vue项目nginx部署
vue项目打包后，是生成一系列的静态文件，包括项目的请求IP都打入包内，如果后台服务改动，这时你的前端文件，又要重新编译打包，这里采用前端自行请求一个配置文件，动态修改你的相关配置。静态文件// config.json{ "api": "test.com"}请求文件在项目store中请求你的配置文件，写入state中，在调用的时候可以全局访问到你的配置// api.jsGet...原创 2020-02-26 10:22:30 · 991 阅读 · 0 评论 -
使用VUE_CLI创建项目
vue-cli的安装npm install -g vue-cli@2.9.6查看版本vue -V使用vue-cli创建项目vue init webpack vue_demo项目名为vue_demo原创 2019-12-06 16:16:13 · 284 阅读 · 0 评论 -
vue父组件向子组件传值
通过 Prop 实现父子组件数据传递父子组件之间传递数据，我们先讲一种最简单最常用的 Prop声明方式；我们搞个 App父组件，然后 Menu作为子组件，App父组件向Menu子组件传值；我们在父组件App里向Menu子组件传递菜单对象数组menus以及网站信息webSite对象；App.vue<template> <div> <!--使用组件 ...原创 2019-09-10 21:19:27 · 482 阅读 · 0 评论 -
使用vue-cli搭建Helloworld工程
把vue-cli初始化的项目中的src目录下的文件全部删除掉，新建App.vue<template> <div> <img src="./assets/logo.jpg" height="74" width="216"/> <!--使用组件--> <hello-world></hello-world&g...原创 2019-09-10 20:24:55 · 496 阅读 · 0 评论 -
vue-cli脚手架安装
vue-cli的优势1、成熟的vue项目架构设计，而且会跟随vue版本的更迭而更新；2、提供了一套本地测试服务器，而且是一个热加载的服务器；3、提供了自己的一套集成打包上线的方案，webpack 或者gulpify在创建项目的时候可以进行选择；有了以上优势，可以非常快速的搭建项目；vue-cli对系统的要求需要node.js的环境vue-cli的安装npm install -g v...原创 2019-09-10 19:45:12 · 612 阅读 · 2 评论 -
vue.js模板语法
<!doctype html><html lang="gbk"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...原创 2019-09-03 19:48:29 · 430 阅读 · 0 评论 -
vue.js条件语句
主要掌握内容如下：1,v-if 用于条件性地渲染一块内容2,在template元素上使用 v-if 条件渲染分组 最终的渲染结果将不包含 template>元素3,v-else 你可以使用 v-else 指令来表示 v-if 的“else 块”4,v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：5,用 key 管理可复用的元素6,v-sho...原创 2019-09-03 20:00:29 · 511 阅读 · 0 评论 -
Vue.js 计算属性computed
<!doctype html><html lang="gbk"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...原创 2019-09-03 21:17:17 · 361 阅读 · 0 评论 -
Vue.js 监听属性watch
<!doctype html><html lang="gbk"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...原创 2019-09-04 10:47:21 · 334 阅读 · 0 评论 -
vue循环for
<!doctype html><html lang="gbk"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...原创 2019-09-09 10:52:21 · 283 阅读 · 0 评论 -
Vue样式属性绑定
<!doctype html><html lang="gbk"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...原创 2019-09-10 15:12:51 · 339 阅读 · 0 评论 -
Vue事件
<!doctype html><html lang="gbk"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...原创 2019-09-10 15:27:42 · 378 阅读 · 0 评论 -
Vue值绑定
<!-- 当选中时，`picked` 为字符串 "a" --><input type="radio" v-model="picked" value="a"><!-- `toggle` 为 true 或 false --><input type="checkbox" v-model="toggle"><!-- 当选中第一个选项时，`sel...原创 2019-09-10 17:26:00 · 1298 阅读 · 0 评论 -
Vue生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。<div id="app"> <p>{{name}}</p> <button @click="...转载 2019-09-10 17:44:42 · 296 阅读 · 0 评论 -
VUE入门之hello world
<!doctype html><html lang="gbk"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...原创 2019-09-03 17:40:41 · 297 阅读 · 0 评论