[JavaScript知识库] VUE进阶复习

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> VUE进阶复习 -> 正文阅读

[JavaScript知识库]VUE进阶复习

一.绑定style属性

1.对象形势

<h2 v-bind:style="{color: c,'font-size': s}">{{message}}</h2>

2.定义方法

<h2 v-bind:style="getCss()">{{message}}</h2>

3.数组

<h2 v-bind:style="[c1,s1]">{{message}}</h2>

二.计算属性

computed:{
      /*这里就是提供一些数据处理的*/
}

方法的调用是没有缓存的，每一次调用都执行

计算属性有缓存，可以多次调用

三、var、let、const

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。

? ? 2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函? ??? ??数访问

? ??3.const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用? ??? ??域里访问，而且不能修改。

四、ES6增强写法

1.属性增强写法

<!--属性增强写法-->
    const name='张三'
    const age=17
    const height=1.73
    <!--1.1 es5写法-->
    // const obj={
    //   name:name,
    //   age:age,
    //   height:height
    // }
    // console.log(obj)
    <!--1.2 es6写法-->
    // const obj={
    //   name,
    //   age,
    //   height
    // }

2.函数增强写法

<!--es5函数增强写法-->
    // const obj={
    //   name:function () {
    //     console.log(name)
    //   },
    //   age:function () {
    //     console.log(age)
    //   },
    //   height:function () {
    //     console.log(height)
    //   },
    // }
    // console.log(obj)
    <!--1.2 es6函数增强写法-->
    const obj={
      name () {
        return name
      },
      age () {
        console.log(age)
      },
      height () {
        console.log(height)
      }
    }

五、Vue中的$event

获取原生DOM事件的事件对象

六、v-if和v-show的区别

1.V-If

在首次渲染的时候，如果条件为false时，什么也不操作，页面就会当作没有这些元素。而当条件为true时，开始局部编译，动态的向DOM元素里面添加元素。当条件从true变为false时，开始局部编译，卸载这些元素，也就是删除。

2.V-show

v-show不管条件是true还是false，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none的方式来显示隐藏元素。

七、V-for遍历对象

1.遍历对象

v-for遍历对象可接受三个参数（value, key, index），value为每个对象的value值，key为key值，index为索引

<li v-for="(value,key,index) in book">{{key}}-{{value}}</li>

book:{id:1,name:'平凡的世界',price:100}

2.遍历数组

<li v-for="(value,index) in arr">{{index}}-{{value}}</li>

arr:[11,22,33,44,55]

八、购物车案例

1.splice方法

删除任意数量的项，只需要传入两个参数即可。要删除的第一项的位置和要删除的项数

<td><button v-on:click="del(index)">删除</button></td>

del(index){
        this.books.splice(index,1);
      }

控制按钮的出现与消失

v-bind:disabled="book.count<=1"

购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  <table cellspacing="0" border="1">
    <h2>购物车</h2>
    <tr>
      <td>ID</td>
      <td>书名</td>
      <td>日期</td>
      <td>数量</td>
      <td>价格</td>
      <td>操作</td>
    </tr>
    <tr v-for="(book,index) in books">
      <td>{{index+1}}</td>
      <td>{{book.name}}</td>
      <td>{{book.date}}</td>
      <td>
        <button v-bind:disabled="book.count<=1" v-on:click="sub(index)">-</button>
        {{book.count}}
        <button v-on:click="add(index)">+</button>
      </td>
      <td>{{book.price}}</td>
      <td><button v-on:click="del(index)">删除</button></td>
    </tr>
    <tr>
      总价：{{allprice}}
    </tr>

  </table>
</div>
<script src="js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      message:"hello VUE",
      books:[
        {name:'水浒传',date:'这个',price:100,count:1},
        {name:'西游记',date:'这个',price:100,count:1},
        {name:'红楼梦',date:'这个',price:100,count:1},
        {name:'三国演义',date:'这个',price:100,count:1}
      ],
    },
    methods:{
      add(index){
        this.books[index].count++;
      },
      sub:function (index) {
        this.books[index].count--;
      },
      del(index){
        this.books.splice(index,1);
      }

    },
    computed:{
      allprice(){
        let price=0;
        for (let i=0;i<this.books.length;i++){
          price+=this.books[i].price*this.books[i].count;
        }
        return price;
      }
    }
  })
</script>
</body>
</html>