Vue  是 轻量的 模型视图视图模型 框架。就是数据的双向开发。

数据驱动+组件化开发。

渐进式框架。

官网:cn.vuejs.org

在读 Vue2.0 文档的时候,介绍“Vue.js(读音 /vjuː/,类似于 view)是一套构建用户界面的渐进式框架。与其他重量级不同的是,Vue 采用自底向上增量开发的设计。”
那么问题来了,什么是“渐进式框架”?什么是“自底向上增量开发”?

渐进式:可以一步一步使用,可以选择性的精简使用。

暂且这么理解。  可以先跳过,不求甚解。之后用过vue开发之后自然可以体会出它的特点。

响应式:就是可以自适应调整布局,适应多种分辨率。

==

Vue 指令 都是 v-开头。

Angular 是以ng- 开头。所有的属性和方法都存储在作用域中。$scope。

这些框架包括react都不兼容低版本的因特尔浏览器,8以下的。

可以使用 bower info vue 来查看它的版本信息。所有版本。

浏览器控制台会提示下载vue的开发工具。

生产环境不要提示。

Vue.config.devtools=false;//取消调试。

Vue.config.productionTip= false;//取消提示。

Vue常用的指令

v-model  双向数据绑定。 一般用于表单元素。

v-for

v-on   绑定事件。用法: v-on:事件名=”函数”

鼠标经过 事件 mouseover

Arr.push(666)  向arr这个数组里面添加元素666.

判断两个对象相等  === 三个等号。

v-show/v-if 用来显示隐藏元素。 V-show是真正的隐藏,通过display实现。

v-if是每次删除后重新创建。

通过v-show和v-on:click来切换显示隐藏div

v-show 是给这个div添加display属性。V-if这个div就会消失或创建。

v-model

v-for

==

this.user.splice(this.nowIndex,1);//从指定索引位置开始删除,删除一个。

vue 中this.nowIndex === -1  三个等于来判断。

v-bind 属性的绑定。

v-bind:src=”url”

v-bind:src 简写为 :src

事件的简写 v-on:click简写@click

class 和style   一个 类一个样式。

动态的修改样式。动态的修改属性。

通过数组 来指定多个样式。

==

网站风暴 这个软件 可以直接拖拽vue.js这类文件,直接到html文件中,会直接生成

<script src=”js/vue.js”></script>这条语句。

==

VUE:跨域设置

本地与非本地环境中的接口进行联调,会出现跨域问题。

在config文件夹下的index.js中。通过在该JS文件中的dev对象里配置proxyTable来实现跨域访问设置。

在该项配置中,target设置的是需要访问的API的域名,配置结束后,如果需要访问https://xxxxx/api/xxxx/xxx,只需要将访问的链接地址设置为/api/xxxx/xxx即可,webpack会进行转发。

S:如果在项目路径中没有找到config文件夹的童鞋,你可能需要更新下vue-cli了,老版本的vue-cli没有config以及build文件夹。

这种办法只能解决一部分此类问题。举个栗子,有时候开发会遇到调用接口需要依赖cookie的情况,但是不同域名下的cookie无法共享,这就导致在本地开发的过程中,虽然在vue-cli的config下做了跨域设置,能够调用到接口,但是却无法请求到数据的问题,这着实让人头疼不已。

==

404 跨域 80端口,允许3000端口。

koa跨域访问。默认是拦截的。

==

vue router 新窗口

$router.push 新窗口

//this.$router.push({ path: `/ip-list/${selectedIP}` })letrouteData = this.$router.resolve({ path:'/ip-list', query: { selectedIP:selectedIP } });//这种写法不行,参数传不过去。//letrouteData = this.$router.resolve({ path: `/ip-list/${selectedIP}` });window.open(routeData.href, '_blank');//this.filters.name = this.$route.params.selectedIPthis.filters.name = this.$route.query.selectedIP,

==

