Vue.js 从入门到入土-02 常用指令

v-bind

属性绑定

在a标签中的href属性或者img中的src属性中我们可以用到v-bind指令来实现动态绑定的链接

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <img :src="src"/>
    <a :href="href">Vue官网</a>
  </div>
</body>
</html>

<script>
  new Vue({
    el: '#app',
    data: {
      src: 'https://vuejs.org/images/logo.png',
      href: 'https://vuejs.org/'
    }
  })
</script>

注意点: v-bind 和 v-on 一样也有简写方式 v-bind:src="" 可以简写成 :src=""

类名绑定

很多时候我们希望能够动态的切换class,选中字体颜色变红,初始状态字体为黑色;绑定class有两种方式: 对象语法和数组语法

我们可以通过 对象格式 数组格式 三元表达式格式 以及方法来实现这个操作

其中 三元运算 必须掌握!!!!!!!!!!!! 因为常用其他的要认识要知道他是个啥

<div id="app">
    <ul>
        <li>普通一行文字</li>
        <li class="current">添加了current类名的文字</li>
        <li v-bind:class="{'current': isCurrent}">对象格式，由isCurrent判断是否添加current类名</li>
        <li class="line" :class="{'current': isCurrent, 'italicFont': isItalic}">多个类名</li>
        <li :class="isCurrent ? 'current line' : 'line'">三元运算符决定类名</li>
        <li :class="['current', 'line']">数组形式的多类名</li>
        <li :class="getClass()">通过方法来返回类名</li>
    </ul>
</div>

new Vue({
    el: "#app",
    data: {
        isCurrent: true,
        isItalic: true
    },
    methods: {
        getClass(){
            return {
                'current': this.isCurrent
            }
        }
    }
})

绑定style

我们可以利用 v-bind:style 来绑定一个内嵌样式。

注意: 1. 我们可以使用驼峰式语法: 如 font-size ----> fontSize

2. 或者短横线分割 font-size

绑定样式的方法有通过 v-bind绑定 通过来自 **data数据 **绑定 数组形式 方法形式

其中通过 v-bind绑定 需要重点掌握

<div id="app">
    <ul>
        <li style="background: skyblue;">通过style标签属性写的样式</li>
        <li :style="{background: 'pink',fontStyle: 'italic'}">通过v-bind来绑定样式</li>
        <li :style="{background: bgColor,color: fontColor}">数据来自data</li>
        <li :style="[colorStyle, bgStyle]">数组形式</li>
        <li :style="getStyle()">方法形式</li>
    </ul>
</div>

方法中返回的值需要在前面加 this. 否则获取不到data中的值

new Vue({
    el: "#app",
    data: {
        bgColor: 'orange',
        fontColor: '#cfc',
        colorStyle: {color: 'pink'},
        bgStyle: {background: 'skyblue'}
    },
    methods: {
        getStyle(){
            return [this.colorStyle, this.bgStyle]
        }
    }
})

v-for

遍历数组

组件key

为什么key要尽量选择id,而不是index?

key作为唯一的标识符,如果选用index,那么他就是去了唯一性.

index在数组发生改变的时候,它自己也会变化,所以当数组式会改变的时候,尽量不要选择index作为key

总结

当数组不发生改变时(一次性渲染) , key可以选用index或者id.

当数组要发生改变时,这时候会引起html的重排,此时不要选用index,最好选择id.

计算属性

methods 计算属性

data中的属性不能调用data中的属性

computed 和 methods 的区别

computed 一般用来作为计算使用只执行一次因为computed 有缓存

methods 一般用作函数的封装回执行多次因为methods没有缓存

v-model的原理

v-model 是语法糖( 方便简写代码的语法 )

<input type="text" v-model='msg'>

可以看做

<input type="text" v-model='msg' v-on:input='iptChange'>

可以看做

<input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>

js部分

  new Vue({
        el: "#app",
        data: {
            msg:'你好世界'
        },
        methods:{
            iptChange(e){
                this.msg = e.target.value
            }
        }
    })

下拉选择框

在下拉框中可以通过 v-model 来修改默认值

例如:

	<div id="app">
        <select v-model='msg'>
            <option value="apple">苹果</option>
            <option value="banana">香蕉</option>
            <option value="hotdog">热狗</option>
        </select>
    </div>

    let haha = new Vue({
        el: "#app",
        data: {
            msg: 'banana'
        }
    })

这时下拉框默认选中 value 值为 banana 的香蕉

通过修改 msg 的值来动态操作下拉框的默认选项

自定义过滤器

Vue.js 中允许你自定义过滤器,可以被用于一些常见的文本格式化。

过滤器可以用在两个地方:双或括号插值和 v-bind 表达式

下面将用格式化价格来举例

全局过滤器

全局过滤顾名思义就是指在全局创建一个过滤器

Vue.filter('过滤器名称',配置项)

	Vue.filter('filterMoney', (val) => {
        return '￥' + val.toFixed(2) + '元'
    })

toFixed(2) 代表显示小数点后两位

局部过滤器

局部过滤器需要在Vue中创建

new Vue({
    el: "#app",
    data: {
        price: 25.3
    },
  	// 局部过滤器
    filters: {
        priceFilter(val){
            return "¥ "+val.toFixed(2)+" 元";
        }
    }
})

以上两种过滤器的使用方法一致

本地存储

localStorage 永久存储

// 添加数据;	setitem的value值是字符串类型的数据
localStorage.setItem('name','张三');
// 获取数据
localStorage.getItem('name','张三');
// 删除数据
localStorage.clear();

注意:

1. 除非是主动删除 , 不然是不会自动删除的
2. 一般浏览器存储的大小是5M---->5M = 1024 * 5kb

sessionStorage临时会话存储

// 添加数据;	setItem的value值是字符串类型的数据
sessionStorage.setItem('name','张三');
// 获取数据
sessionStorage.getItem('name','张三');
// 清空
sessionStorage.clear();

注意:

1.关闭浏览器就会自动清空数据

2.一般浏览器存储的大小是5M

cookie

网站中，http请求时无状态的。也就是第一次登陆成功（发送请求），第二次请求服务器依然不知道是哪一个用户。这时候的cookie就是解决这个问题的，第一次登陆后服务器返回数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求，浏览器自动会把上次请求存储的cookie数据自动带上给服务器，服务器根据客户端的cookie来判断当前是哪一个用户。cookie存储有大小限制，不同浏览器不一样，一般是4kb，所以cookie只能存储小量数据。

4kb = 4 * 1024 byte (字节) = 4 * 1024 * 8 bit（位）

服务器会把第一次登陆后服务器返回的cookie存储到浏览器中

发一个请求给后端（自动带上第一次登陆后的cookie），拿回我自己购物车的列表

服务端接收到这个请求后，根据浏览器带上的cookie做出判断，判断当前是哪一个用户

session

session和cookie的作用有点类似，也是存储用户相关信息。不同的是cookie存储在浏览器，而session存储在服务器。

Vue.js的从入门到入土-02