vue随笔
启动vue项目1.npm install 2.npm run dev界面的实现界面的本质是一个个的 vue 项目，存储地址是 /src/components 。打开这个目录我们可以看到项目初始给的 HelloWorld.vue 。可以清晰地看到项目分为三段结构：第一段是 <template> ，决定了网页的布局；第二段是 <script>, 存储着网页内部的数据和方法；第三段是 <styl...
2024-01-10
vue部分
watch、computed、methods区别是什么watch是侦听属性；computed是计算属性；methods是方法。computed有缓存；如果computed属性依赖的属性没有发生变化，计算属性会立即返回之前的计算结果。而methods里面的函数在每次调用时都要执行。watch和computed都是以Vue的依赖追踪机制为基础的。methods里面是用来定义函数...
2024-01-10
vue总结
<!-- 1. MVC 和 MVVM 的区别 --><!-- 2. 学习了Vue中最基本代码的结构 --><!-- 3. 插值表达式 v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show --><!-- 4. 事件修饰符 ： .stop .prevent .capture .self .once --><!-- 5. el 指定要控制的区域 data 是个对象，指定了控制的区域内要用到的数据 methods 虽然带个s...
2024-01-10
vue的坑
1.获取地址栏参数 this.$route.query.id2.用this.$router.push({path:'index',query:{id:1}})跳转页面无刷新，无法监听传递的参数，可用以下方法解决：watch:{ '$route':'fun'}fun为地址栏变化要写的函数3.组件变量是数组的，v-for时，要写:key="index";4.在光标处插入值<textarea ref="mytextarea" v-model='editMsg' class="editMsg" maxlen...
2024-01-10
vue动画
1、使用transition定义动画//定义过渡的样式/*动画刚开始时的状态，动画结束时的状态*/.move-enter-active,.move-leave-active{ transition:all 2s;}/*动画过渡的css样式*/.move-enter,.move-leave-to{ opacity:0; transform:translateX(150px);}//使用vue中的transition动画组件<transition name="move"> <h2 v-if="show" cla...
2024-01-10
vue配置
安装node.js在cmd命令行运行 node –v 和 npm –v安装淘宝镜像安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架 5. (好像有问题)6.7. 8. 创建项目9.导入项目到visual studio code ...
2024-01-10
vue案列
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div2" v-bind:style="mystyle"> <section> <h1>{{title}}</h1> <table> ...
2024-01-10
vue(七)
给文件夹取别名通过import导入的时候可以直接应用别名而通过非import的方式引入的时候，要在别名前面加一个"~"PromisePromise是ES6的新增内容通过setTimeout模拟异步请求一秒钟后打印Hello WorldPromise的简单体会通过promise可以将回调地狱转化为链式编程，结构更清晰，代码更优雅Promise讲解Promise的三...
2024-01-10
vue的实例
vue的实例创建一个vue实例的写法和创建一个变量一样var vm = new Vue{{ //我们一般用vm来接收vue的实例，vm是 ViewModel的缩写 }} 然后，我们就可以给vue实例添加属性和方法了var vm = new Vue{{ data: { //属性的声明，不同的属性用逗号隔开 test1: 123, ...
2024-01-10
vue：概要
#安装nodejs-官网安装包配置环境变量node -v#安装webpacknpm install webpack -g#安装vue-clinpm install vue-cli -g#新建项目vue init webpack vuedemo#运行项目npm run devnpm install报错的npm cache clean --force CNPM安装npm install -g cnpm --registry=https://registry.npm.taobao.org二、生命周期3、部署npm...
2024-01-10
vue开发小结
1，组件中使用camelCased（驼峰式）命名，在html中应改为kebab-case（短横线）命名方式。2，自定义组件的v-model使用一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突...
2024-01-10
vue注意内容
ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。一、1、如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。2、 如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获...
2024-01-10
vue入门案例
1、技术在迭代，有时候你为了生活没有办法，必须掌握一些新的技术，可能你不会或者没有时间造轮子，那么就先把利用轮子吧。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue入门</title> 6 <!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 --> 7 <script type="text/javascr...
2024-01-10
vue异常记录
1.npm audit fix --force后报错跑不起来https://www.jianshu.com/p/f19ba506f664https://www.jianshu.com/p/9717259e5158...
2024-01-10
vue进阶知识点
一、listeners2.4.0 新增这两个是不常用属性,但是高级用法很常见;1.场景如果父传子有很多值那么在子组件需要定义多个解决attrs获取子传父中未在 props 定义的值// 父组件<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>// 子组件mounted() { console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgU...
2024-01-10
vue-介绍章节
尝试 Vue.js 方法1：使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。2：也可以创建一个 .html 文件，然后通过如下方式引入 Vue：使用vue-devtools 得用开发环境版本<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/...
2024-01-10
vue各种实例集合
注意：以下所有示例基于vue 2.x、Vuex 2.x、vm.$mount()-挂载：<body> <div id="a"> </div></body> <script> var A = Vue.extend({ template: \'<p>123</p>\' }); /*// 自动挂载 new A({ el: \'#a\' });*/ var a = new A(); a.$mount(\'#a\')//...
2024-01-10
vue实现登录拦截
本文实例为大家分享了vue实现登录拦截的具体代码，供大家参考，具体内容如下需求：用户只有登录了，用户名存储在本地储存时，才能进入首页，如果本地存储没有用户名，就不能进入首页1、登录页面的实现<template> <div class="htmleaf-container"> <div class="demo form-bg"> <div class="container"> <div class="row">...
2024-01-10
vue分类单选标签
vue.js实现单选标签功能功能讲解：点击那个标签，那个变红，其他标签都是灰色，实现单选。效果图如下：来不及解释了，快上车！！！template代码script代码只能想到这种办法，如果有更好的，会更新文章的。...
2024-01-10
vue实现树形表格
本文实例为大家分享了vue实现树形表格的具体代码，，供大家参考，具体内容如下效果如下：居中的图片：代码如下：<template> <div class="treeTable"> <table> <tr> <th>设备类型</th> <th>产品名称</th> <th>版本</th> <th>检查项</th> <th>检查子项</th> <th>检查大类</th> ...
2024-01-10
vue社区活跃整合
===框架=====Nuxt（vue ssr服务端渲染）Quasar Framework 一个可以搭建多平台响应式网站的框架Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。=====Ui组件库======Element-UiiViewMuse-UiVue Material =====移动端UI库=====vux...
2024-01-10