vue 什么是渐进式 响应式 意思。Vue常用的指令。VUE:跨域设置。vue router 新窗口。$router.push。相关推荐

  1. VUE 响应式原理源码:带你一步精通 VUE | 原力计划

    作者 | 爱编程的小和尚 责编 | 王晓曼 出品 | CSDN博客 学过 VUE 如果不了解响应式的原理,怎么能说自己熟练使用 VUE,要是没有写过一个简易版的 VUE 怎么能说自己精通 VUE,这篇 ...

  2. 一张图理清 Vue 3.0 的响应式系统

    点击上方 "程序员小乐"关注, 星标或置顶一起成长 每天凌晨00点00分, 第一时间与你相约 每日英文 Success is actually simple – when you ...

  3. vue 数组 指定位置添加数据_VUE 响应式原理源码:带你一步精通 VUE | 原力计划...

    作者 | 爱编程的小和尚 责编 | 王晓曼 出品 | CSDN博客 学过 VUE 如果不了解响应式的原理,怎么能说自己熟练使用 VUE,要是没有写过一个简易版的 VUE 怎么能说自己精通 VUE,这篇 ...

  4. 如何优雅的在 vue 中使用 非响应式对象_一篇文章上手Vue3中新增的API

    1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install @vue/composition-api -S/ ...

  5. vue源码之响应式数据

    分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...

  6. Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究

    Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究 在github上阅览README.md以获得最佳阅读体验,点这里 v-for响应式key ...

  7. Vue.js 3.0 响应式 API 比 2.x 好在哪儿?

    Hello,各位小伙伴,接下来的一段时间里,我会把我的课程<Vue.js 3.0 核心源码解析>中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定 ...

  8. MVVM 和 VUE三要素:响应式、模板引擎、渲染

    本文将详细解答以下问题 如何理解mvvm 说一下使用jQuery和使用mvvm框架的区别 说一下对mvvm的理解 vue如何实现响应式 vue如何解析模板 vue的整个实现流程 jQuery和vue的 ...

  9. 深入Vue原理_数据响应式

    欢迎各位小伙伴们! 为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题.从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官 数据响应式 ...

最新文章

  1. java面试常见问题之Hibernate总结
  2. 127 - Accordian Patience
  3. ElasticSearch大数据分布式弹性搜索引擎使用—从0到1
  4. sql server限制查询条数_18. Django 2.1.7 查询集 QuerySet
  5. pip临时使用国内下载源,提高下载的速度
  6. Postgres 9.2.4的升级方案与步骤
  7. 计算机软件服务板块,信息技术板块
  8. bzoj4517[Sdoi2016]排列计数(组合数,错排)
  9. 【游戏】基于matlab中国象棋【含Matlab源码 489期】
  10. java将数字转为大写(1转为一)
  11. 设备\Device\Harddisk1\DR1 有一个不正确的区块
  12. 华硕电脑开机 C键和空格建不灵了怎么办
  13. 前端开发实习面试题(Vue篇)
  14. 【解决】计算机用户名是中文名导致软件安装失败!
  15. 微软亚洲研究院全球院友线上欢聚,共话新春
  16. 数据库管理员、系统分析员、数据库设计人员,应用程序员的职责是什么?
  17. 怎样推断server为虚拟机还是物理真机?
  18. JSP页面调用log4j写日志文件
  19. 大数据(线性/非线性)降维方法(PCA,LDA,MDS,ISOMAP,LLE)
  20. Linux下安装和使用RTX腾讯通

热门文章

  1. Redis教程(一) Redis入门教程
  2. 弘辽科技:淘宝联盟的推广方式有哪些?
  3. 【Cadence Virtuoso】IC617 入门操作 (MOS特性分析)
  4. PTA甲级 1043 Is It a Binary Search Tree (25分) 树的遍历
  5. Ionic开发入门教程_3
  6. datagrip对Oracle支持不好,datagrip 连接oracle
  7. CSS高手布局:让footer完美处于网页下方
  8. Xcode14 正式版编译报错‘ does not contain bitcode.解决方案
  9. 雾锁FCoin:局中局套住了谁?
  10. 【功能介绍】AdsPower团队协作版|管理员vs团队成员的功能使用权限区别