![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
AntonA
这个作者很懒,什么都没留下…
展开
-
vue基础语法1
vue是目前最火的一个前端框架(只关注视图),react是最流行的一个前端框架。为什么学习前端框架?利用框架可以提高开发效率,原生js有一些兼容性(jquery就出现了,解决了兼容性问题),经常去操作dom元素,这时就出现了前端的模板引擎,省去了字符串拼接,但是页面在渲染的时候不会重新对标签进行排序,模板引擎会渲染整个页面,这时候就出现了框架,减少了不比啊哟的dom操作,不用渲染整个页面,...原创 2018-09-19 16:12:22 · 496 阅读 · 0 评论 -
vue中使用腾讯地图api
在vue-cli脚手架搭建的vue项目里使用到了腾讯地图。看了腾讯地图的官方给出的API(https://lbs.qq.com/javascript_v2/index.html)敲了一遍代码,才有点感觉写一个总结点的东西。 使用前需要在index.html里引入<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&am...原创 2019-08-13 11:42:45 · 5961 阅读 · 0 评论 -
组件案例评论列表
评论的业务逻辑:1. 评论使用的是一个组件,把评论的数据存放到localStorage中2. 先组织出一个最新的评论数据对象3. 把第二步得到的评论对象,保存到localStorage中3.1 localStorage只支持存放字符串的数据,要先调用JSON.stringify3.2 在保存最新的评论数据之前,要先从localStorage获取到之前的评论数据(string)转...原创 2018-09-21 16:02:47 · 685 阅读 · 0 评论 -
v-model的练习简易计算器
v-model是个双向数据绑定的指令,只能用在表单中,注意表单中的数字也是个字符串,所以要计算的话,必须转换为数字类型其中v-model中绑定的是个变量,该变量必须在data中先声明,否则会报错,当点击=按钮的时候用一个方法来计算前两个数的运算。其中这里用到一个函数eval(string),它是用来计算字符串的,只能是原始的字符串,不能用一个属性或者对象再去定义它。 ...原创 2018-09-21 11:17:04 · 610 阅读 · 0 评论 -
vue简单实例跑马灯
1. 首先在页面上声明两个按钮,点击按钮在按钮上面添加两个方法,让字符串跑起来和停止。在vue实例的data中,先声明一个字符串让他在页面上显示,在声明一个定时器,因为一点击按钮让字符串跑起来和停止用到了定时器。2. 在methods中写两个方法,一个开启定时器,一个停止定时器。为了防止多次点击定时器,先在开启定时器的时候,判断定时器是否为空,如果为空,则可以开启,否则return。...原创 2018-09-21 10:51:59 · 1762 阅读 · 0 评论 -
vue实例2 --简易购物车
其中的template标签:vue中特殊的标签,用来放置v-if和组件等指令,内部包含其他标签的内容,页面渲染的时候该标签不会被渲染。步骤:1. 首先在vue实例中先声明好购物车里面的数据,有用户名,地址,总价,和商品的数组列表2. 在页面显示的时候先判断数据中是否为空,如果为空,则显示购物车为空,否则循环遍历数据中的数组元素放到页面的表格中3. 该页面的第三列是个商品的数量,左右都有...原创 2018-09-20 22:22:33 · 1068 阅读 · 0 评论 -
生命周期钩子函数
生命周期钩子函数一共经历四个过程:1. 创建时期beforeCreated()这个阶段表示实例完全被创建出来之前,会执行它,注意:在beforeCreated生命周期函数执行的时候,data和methods中的数据都还没有初始化,现在输不出data和methods中的数据。created钩子函数:在created中,data和methods都已经初始化好了,如果要调用methods中的...原创 2018-09-20 21:54:07 · 1253 阅读 · 0 评论 -
插槽的解释
插槽的概念: 插槽的关键字slot,默认情况下,组件中的模板会覆盖组件中的原始内容(即自定义标签对内部的内容会不显示),解决办法就是使用插槽。组件的原始内容: 即在vue实例范围之内,因此可以调用实例的data和methods插槽共分为3中:插槽的结构:匿名插槽:<slot></slot>具名插槽:<slot name=top></sl...原创 2018-09-20 21:46:18 · 6189 阅读 · 1 评论 -
非父子组件之间的传值
非父子组件之间的传值其实和子往父传值是差不多的,只不过非父子组件之间的传值,是借助一个vue实例,一般起名为bus。非父子组件之间的传值的步骤:1. 在某个方法中,通过bus.$emit发射一个自定义事件,并传递数据(当前发射的数据存储在bus的实例中)2. 在mounted生命周期的钩子函数中,通过bus.$on来监听发射过来的字符串事件,并在回调函数中接受传递的数据,即bus.$o...原创 2018-09-20 21:23:32 · 585 阅读 · 0 评论 -
vue组件传值
什么是组件? 组件的出现,就是为了拆分vue实例的代码量的,能够让我们以不同 的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以直接调用对应的组件即可。组件化和模块化的不同:模块化: 是从代码的逻辑角度进行划分的,方便代码的分层开发,保证每个功能模块的职能单一,后端一般是指模块化组件化:是从ui界面的角度进行划分的,方便UI组件的重用,前端的组件注意:组件中只有一个根元...原创 2018-09-19 18:03:53 · 159 阅读 · 0 评论 -
vue组件的介绍
1. 组件的本质,即自定义标签,其实是个迷你版的vue实例,必须在vue实例化之前声明,创建或者注册一个全局组件,任何一个vue实例都可以调用参数1: 组件名称(自定义的标签名),命名方式my-com,或者myCom,但是在页面调应方式,必须以my-com调用,标签没有大写字母参数2: 是个对象,---设置当前组件的相关数据信息,比如模板内容,组件内部的data属性和methods和com...原创 2018-09-19 17:38:24 · 309 阅读 · 0 评论 -
vue中的计算属性
在vue生成的实例中,有一个methods对象和computed对象,都是用来存放方法的computed计算属性: 但是methods中,需要用到计算或者逻辑运算的方法,通常将其放置在computed属性中,本质是个方法,即内部放置了大量的方法,这类方法比较特殊,内部包含大量的计算过程或者逻辑运算,最终得到计算的结果,即return。注意事项:调用computed属性中的方法时,不能加括号...原创 2018-09-19 17:19:54 · 478 阅读 · 0 评论 -
vue第一个实例省市区联动
在写省市区联动的时候必须考虑市是依赖于省的,而区是依赖于市的,所以在data中先定义三个默认的值,为当前选中的第几个省市区,然后根据索引号可以在下面依赖的项中根据依赖的索引号来出现对应的。该省市区在data数据中的结构如图:...原创 2018-09-19 17:08:47 · 544 阅读 · 0 评论 -
vue的样式绑定
添加样式一共 有两种1. style属性添加动态样式的方法(1)以对象的方式添加(1.1 )对象的属性名:是样式的属性名(小驼峰法命名)(1.2 )对象的属性值: 不加引号,就是绑定的data属性中的变量,加引号,就是普通的演示属性值(2)以数组的方式添加样式(2.1 ) 将样式键值对放置在data的某个变量中(2.2 )将变量作为数组元素放置在数组中2. ...原创 2018-09-19 16:56:32 · 395 阅读 · 0 评论 -
vue的指令
vue是通过大量的指令来实现的某种功能 指令结构:v-指令名,注意事项: angular与vue类似,也使用了大量的指令,但是指令以ng-开头,vue实例化中的this指向当前实例化的vue对象本身,data中的数据和methods中的方法,都挂载在实例化对象上,可直接调用。1. 条件判断指令v-if: 值为布尔值,作用:当为true时,该指令所在的标签存在并在页面中显示,当值为...原创 2018-09-19 16:44:12 · 136 阅读 · 0 评论 -
vue项目中调用原生的支付宝接口
vue项目中调用支付宝进行支付有两种方式:一、支付宝H5网页支付,这种方式会从内部的项目跳转到支付宝的外部链接,只需要后台配置即可。 在前端点击支付的按钮的时候,会请求后台的接口,后台会返回一个form表单的数据,前端只需要将返回的表单添加到页面中即可,但是这种方式只要支付失败的话,就直接退出了整个程序。 二、 调用手机原生支付宝app。 1. ...原创 2019-08-13 12:06:05 · 3614 阅读 · 0 评论