用vue写购物车小案例使用到的知识点总结

Posted pzh-1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用vue写购物车小案例使用到的知识点总结相关的知识,希望对你有一定的参考价值。

一 获取后台数据用到的方式(在引入vue.js后引入vue-resource.js)

1.1使用get请求

this.$http.get(‘请求的url‘, [可选参数对象,使用{}传参]).then(成功回调函数, 失败回调函数)

1.2使用post请求

this.$http.post(‘请求的url‘,[可选参数请求报文体对象body,使用{}传参], [可选参数对象,使用{}传参]).then(成功回调函数, 失败回调函数)

注意点:$http.post()方法中的第二个参数固定写成:{emulateJSON:true},否则可能造成服务器无法接收到请求报文体中的参数值

1.3使用jsonp请求

this.$http.jsonp(‘请求的url‘, [可选参数对象,使用{}传参]).then(成功回调函数, 失败回调函数);

jsonp请求主要用来解决ajax跨域请求问题,使用jsonp实现跨域首先要保证服务器api支持jsonp请求的格式

二解决差值表达式闪烁问题

2.1<span v-cloak>{{name}}</span>

2.2<span v-text="name"></span>以文本的格式显示      <div v-html="name"></div>可以解析html标签  --->这两种都不需要加{{}}

三系统指令的使用及注意事项

3.1 v-bind:class的使用   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
.bule{
  color:blue;
}
.pink{
  color: pink;
}
.ClassA{
  color:orange;
}
.ClassB{
  color:green;
}
    </style>
</head>
<body>
    <div id="dv">
        <input type="text" v-bind:value="name">
        <!-- v-bind也可以省略 -->
        <input type="text" :value="name">

        <a v-bind="{href:‘http://baidu.com/index/‘+id}">跳转</a>

        <div :class="{ClassA:istrue}">orange</div>
        <div :class="[ClassA]">pink</div>
        <div :class="[ClassA,{ClassB:istrue}]">green</div>

    </div>
</body>
<script src="vue221.js"></script>
<script>
    new Vue({
        el:‘#dv‘,
        data:{
name:"hellow Vue",
id:1,
istrue:true,
ClassA:‘pink‘,
ClassB:‘blue‘
       }
    });
</script>
</html>

3.1.1 v-bind:src

动态获取图片的时候不能直接在img标签src中直接使用差值,需要用v-biand:src,<img v-bind:src="item.productImage" alt="烟">

3.2 v-model(双向数据绑定)

使用范围(input、select、textarea、components(Vue中的组件)

3.3 v-for

vue1.0与vue2.0对于v-for使用区别总结:
  1、vue1.0中有$index ,而vue2.0中将$index移除
  2、vue1.0中 (index,item) in list  而 vue2.0 变成了 (item,index) in list的写法
  3、vue1.0中使用 track-by来标记dom对象的唯一性,vue2.0中改成了 :key

3.4 v-if和v-show

根据表达式的真假值,切换元素的 display CSS 属性,如果为false,则在元素上添加 display:none来隐藏元素,否则移除display:none实现显示元素
v-if和v-show的总结:
      v-if和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if是将这个元素添加或者移除到dom中,
而v-show是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的。

3.4 v-on

(绑定事件监听,表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略,用在普通的html元素上时,只能监听 原生 DOM 事件。
用在自定义元素组件上时,也可以监听子组件触发的自定义事件。)
<!-- 方法处理器 -->
     <button v-on:click="doThis"></button>
     <!-- 内联语句 -->
     <button v-on:click="doThat(‘hello‘, $event)"></button>
     <!-- 缩写 -->
     <button @click="doThis"></button>
     <!-- 停止冒泡 -->
     <button @click.stop="doThis"></button>
     <!-- 阻止默认行为 -->
     <button @click.prevent="doThis"></button>
     <!-- 阻止默认行为,没有表达式 -->
     <form @submit.prevent></form>
     <!--  串联修饰符 -->
     <button @click.stop.prevent="doThis"></button>

四 自定义过滤器(格式化金额和货币)

Vue2.0 使用写法:
  <span>{{ msg | 过滤器id(‘参数1‘ ‘参数2‘ ....) }}</span>
例:(toFixed() 方法可把 Number 四舍五入为指定小数位数的数字)
       技术分享图片

 















以上是关于用vue写购物车小案例使用到的知识点总结的主要内容,如果未能解决你的问题,请参考以下文章

vue小知识点总结

回归 | js实用代码片段的封装与总结(持续更新中...)

灵活多变vue常用小案例系列(如何避免把数据写死?)

源码案例

Vue小实例

:购物车案例