Vue
Vue学习笔记
XinXun
这个作者很懒,什么都没留下…
展开
-
轮播图设计
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue实现轮播图</title> <style type="text/css"> body{ margin: 100px auto; background-color: #F7F7F7; } #app{ position: relative; .原创 2022-01-22 10:50:02 · 404 阅读 · 0 评论 -
4.5 路由嵌套
实现路由嵌套有2个步骤:创建对应的子组件,并在路由映射中进行配置(添加children属性,该属性为数组) 组件内部使用<router-view>标签在编辑器中注意下这种写法:ul>li*6>{消息$}原创 2022-01-18 21:45:19 · 697 阅读 · 0 评论 -
4.4 vue-router的安装和配置
vue-router是Vue.js官方的路由插件,它是和Vue.js深度集成的,适用于构建单页面应用。vue-router是基于路由和组件的。路由用于设定访问路径,将路径和组件映射起来。 在vue-router的单页面应用中,路径的改变就是组件的切换安装vue-routernpm installvue-router --save 在src中创建router文件夹,在router文件夹下创建index.js文件,在此文件中配置路由相关信息index.js中的内容import...原创 2022-01-06 21:31:44 · 499 阅读 · 0 评论 -
4.3 认识Vue-cli3
Vue-cli3与2版本有很大区别Vue-cli3基于webpack4打造,Vue-cli2是基于webpack3; Vue-cli3设计原则是0配置,移除了build和config等目录; Vue-cli3提供了vue ui命令,提供了可视化配置; 移除了static文件夹,新增puclic文件夹,并且index.html移至public中; 现在做项目都用Vue-cli3。Vue-cli3创建步骤Please pick a preset? 有Default ([Vue 2] babel,.原创 2022-01-06 00:23:59 · 468 阅读 · 0 评论 -
4.2 runtime-only和runtime+compiler的区别
runtime-only:new vue({ el:'#app', render:h=>h(app)})render:h=>h(app)是箭头函数,相当于render:function(h) { return h(app) }执行步骤:render函数->vdom(虚拟dom)->UI //性能更高new Vue({ el: '#app', render:function(createElement){ //1.createE..原创 2022-01-04 21:37:54 · 608 阅读 · 0 评论 -
4.1 什么是脚手架(CLI)
Vue CLI叫做脚手架。CLI:Command-Line Interface,翻译为命令行界面,俗称脚手架。如果你只是简单写几个Vue的Demo程序,那么你不需要Vue CLI。使用Vue-CLI可以快速搭建Vue开发环境以及对应的webpack配置。使用条件:Node8.9以上版本、NPM如果安装过慢,可以安装淘宝镜像,通过cnpm安装。npm install -g cnpm --registry=https://registry.npm.taobao.org这样就可以使用cnpm命原创 2021-12-16 21:56:19 · 2203 阅读 · 0 评论 -
3.4 webpack的配置抽离
通过merge插件实现配置文件合并npm install webpack-merge --save-dev"build": "webpack --config 配置文件相对路径","dev":"webpack-dev-server --open --config 配置文件相对路径"原创 2021-12-16 21:24:53 · 190 阅读 · 0 评论 -
3.3 创建本地服务器
webpack提供一个可选的本地开发服务器,服务器基于node.js搭建,内部使用express框架,可以让浏览器自动刷新显示修改结果。(服务器只会在内存中保存修改,npm run build后才将修改保存到硬盘文件)步骤1:本地服务器是一个单独的模块,在使用之前先安装它。npm install [email protected] --save-dev步骤2:修改webpack.config.js。...原创 2021-09-24 19:58:21 · 448 阅读 · 0 评论 -
3.2 Vue动画过渡组件transition
<transition name="qiqiu"> <img v-show="show" src="https://abc/abc.jpeg" ></transition>transition的name属性如果不指定,默认为v。<style type="text/css"> img{ width: 100px; } .qiqiu-leave,.qiqiu-enter-to{ opacity: 1; transf...原创 2021-09-23 12:21:55 · 206 阅读 · 0 评论 -
3.1 webpack的plugin
plugin是什么?plugin是插件的意思,通常用于对某个现有的架构进行扩展。webpack中的插件就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等。loader和plugin区别loader主要用于转换某些类型的模块,它是一个转换器。plugin是插件,它是对webpack本身进行扩展,它是一个扩展器。plugin使用过程 步骤1:通过npm安装需要使用的plugins(某些webpack...原创 2021-09-13 19:05:23 · 203 阅读 · 0 评论 -
2.6 weppack
什么是webpack?从本质上来讲,webpack是一个现代的javascript应用的静态模块打包工具。我们从两个点来理解模块和打包。目前浏览器仅支持ES6中的前端模块化规范,而且webpack不但支持ES6模块化规范,还支持commonJS、AMD、CMD等规范。通过webpack的打包(转换)能够让大部分浏览器识别上述模块化规范,而且打包时会自动处理模块之间的依赖。webpack其中一个核心就是让我们进行模块化开发,并会帮助我们处理模块间的依赖关系。而且不仅仅是javascript文件,CS原创 2021-05-24 13:39:47 · 314 阅读 · 0 评论 -
2.5 前端模块化
前端模块化的雏形let moduleA=(function(){ let mObj={} let name='模块化变量内容' let funcSum=function sum(x,y){ return x+y } mObj.name=name mObj.funcSum=funcSum return mObj})()commonJSnode使用的commonJS规范导出的两种写法// 方法1:直接在module.exports里写变量及函数方法module.e原创 2021-05-23 10:33:52 · 166 阅读 · 0 评论 -
2.4 插槽slot的基本使用
slot的基本使用最好的封闭方式就是将共性抽取到组件中,将不同暴露为插槽。一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。是搜索框还是文字还是菜单,由调用者自己来决定。可以给插槽默认值,方法是在组件中的slot标签内写明默认内容。如果调用组件时没有指定插槽内容,将使用默认值。<body> <div id="app"> <!-- 在此处写入slot内容 --> <cpn><a href="#">原创 2021-05-22 22:08:31 · 465 阅读 · 0 评论 -
2.3 父子组件的访问方式
有时候我们需要父组件直接访问子组件(通过$children或$refs),子组件直接访问父组件($parent)。 $children this.$children是一个对象数组类型,它包括所有子组件对象。通过该对象数组可以读或写子组件中的数据、调用子组件的方法。弊端是有多个子组件时通过对象数组下标访问子组件,无法适应子组件的数量发生变化的情况。<body> <div id="app"> <cpn></cpn> <!-- 使用单原创 2021-05-22 11:08:24 · 115 阅读 · 0 评论 -
2.2 父子组件的通信
父传子props通过props向子组件传递数据,通过事件向父组件发送消息。props的值有两种方式:1.字符串数组,数组中的字符串就是传递时的名称;2.对象。对象可以设置传递时的类型,也可以设置默认值等。1.字符串数组格式:props:["属性名","属性名",...]<div id="app"> <!-- 通过属性wd传递数据 --> <cpn :wd="message"></cpn></div><templat原创 2021-05-16 22:35:03 · 114 阅读 · 0 评论 -
2.1 组件化开发
组件开发的基本流程原创 2021-05-11 21:03:26 · 221 阅读 · 0 评论 -
1.6 表单绑定
v-model绑定input<div id="app"> //通过v-model实现双向绑定 <input type="text" v-model="message" />{{message}} //v-model的实现原理 <input type="text" @input="message=$event.target.value" :value="message" />{{message}}</div>..原创 2021-05-09 08:30:02 · 106 阅读 · 0 评论 -
1.5 v-show与v-if的区别
v-show与v-if的区别v-show相当于增加了元素样式 display:none,v-if决定元素是否创建原创 2021-04-09 21:08:56 · 130 阅读 · 0 评论 -
1.4 计算属性
计算属性的基本使用对data中变量进行加工、组合、处理计算属性不必在末位加括号( )<div id="app"> <!-- 没有使用计算属性写法 --> <h2>{{firstName+' '+lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <!-- 使用计算属性写法 --> <h2>{{fullName}}</h2>原创 2021-03-27 22:31:42 · 359 阅读 · 1 评论 -
1.3 v-bind介绍
v-bind前面学习的指令主要作用是将值插入到我们模板的内容当中,但是除了内容需要动态决定外,某此属性也需要动态来绑定。比如动态绑定a元素的href属性,动态绑定img元素的src属性。动态指定属性不能使用Mustache语法。<div id="app"> 动态指定属性 <a v-bind:href="url">百度</a></div><script type="text/javascript"> const a原创 2021-03-20 11:07:29 · 1200 阅读 · 0 评论 -
1.2 Vue的MVVM
view层:视图层,通常就是DOM层,主要作用向用户展示各种信息 model层:数据层,从服务器请求的数据或者写死的数据 viewmodel层:视图模型图,是view和model沟通的桥梁.一方面实现了数据的绑定,将model的必变实时反应到view中;另一方面实现了DOM的事件监听,dom发生事件改变model.数据的代理(obj)<div id="app"> <h2>当前计数:{{counter}}</h2> <button type="but原创 2021-03-19 22:32:06 · 273 阅读 · 0 评论 -
1.1 Vue的安装
Vue下载地址:https://cn.vuejs.org/,有两个版本可以选择。Vue开发环境版本:包含了有帮助的命令行警告; Vue生产环境版本:优化了尺寸和速度。Vue的安装方式(3种)方式一:直接CDN引入开发版本:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>生产版本:<script src="https://cdn.jsdelivr.net/npm/vue@2.原创 2021-03-19 21:35:19 · 119 阅读 · 0 评论