码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-12-29 18:58:25      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:标签   一个   and   style   知识   ext   java   utf-8   货币   

一 获取后台数据用到的方式(在引入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写购物车小案例使用到的知识点总结

标签:标签   一个   and   style   知识   ext   java   utf-8   货币   

原文地址:https://www.cnblogs.com/pzh-1/p/8145056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!