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-10vue锚点
第一种:router.js中添加mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return {selector:to.hash } } }组件:<template><div><ul class="list"><li><a href="#1" rel="external nofollow" >星期1</a></li><li><a href="#2" rel="external nofollow" >星期2...
2024-01-10vue通信
组件实例的作用域是孤立的。一、父子通信 父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息。 要让子组件使用父组件的数据,我们需要通过子组件的props选项。prop是单向绑定的,父组件属性变化时,将传递给子组件,但是不会反过来。 子组件想要和父组件通信...
2024-01-10vue开发
前端架构之路:使用Vue.js开始第一个项目 Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式。本文通过一个简单的实例开始上手Vue.js开发。 一、技术准备 使用传统mvc项目的开发人员,笔者建议在开始项目前,对以下两个技术点进行了解。 1、 Vue.js...
2024-01-10vue随笔
启动vue项目1.npm install 2.npm run dev界面的实现界面的本质是一个个的 vue 项目,存储地址是 /src/components 。打开这个目录我们可以看到项目初始给的 HelloWorld.vue 。可以清晰地看到项目分为三段结构:第一段是 <template> ,决定了网页的布局;第二段是 <script>, 存储着网页内部的数据和方法;第三段是 <styl...
2024-01-10vue的实例
vue的实例创建一个vue实例的写法和创建一个变量一样var vm = new Vue{{ //我们一般用vm来接收vue的实例,vm是 ViewModel的缩写 }} 然后,我们就可以给vue实例添加属性和方法了var vm = new Vue{{ data: { //属性的声明,不同的属性用逗号隔开 test1: 123, ...
2024-01-10vue:概要
#安装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-10vue总结1
双向数据流:js内存属性发生改变,影响页面变化;页面的改变影响js内存属性的改变;常用指令V-text 是元素的innertext只能在双标签元素中;v-html 元素的innerhtml不能包含表达式;v-if 元素是否插入v-show 元素是否隐藏v-model 上香数据绑定v-bind 单项数据绑定el: 渲染内容目的地(写定的)render 渲染...
2024-01-10vue(三)
组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代组件注册全局注册Vue.component(\'组件名称\', { }) 第1个参数是标签名称,第2个参数是一个选项对象全局组件注册后,任何vue实例都可以用组件基础用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签...
2024-01-10vue动画片
没有动画效果 显示有点生硬<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script></head><body><div , flag:false }, methods:{ } });</script></html>------------------...
2024-01-10vue之介绍
在前端框架技术中有三大框架:Angularjs谷歌ReactFacebookVue尤雨溪 vue的介绍官网:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整...
2024-01-10vue使用技巧
vue使用技巧参考地址:https://www.jb51.net/article/173761.htmvue如何实现dom的异步更新参考地址:https://segmentfault.com/q/1010000017571945vue生命周期解析https://www.jianshu.com/p/a587905b14b0?utm_source=oschina-appASThttps://segmentfault.com/a/1190000016231512?utm_source=tag-newest...
2024-01-10vue开发小结
1,组件中使用camelCased(驼峰式)命名,在html中应改为kebab-case(短横线)命名方式。2,自定义组件的v-model使用一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突...
2024-01-10vue入门案例
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-10vue长列表优化
写在前面:不知不觉 ~2020年的日子已经过去了3/4,看到微博热搜说:2020年还剩下3个月的时候,心情突然骤降~哈哈哈哈切入正题:什么是长列表优化?我们为什么需要长列表优化?我们怎样进行长列表优化长列表优化 在我们的日常工作中,会越到各种各样的列表,比如,我们通常采用分页...
2024-01-10vue知识点集锦
1、vue的优点?轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb简单易学:国人开发,中文文档,不存在语言障碍,易于理解和学习双向数据绑定:保留了angular的特点,在数据操作方面更为简单组件化:保留了react的优点,实现了HTML的封装和重用,在构建单页面应用方面有...
2024-01-10vue的基本介绍
Vue 的基本介绍1. 库(library)和框架(Framework)的区别库: 是一系列函数的集合,如果想要实现某个功能,直接调用库里面的方法即可. 例如(jquery).使用库 : 开发人员起主导作用框架: 是一套完整的解决方案,它制定了一个规则,想要使用框架,就要按照框架的规则来编写代码,框架会在何时的时机执行我们编写...
2024-01-10vue进阶知识点
一、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-10vue-介绍章节
尝试 Vue.js 方法1:使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。2:也可以创建一个 .html 文件,然后通过如下方式引入 Vue:使用vue-devtools 得用开发环境版本<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/...
2024-01-10vue分类单选标签
vue.js实现单选标签功能功能讲解:点击那个标签,那个变红,其他标签都是灰色,实现单选。效果图如下:来不及解释了,快上车!!!template代码script代码只能想到这种办法,如果有更好的,会更新文章的。...
2024-01-10vue社区活跃整合
===框架=====Nuxt(vue ssr服务端渲染)Quasar Framework 一个可以搭建多平台响应式网站的框架Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。=====Ui组件库======Element-UiiViewMuse-UiVue Material =====移动端UI库=====vux...
2024-01-10