Vue.js-购物车案例

目录

1、Vuejs的认识和特点介绍

2、Vuejs安装方式

3、Vue体验

3.1HelloVuejs初体验

3.2Vue列表展示

3.3计数器案例

3.4Vue的mvvm

3.5Vue的options选项

3.6定义Vue的template(在WebStorm中实现）

4、插值操作——mustache（双大括号）

4.1mustache语法

4.2插值操作其他指令使用

4.2.1v-once指令

4.2.2v-html指令

4.2.3v-cloak指令

4.2.4v-pre指令

5、v-bind学习

5.1v-bind基本使用

5.2v-bind动态绑定class(对象语法)

5.3v-bind动态绑定class(数组语法)

5.4作业（v-for结合v-bind)

5.5v-bind动态绑定style

5.5.1对象语法

5.5.2数组语法

6.计算属性

6.1计算属性的基本使用

6.2计算属性的复杂使用

6.3计算属性的setter和getter（完整写法）

6.4计算属性和methods的比较

7、ES6相关知识

7.1块级作用域——let和var

7.2三种方案对比——（ES没有闭包、ES5有闭包、ES6let）

7.3const的使用

7.4ES6对象字面量的增强写法

8、事件监听

8.1v-on的基本使用和语法糖

8.2v-on的参数传递问题

8.3v-on的修饰符 

9、条件判断

9.1三个条件

9.2登录切换案例

9.3v-if和v-show对比 

10、循环遍历

10.1遍历数组

10.2遍历对象

10.3v-for使用过程添加key​编辑

10.4数组中哪些方法是响应式的

11、购物车案例

---

1、Vuejs的认识和特点介绍

2、Vuejs安装方式

 推荐使用第二种方法：右键——>链接另存为

3、Vue体验

3.1HelloVuejs初体验

体验数据（Vue实例）和界面（元素）完全分离，体验Vue的响应式（当数据发生改变的时候，界面会自动的发生一些响应）

编程范式：声明式编程

编程范式：命令式编程

3.2Vue列表展示

3.3计数器案例

3.4Vue的mvvm

3.5Vue的options选项

3.6定义Vue的template(在WebStorm中实现）

快速根据缩写生成模板文本

4、插值操作——mustache（双大括号）

4.1mustache语法

4.2插值操作其他指令使用

4.2.1v-once指令

4.2.2v-html指令

4.2.3v-cloak指令

4.2.4v-pre指令

5、v-bind学习

5.1v-bind基本使用

5.2v-bind动态绑定class(对象语法)

5.3v-bind动态绑定class(数组语法)

5.4作业（v-for结合v-bind)

  
  





  



    
{{index}}-{{item}}





    
  

5.5v-bind动态绑定style

5.5.1对象语法

5.5.2数组语法

6.计算属性

6.1计算属性的基本使用

6.2计算属性的复杂使用

6.3计算属性的setter和getter（完整写法）

6.4计算属性和methods的比较

7、ES6相关知识

7.1块级作用域——let和var

7.2三种方案对比——（ES没有闭包、ES5有闭包、ES6let）

7.3const的使用

7.4ES6对象字面量的增强写法

8、事件监听

8.1v-on的基本使用和语法糖

8.2v-on的参数传递问题

8.3v-on的修饰符 

9、条件判断

9.1三个条件

9.2登录切换案例

登录切换案例：

案例出现的小问题：

9.3v-if和v-show对比 

10、循环遍历

10.1遍历数组

10.2遍历对象

10.3v-for使用过程添加key

 v-for：数组渲染之后，在中间插入元素的渲染过程

10.4数组中哪些方法是响应式的

  
  



  

    
{{items}}
  
  按钮

11、购物车案例

index.html

  
  
  



  

    

      

      

        

        
书籍名称
        
出版日期
        
价格
        
购买数量
        
操作
      
      
      

      

        
{{item.id}}
        
{{item.name}}
        
{{item.date}}
        
        
        
{{item.price|showPrice}}
        

          -
          {{item.count}}
          +
        
        
移除
      
      
    
    
总价格：{{totalPrice}}
  
  
购物车为空

main.js

const app=new Vue({
  el:'#app',
  data:{
    books:[
      {
        id:1,
        name:'《算法导论》',
        date:'2006-9',
        price:85.00,
        count:1
      },
      {
        id:1,
        name:'《算法导论》',
        date:'2006-9',
        price:85.00,
        count:1
      },
      {
        id:1,
        name:'《算法导论》',
        date:'2006-9',
        price:85.00,
        count:1
      },
      {
        id:1,
        name:'《算法导论》',
        date:'2006-9',
        price:85.00,
        count:1
      }
    ]
  },
  methods:{
    // getFinalPrice(price){
    //   return '$'+price.toFixed(2)
    // }

    decrease(index){
      this.books[index].count--
    },
    increase(index){
      this.books[index].count++
    },
    remove(index){
      this.books.splice(index,1)
    }
  },
  filters:{
    showPrice(price){
      return '$'+price.toFixed(2)
    }
  },
  computed:{
    totalPrice(){
      let totalPrice=0
      for(let i=0;i

 style.css

table {
  border:1px solid pink;
  border-collapse: collapse;
  border-spacing: 0;
}
th,td {
  padding: 8px 16px;
  border:1px solid cadetblue;
  text-align: left;
}
th{
  background-color: gold;
  color: aquamarine;
  font-weight: 100;
  font-size: 14px;
}