![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
吱吱不倦小子
学人之所学,成人之所成。(学习内容来源网上整理,如有侵权,请联系我删除。)
展开
-
(十五)项目的打包与发布
1.打包:npm run build2.发布 1: 使用静态服务器工具包npm install -g serve serve dist 访问: http://localhost:50003.发布 2: 使用动态 web 服务器(tomcat)修改配置: webpack.prod.conf.js output: { publicPath: '/xxx/' //打包文件夹的名称 } 重新打包: npm run build 修改 dist 文件夹为项目名称: xxx 将 x原创 2021-03-06 22:09:06 · 183 阅读 · 0 评论 -
(十四)使用 vue-cli 创建模板项目
1.说明1) vue-cli 是 vue 官方提供的脚手架工具 2) github: https://github.com/vuejs/vue-cli 3) 作用: 从 https://github.com/vuejs-templates 下载模板项目2.创建 vue 项目 npm install -g vue-cli (安装vue-cli)vue init webpack vue_demo (创建项目)cd vue_demo(进入项目目录) npm insta.原创 2021-03-05 00:37:37 · 370 阅读 · 1 评论 -
(十三) 插件
1.定义插件(初学者使用比较少)(function (window) { //向外暴露的插件对象 const MyPlugin = {} MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { console.log('Vue函数对象的myGlobalMethod()') } // 2. 添加全局资源原创 2021-03-04 23:05:00 · 187 阅读 · 1 评论 -
(十二)指令_内置指令
1.常用内置指令v:text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为true, 当前标签才会输出到页面v-else: 如果为false, 当前标签才会输出到页面v-show : 通过控制display样式来控制显示/隐藏v-for : 遍历数组/对象v-on : 绑定事件监听, 一般简写为@v-bind : 强制绑定解析表达式, 可以省略v-bindv-model : 双向数据绑定ref : 为某个元素注册一个唯一标原创 2021-03-04 23:02:32 · 471 阅读 · 1 评论 -
(十一)过滤器
1. 理解过滤器功能: 对要显示的数据进行特定格式化后再显示注意: 并没有改变原本的数据, 可是产生新的对应的数据2. 编码1). 定义过滤器 Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return newValue })2). 使用过滤器 <div>{{myData | filterName}}</div> <div>{{m原创 2021-03-04 22:54:45 · 180 阅读 · 1 评论 -
(十)过渡&动画1
1. vue动画的理解操作css的trasition或animationvue会给目标元素添加/移除特定的class2. 基本过渡动画的编码1). 在目标元素外包裹<transition name="xxx">2). 定义class样式 1>. 指定过渡样式: transition 2>. 指定隐藏时的样式: opacity/其它<style> .move-enter-active { transition: all原创 2021-03-04 22:50:19 · 191 阅读 · 1 评论 -
(九)vue生命周期(重点)
一,vue生命周期图vue对象的生命周期 1). 初始化显示 * beforeCreate() * created() * beforeMount() * mounted() 2). 更新状态 * beforeUpdate() * updated() 3). 销毁vue实例: vm.$destory() * beforeDestory() * destoryed()2. 常用的生命周期方法 created()/mount原创 2021-03-02 22:32:45 · 427 阅读 · 0 评论 -
(八)表单的自动收集 v-model
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>08_表单输入绑定</title></head><body><div id="demo"> <form action="/XXXX" @submit.prevent="handleSubmit"> <.原创 2021-03-01 23:25:21 · 183 阅读 · 0 评论 -
七:事件处理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>07事件处理</title></head><body><div id="example"> <h1>1.绑定监听</h1> <button v-on:click="test1">test1.原创 2021-03-01 22:13:19 · 159 阅读 · 0 评论 -
(6-2)列表渲染_过滤与排序
1.列表过滤<div id="test"> <input type="text" v-model="searchName"> <ul> <li v-for="(p,index) in filterPersons" :key="index"> {{index}}----{{p.name}}----{{p.age}} </li> </ul></di原创 2021-03-01 21:40:37 · 195 阅读 · 0 评论 -
(6-1)列表渲染
1. 列表显示1.1数组: v-for / index<h2>测试:v-for 遍历数组</h2><ul> <li v-for="(p,index) in pesrons" :key="index"> {{index}}-----{{p.name}}----{{p.age}} ----<button @click="deletep(index)">删除</button> ----<原创 2021-02-25 23:49:49 · 249 阅读 · 0 评论 -
(五)条件渲染
1.v-if 与v-else<p v-if="ok">表白成功</p><p v-else>表白失败</p>2.v-show<p v-show="ok">表白成功</p><p v-show="!ok">表白失败</p>3.全部代码:<!DOCTYPE html><html lang="en"><head> <meta charset原创 2021-02-25 23:08:54 · 153 阅读 · 0 评论 -
(四)-class与style绑定
1. 理解在应用界面中, 某个(些)元素的样式是变化的class/style绑定就是专门用来实现动态样式效果的技术2.class绑定: :class='xxx'2.1xxx是字符串<h2>1. class 绑定: :class='****'</h2><!--a是一个变量--><p :class="a">XXX是字符串</p><!--合并的效果--><p class="classC" :class.原创 2021-02-25 22:56:25 · 262 阅读 · 0 评论 -
(三) vue计算属性和监视
1.计算属性在computed属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果//什么时候执行:初始显示或者相关data属性数据发生改变//计算属性中的一个方法:方法的返回值作为属性值computed:{ fullName1() { console.log('fullName1()',this) return this.firstName+'-'+this.lastName;}原创 2021-02-05 01:02:50 · 271 阅读 · 0 评论 -
(二)模板语法
1.模板的理解1) 动态的 html 页面 2) 包含了一些 JS 语法代码 a. 双大括号表达式 b. 指令(以 v-开头的自定义标签属性)2. 双大括号表达式 语法: {{exp}} 或 {{{exp}}} 功能: 向页面输出数据,可以调用对象的方法3. 指令一: 强制数据绑定功能: 指定变化的属性值 完整写法: v-bind:xxx='yyy' //yyy会作为表达式解析执行 简洁写法: :xxx='yyy'4. 指令二: 绑定事件监听...原创 2021-02-03 23:12:59 · 401 阅读 · 0 评论 -
(一)vue基本常识
1.介绍描述1.1渐进式 JavaScript 框架1.2作者: 尤雨溪(一位华裔前 Google 工程师)1.3作用: 动态构建用户界面2.Vue 的特点2.1遵循 MVVM 模式2.2编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发2.3它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目3.与其它前端 JS 框架的关联 3.1借鉴 angular 的模板和数据绑定技术3.2借鉴 react 的组件化和虚拟 DOM 技术4.Vue原创 2021-02-03 22:45:18 · 237 阅读 · 0 评论