![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 59
vue笔记
陆源东
这个作者很懒,什么都没留下…
展开
-
npm命令解释
npm命令解释npm install moduleName安装模块到项目目录下npm install -g moduleName将模块安装到全局npm install -save moduleName将模块安装到项目目录下 ,并在package文件的dependencies节点写入依赖 缩写为-Snpm install -save-dev moduleName将模块安装到项目目录下 ,并在package文件的devDependencies节点写入依赖 缩写为-D.原创 2021-07-20 13:01:56 · 126 阅读 · 0 评论 -
19.命名视图
19.命名视图 有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。<router-view class="view one"></router-view><!--default--><router-vie原创 2021-07-20 13:01:11 · 144 阅读 · 0 评论 -
18.参数传递及重定向
18.参数传递及重定向流程main.vue通过router-link将参数连同路由信息传递到router的index.jsrouter将参数传递给要跳转的视图组件代码示例main.vue<el-menu-item-group> <el-menu-item index="1-1"> <!-- 1.通过 :to 可以通过双向数据绑定将参数id绑定到此router-link对应的组件上,使得组件可以取出参数的值 2.在这里通过name进行rou原创 2021-07-20 13:00:42 · 384 阅读 · 2 评论 -
17.编程式导航
17.编程式导航this.$router.push(location,onComplete?onAbort?)this.$router.replace(location,onComplete?onAbort?)this.$router.go(steps) 除了使用<router-link>创建a标签来定义导航链接 , 还可以使用router的实例方法,通过编写代码来实现使用router.push(location,onComplete?,onAbort?) 在Vue实例内原创 2021-07-20 13:00:01 · 135 阅读 · 0 评论 -
16.嵌套路由
16.嵌套路由 如上图,组件main下可以由多个组件如Profile、Post共同组成一个Vue界面。而不是一个组件代表一个页面,只能够给产生页面的跳转多个组件共同组合为一个页面代码示例按照目录结构添加文件list.vue<!--一个普通的表示用户列表页面的视图组件--><template><h1>用户列表页</h1></template><script>export default { name:原创 2021-07-20 12:59:40 · 82 阅读 · 0 评论 -
15.Vue+ElementUI
15.Vue+ElementUI官方文档https://element.eleme.cn/#/zh-CN/component/installation安装部署 1.npm方式npm i element-ui -S 2.CDN方式目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.c原创 2021-07-20 12:58:35 · 116 阅读 · 0 评论 -
13.Webpack
13.Webpack Webpack是一个JavaScript应用程序的静态模块打包器 , 当webpack处理应用程序的时候,会递归地构建一个依赖关系图,其中包含了应用程序所需要地每个模块,然后将这些模块打包为一个bundleWebpack使用的迫切性 在前端化工程中,许多关键命令需要使用JavaScript ES6的新特性。然而许多浏览器并不支持ES6, 这个时候就需要webpack能够将ES6打包为ES5工程Webpack安装npm install webpack -gnpm inst原创 2021-07-20 12:57:33 · 73 阅读 · 0 评论 -
11. 自定义事件内容分发
11. 自定义事件内容分发如slot示例代码中,如何通过操作组件删除掉ViewModel的源数据代码呢?ViewModel自己通过method删除DOM<script>var vm = new Vue({ el : "#app", data : { title : '选择你的英雄', items : ['高等数学','线性代数','摆烂'] }, methods : { //ViewModel的方法 removeItems : function(原创 2021-07-20 12:55:01 · 87 阅读 · 0 评论 -
10.slot插槽
10.slot插槽slot 是一个标签,位于组件之中的一个标签 ,作用是提供一个插槽,被其他数据所插入 ,可以实现数据互相组合插入的效果<body><div id="app"> <slot> <!--组件slot,有着slot中定义的子组件--> <!--组件slot-title,slot="solot-title"表示插入了插槽slot-title并绑定了数据--> <slot-title slot="slot-t原创 2021-07-20 12:54:29 · 157 阅读 · 0 评论 -
7.Axios异步通信
7.Axios异步通信 Axios是一个开源的,用在浏览器端和NodeJS的异步通信框架 。主要作用是实现Ajax异步通信主要特点从浏览器创建XMLHttpRequests从node.js创建http请求支持Promise API [JS链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持资料及下载地址GitHib : https://github.com/axios/axios中文文档 : http://www.axios-js.com/原创 2021-07-20 12:52:16 · 108 阅读 · 0 评论 -
6.Vue组件
6.Vue组件 组件是可复用的Vue实例 ,一组可重复的模板组件简单编写<body> <div id="component"> <!--Vue组件必须位于Vue实例中--> <luyuandong></luyuandong> </div><script> //定义一个Vue组件,名字为luyuandong Vue.component('luyuandong',{ te原创 2021-07-20 12:51:48 · 86 阅读 · 0 评论 -
5.Vue双向数据绑定
5.Vue双向数据绑定什么是双向数据绑定 Vue.js是一个MVVM框架,数据发生变化的时候,视图也发生变化。视图发生变化,数据也会同步变化 双向数据绑定针对于UI组件双向数据绑定的好处 在Vue.js中,如果使用vuex,实际上数据还是单向的。但是对于UI控件来说,是数据双向绑定的,因此对于表单可以使用双向数据绑定来降低开发难度。在表单中使用双向数据绑定 使用v-model指令在表单input 、textarea 、select等元素上创建双向数据绑定 ,将会根据控件的类型自动选取正确的原创 2021-07-20 12:51:14 · 74 阅读 · 0 评论 -
4.Vue绑定事件
4.Vue绑定事件v-on指令 简写:@<body><div id="app"> <button v-on:click="hello">click</button> <!--使用 v-on指令绑定函数 --></div><script> var vm = new Vue({ el : "#app", data : { message : 'he原创 2021-07-20 12:50:23 · 63 阅读 · 0 评论 -
3.Vue基本语法
3.Vue基本语法v-bind (v-指令)简写:: 使用v-bind属性来绑定属性<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>v-bind练习</title> <script src="https://cdn.js原创 2021-07-20 12:49:53 · 79 阅读 · 0 评论 -
2.Vue的第一个程序
2.Vue的第一个程序1.MVVMModel-View-ViewModel ,一种软件架构设计模式。源于MVC模式 ,MVVM的核心是ViewModel层,负责转换Model中的数据对象来让对象变得更容易管理和使用。向上与视图层进行双向数据绑定向下与Model层通过接口请求进行数据交互优势低耦合 :视图(View)可以独立于Model的变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以保持不败你,当Model变化的时候View也可以保持不变原创 2021-07-20 12:49:17 · 63 阅读 · 0 评论 -
1.Vue
1.Vue一套用于构建用户界面的渐进式JavaScript框架 , 只关心视图层的构建网络通信 : axios页面跳转 : vue-router状态管理 : vuex前端技术结构层(HTML)表现层(CSS)缺点 :语法不够强大,无法嵌套书写,导致模块化开发中要重复书写选择器没有变量和合理的样式复用机制,难以维护CSS预处理器 :定义了一种新的语言 ,为CSS增加了编程特性。将CSS作为目标生成文件,开发者使用这种语言进行CSS的编码,最终生成CSS文件使用SAS原创 2021-07-20 12:48:32 · 106 阅读 · 0 评论