vue
关注
分享
扫一扫
文章平均质量分 59
vue笔记
陆源东
这个作者很懒，什么都没留下…
展开
-
npm命令解释
npm命令解释 npm install moduleName 安装模块到项目目录下 npm install -g moduleName 将模块安装到全局 npm install -save moduleName 将模块安装到项目目录下 ，并在package文件的dependencies节点写入依赖 缩写为-S npm install -save-dev moduleName 将模块安装到项目目录下 ，并在package文件的devDependencies节点写入依赖 缩写为-D .原创 2021-07-20 13:01:56 · 160 阅读 · 0 评论 -
19.命名视图
19.命名视图 有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。 <router-view class="view one"></router-view> <!--default--> <router-vie原创 2021-07-20 13:01:11 · 179 阅读 · 0 评论 -
18.参数传递及重定向
18.参数传递及重定向 流程 main.vue通过router-link将参数连同路由信息传递到router的index.js router将参数传递给要跳转的视图组件 代码示例 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 · 421 阅读 · 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 · 152 阅读 · 0 评论 -
16.嵌套路由
16.嵌套路由 如上图，组件main下可以由多个组件如Profile、Post共同组成一个Vue界面。而不是一个组件代表一个页面，只能够给产生页面的跳转 多个组件共同组合为一个页面 代码示例 按照目录结构添加文件 list.vue <!--一个普通的表示用户列表页面的视图组件--> <template> <h1>用户列表页</h1> </template> <script> export default { name:原创 2021-07-20 12:59:40 · 100 阅读 · 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 · 142 阅读 · 0 评论 -
13.Webpack
13.Webpack Webpack是一个JavaScript应用程序的静态模块打包器 ， 当webpack处理应用程序的时候，会递归地构建一个依赖关系图，其中包含了应用程序所需要地每个模块，然后将这些模块打包为一个bundle Webpack使用的迫切性 在前端化工程中，许多关键命令需要使用JavaScript ES6的新特性。然而许多浏览器并不支持ES6， 这个时候就需要webpack能够将ES6打包为ES5工程 Webpack安装 npm install webpack -g npm inst原创 2021-07-20 12:57:33 · 94 阅读 · 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 · 107 阅读 · 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 · 187 阅读 · 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 · 136 阅读 · 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 · 107 阅读 · 0 评论 -
5.Vue双向数据绑定
5.Vue双向数据绑定 什么是双向数据绑定 Vue.js是一个MVVM框架，数据发生变化的时候，视图也发生变化。视图发生变化，数据也会同步变化 双向数据绑定针对于UI组件 双向数据绑定的好处 在Vue.js中，如果使用vuex，实际上数据还是单向的。但是对于UI控件来说，是数据双向绑定的，因此对于表单可以使用双向数据绑定来降低开发难度。 在表单中使用双向数据绑定 使用v-model指令在表单input 、textarea 、select等元素上创建双向数据绑定 ，将会根据控件的类型自动选取正确的原创 2021-07-20 12:51:14 · 97 阅读 · 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 · 82 阅读 · 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 · 104 阅读 · 0 评论 -
2.Vue的第一个程序
2.Vue的第一个程序 1.MVVM Model-View-ViewModel ，一种软件架构设计模式。源于MVC模式 ，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让对象变得更容易管理和使用。 向上与视图层进行双向数据绑定 向下与Model层通过接口请求进行数据交互 优势 低耦合 ：视图（View）可以独立于Model的变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以保持不败你，当Model变化的时候View也可以保持不变原创 2021-07-20 12:49:17 · 82 阅读 · 0 评论 -
1.Vue
1.Vue 一套用于构建用户界面的渐进式JavaScript框架 ， 只关心视图层的构建 网络通信 ： axios 页面跳转 ： vue-router 状态管理 ： vuex 前端技术 结构层（HTML） 表现层（CSS） 缺点 ： 语法不够强大，无法嵌套书写，导致模块化开发中要重复书写选择器 没有变量和合理的样式复用机制，难以维护 CSS预处理器 ： 定义了一种新的语言 ，为CSS增加了编程特性。将CSS作为目标生成文件，开发者使用这种语言进行CSS的编码，最终生成CSS文件使用 SAS原创 2021-07-20 12:48:32 · 121 阅读 · 0 评论