Vue
关注
分享
扫一扫
Vue
冰点契约丶
来自于旧世纪末，坐标:中国西部 常驻后端和测试开发领域,技术问题欢迎留言
展开
-
vue3笔记
vue3原创 2024-01-03 09:05:45 · 1103 阅读 · 0 评论 -
组件传值-route.param
1.通过指定params传递路径参数<router-link :to="{name:'send',params:{userid:123123}}">sendKeys</router-link><router-view></router-view>2.在route配置中使用:param的方式声明参数名称 path: "/send/:userid", component: SendKeys, name: "send",3.获取参数：$route.原创 2022-01-29 10:14:55 · 1294 阅读 · 0 评论 -
嵌套路由-children
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：/user/foo/profile /user/foo/posts+------------------+ +-----------------+| User | | User || +--------------+ |原创 2022-01-29 09:23:24 · 598 阅读 · 0 评论 -
Element-UI
ElementUI,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库安装npm i element-ui -Scnpm install sass-loader node-sass --save-dev sass加载器(CSS扩展语言)测试npm run dev使用element-uiimport Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk原创 2022-01-28 16:19:38 · 581 阅读 · 0 评论 -
vue-route
Vue Router 是 Vue.js 官方的路由管理器，用于模块化的、基于组件的路由配置安装npm install vue-router注册路由到vue中import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)配置router/index.jsexport default new Router({ routes: [ { path: "/router", //路由路径原创 2022-01-28 16:03:45 · 455 阅读 · 0 评论 -
vue-cli
vue-cli是一个基于 Vue.js 进行快速开发的完整系统,它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题安装Node.jssudo apt-get install node.js查看是否安装成功 node -v 查看node版本 npm -v 查看npm版本使用淘宝镜像加速工具cnpmnpm install cnpm -g安装vue-cli脚手架cnpm install vue-cli -gvu原创 2022-01-28 15:44:28 · 461 阅读 · 0 评论 -
webpack
webpack 可以将多种静态资源 js、css文件等转换成一个静态文件，以此可以减少页面的请求，从而提高浏览器响应速度，由于vue使用的是ES6语法，而浏览器支持的是ES5的语法，所以需要对语法进行降级安装webpack:1.npm install webpack -g2.npm install webpack-cli -g使用webpack1.新建工程，在工程目录下创建目录modules2.新建文件hello.jsexports.sayHay=function (){ docu原创 2022-01-28 03:38:17 · 83 阅读 · 0 评论 -
子组件向父组件传值-$emit
this.$emit()作用：子组件向父组件传值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件传值</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script></head&g原创 2022-01-27 17:10:59 · 288 阅读 · 0 评论 -
计算属性-computed
由于模板中放入太多的逻辑会让模板过重且难以维护，所以引出了计算属性，计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值，如果你不希望有缓存，请用方法来替代注意:计算属性是属性而不是方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性</title> <script sr原创 2022-01-26 06:05:14 · 83 阅读 · 0 评论 -
组件声明-Conponent与组件传值v-bind
组件声明:Vue.conponent(“组件名称”,{template:“组件标签”,props=[由v-bind传递的属性值]})组件传值:v-bind:传递给组件的值名称="值"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Conponent</title> <script src="https://cdn原创 2022-01-25 09:19:38 · 381 阅读 · 0 评论 -
数据双向绑定V-Model
V-Model会将元素value与vue的data值进行双向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>V-Model</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></h原创 2022-01-25 08:39:45 · 86 阅读 · 0 评论 -
事件绑定v-on
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app原创 2022-01-25 02:01:39 · 78 阅读 · 0 评论 -
循环语句-v-if
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>判断语句</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app原创 2022-01-25 01:45:33 · 62 阅读 · 0 评论 -
循环语句:v-for
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>for循环</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="ap原创 2022-01-25 01:44:03 · 177 阅读 · 0 评论 -
HelloVue
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello Vue</title> <!-- 导入vue依赖 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></hea原创 2022-01-25 01:16:14 · 181 阅读 · 0 评论