![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Vue 学习笔记分享
逆流者blog
不登高山,不知天之高也;不临深溪,不知地之厚也。
展开
-
Vue第17话 项目打包与发布
1.打包npm run build2.发布2.1 使用静态服务器工具包npm install -g serveserve dist访问: http://localhost:50002.3 使用动态 web 服务器(tomcat)修改配置: webpack.prod.conf.jsoutput: { publicPath: '/xxx/' //打包文件夹的名称}重新打...原创 2020-04-16 12:55:58 · 107 阅读 · 0 评论 -
Vue第16话 使用 vue-cli 创建模板项目
1.简介vue-cli 是 vue 官方提供的脚手架工具github: https://github.com/vuejs/vue-cli作用: 从 https://github.com/vuejs-templates 下载模板项目2.创建 vue 项目执行命令前,确认下是否安装 npmnpm安装 npm中文文档# 安装脚手架 -g: 全局npm install -g vue-c...原创 2020-04-16 12:54:55 · 86 阅读 · 0 评论 -
Vue第15话 自定义插件
1.自定义插件Vue 插件是一个包含 install 方法的对象通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等2.编码插件(vue-myPlugin.js)/** * 自定义vue插件 */(function () { const MyPlugin = {} MyPlugin.install = function (Vue, o...原创 2020-04-16 12:54:01 · 70 阅读 · 0 评论 -
Vue第14话 常用内置指令和自定义指令
1.常用内置指令v:text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为 true, 当前标签才会输出v-else: 如果为 false, 当前标签才会输出到页面v-show : 通过控制 display 样式来控制显示/隐藏v-for : 遍历数组/对象v-on : 绑定事件监听, 一般简写为@v-bind : 强...原创 2020-04-16 12:53:26 · 374 阅读 · 1 评论 -
Vue第13话 过滤器
1.过滤器功能: 对要显示的数据进行特定格式化注意: 并没有改变原本的数据, 可是产生新的对应的数据2.定义和使用过滤器定义过滤器Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return newValue})使用过滤器<div>{{myData | fi...原创 2020-04-16 12:52:40 · 71 阅读 · 0 评论 -
Vue第12话 过渡与动画
1.vue 动画操作 css 的 trasition 或 animationvue 会给目标元素添加/移除特定的 class过渡的相关类名xxx-enter-active: 指定显示的 transitionxxx-leave-active: 指定隐藏的 transitionxxx-enter/xxx-leave-to: 指定隐藏时的样式2.基本过渡动画的编码在目标元素外包裹...原创 2020-04-16 12:52:10 · 72 阅读 · 0 评论 -
Vue第11话 生命周期
1.生命周期图2.生命周期方法2.1 初始化显示beforeCreate()created()beforeMount()mounted()2.2 更新状态: this.xxx = valuebeforeUpdate()updated()2.3 销毁 vue 实例: vm.$destory()beforeDestory()destoryed()常用的生命周期方...原创 2020-04-16 12:51:15 · 109 阅读 · 0 评论 -
Vue第10话 表单输入绑定
使用 v-model 对表单数据自动收集text/textareacheckboxradioselect编码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>09-表单输入绑定</title></h...原创 2020-04-15 09:21:20 · 93 阅读 · 0 评论 -
Vue第9话 事件处理
1.绑定监听v-on:xxx=“fun”@xxx=“fun”@xxx=“fun(参数)”默认事件形参: event隐含属性对象: $event2.事件修饰符.prevent : 阻止事件的默认行为 event.preventDefault().stop : 停止事件冒泡 event.stopPropagation()3.按键修饰符.keycode : 操作的是某个 k...原创 2020-04-15 09:20:42 · 108 阅读 · 0 评论 -
Vue第8话 列表渲染
1.指令数组: v-for / index对象: v-for / key2.列表的更新显示删除 item替换 item3.列表的高级处理列表过滤列表排序4.编码编码 1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&...原创 2020-04-15 09:19:48 · 85 阅读 · 0 评论 -
Vue第7话 条件渲染
1. 条件渲染指令v-if 与 v-elsev-show2. 比较如果需要频繁切换 v-show 较好当条件不成立时, v-if 的所有子节点不会解析3. 编码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>05-...原创 2020-04-15 09:18:47 · 91 阅读 · 0 评论 -
Vue第6话 class与style绑定
class/style 绑定用来实现动态样式效果1. class 绑定格式 :class=‘exp’表达式是字符串: ‘classA’表达式是对象: {classA: isA, classB: isB}表达式是数组: [‘classA’, ‘classB’]2. style 绑定格式 :style="{ color: activeColor, fontSize: fontSiz...原创 2020-04-15 09:18:10 · 82 阅读 · 0 评论 -
Vue第5话 计算属性和监视
1. 计算属性在 computed 属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果通过 getter/setter 实现对属性数据的显示和监视计算属性存在缓存, 多次读取只执行一次 getter 计算2. 监视属性通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性当属性变化时, 回调函数自动调用, 在函数内部进行计算3. 编码...原创 2020-04-15 09:15:40 · 79 阅读 · 0 评论 -
Vue第4话 模版语法
1、模板动态的 html 页面包含了一些 JS 语法代码双大括号表达式a. 语法: {{exp}}b. 功能: 向页面输出数据c. 可以调用对象的方法指令(以 v-开头的自定义标签属性)2、强制数据绑定指令功能: 指定变化的属性值完整写法: v-bind:xxx=‘yyy’yyy 会作为表达式解析执行简洁写法: :xxx=‘yyy’3、绑定事件监...原创 2020-04-15 09:14:54 · 92 阅读 · 0 评论 -
Vue第3话 HelloWorld
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01-helloword</title></head><body><div id="app"> <input ty...原创 2020-04-15 09:13:17 · 480 阅读 · 0 评论 -
Vue第2话 Vue 工具
1. devtoolsVue 浏览器工具插件下载: chrome firefox2. vue.jscdn<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本,优化了尺寸和速度 ...原创 2020-04-15 09:10:36 · 126 阅读 · 0 评论 -
Vue第1话 简单介绍
一. 介绍渐进式 JavaScript 框架作者: 尤雨溪作用: 动态构建用户界面二. Vue 的特点遵循 MVVM 模式编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目三. 对比借鉴 angular 的模板和数据绑定技术借鉴 react 的组件化和虚拟 DOM 技术四. Vue 扩展插...原创 2020-04-15 09:08:59 · 106 阅读 · 0 评论