Vue.js

先遣练习

题目：【使用Vue实现新浪新闻首页Tab切换效果】

效果图： 可在新浪首页 (sina.com.cn)查看效果

1.v-bind

前面我们都是通过指令来将值插入到我们的标签内容中，但除了内容外，我们还需要动态绑定某些属性，比如：a标签中的href属性，img标签中的src属性；这个时候我们就可以使用v-bind指令，它的作用就是可以动态绑定属性。

小技巧：v-bind简写 例如： v-bind:class -- :class v-bind:href -- :href v-bind:value -- :value ...

1.1、Type绑定

<div id="app">
    <a :href="hrf">{{text}}</a>
    <button @click="goSina">更换到{{text}}的其他链接</button>
</div>

new Vue({
    el: "#app",
    data: {
        hrf: 'http://baidu.com',
        text:'百度'
    }
    , methods: {
        goSina() {
            this.hrf = "http://sina.com.cn",
            this.text='新浪'
        }
    }
})

1.2、Class绑定

<div id="app">
    <p :class="{'blue':isBlue}">我是蓝色的字 - 绑定类名</p>
    <p :class="{'blue':isBlue,'italic':isItalic}">我是蓝色又倾斜的字 - 多个类名</p>
    <p :class="isBlue?'blue':''">我是蓝色又倾斜的字 - 三元</p>
    <p :class="isBlue&&isItalic?'blue italic':''">我是蓝色又倾斜的字 - 三元扩展</p>
    <p :class="['blue','italic']">我是蓝色又倾斜的字 - 数组</p>
    <p :class="addClass()">函数返回类名</p>
</div>

new Vue({
    el: "#app",
    data: {      
        isBlue: true,
        isItalic: true,
    },
    methods: {
        addClass() {
            // return { 'blue': this.isBlue }
            // return ['blue', 'italic']
            return this.isBlue ? 'blue' : ''
        }
    }
})

1.3、Style绑定

<ul>
    <li :style="{background:bg,'color':'blue'}">我是li</li>
    <li style="background:blue;color:red">我是li</li>
    <li :style="{background:bg,'color':Color}">我是li</li>
    <li :style="allBg">我是li</li>
    <li :style="allColor">我是li </li>
    <li :style="[allBg,allColor]">我是li - 数组</li>
    <li :style="addStyle()">我是li - 函数返回</li>
</ul>

let vm = new Vue({
    el: "#app",
    data: {
        bg: 'pink',
        Color: 'red',
        allBg: { background: 'red', color: 'yellow' },
        allColor: { fontStyle: 'italic' }
    },
    methods: {
        addStyle() {
            return [this.allBg, this.allColor]
        }
    }
})

2.v-for

<div id="app">
    <ul>
        <!--使用index作为key-->
        <!-- <li v-for="(item,index) in arr" :key="index">
            {{index}} - {{item.name}} 
            <input type="text">
        </li> -->
        
        <!--使用id作为key-->
        <li v-for="item in arr" :key="item.id">
            {{item.name}} 
        <input type="text"></li>
    </ul>
    <button @click="addArr">添加内容</button>
</div>

new Vue({
    el: "#app",
    data: {
        // arr: ['a', 'b', 'c']
        arr: [{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }]
    }
    , methods: {
        addArr() {
            this.arr.unshift({ id: 3, name: 'd' })
        }
    }

小节： 为什么key要尽量使用id而不是index key作为唯一标识符，如果选用index就失去唯一性 使用index 在数组发生改变的时候 他自己也会发生变化 失去唯一性 尽量不要使用index 作为key 总结： 当数组不发生改变时（一次性渲染），key可以选择index 或者id 当数组会改变时，会引起html重排，不要使用index，最好选择id作为key

3.computed -- 计算属性

3.1、为什么会有(computed)计算属性

因为vue的使用中data中的数据是不能互相调用的所以有了computed这个属性， computed属性(计算属性)用来实现实现 结构拼接 或者 数据合并

3.2、computed属性与methods的区别

computed是属性调用，methods是方法调用 computed有缓存功能，多次使用时，该属性只会触发一次调用，而methods是使用一次就触发一次

 <div id="app">
     <ul>
         <li>名：{{firstName}}</li>
         <li>性：{{lastName}}</li>
         <!-- 执行一次  因为 computed有缓存 -->
         <li>姓名 {{username}}</li>
         <li>姓名 {{username}}</li>
         <!-- 执行多次  因为 methods没有缓存 -->
         <li>姓名 {{username1()}}</li>
         <li>姓名 {{username1()}}</li>
     </ul>
 </div>

new Vue({
    el: "#app",
    data: {
        firstName: 'Michael',
        lastName: 'Jackson'
    },
    // 执行一次  因为 computed有缓存
    computed: {
        username() {
            console.log('computed');
            return this.firstName + ' ' + this.lastName
        }
    },
    // 执行多次  因为 methods没有缓存
    methods: {
        username1() {
            console.log('methods');
            return this.firstName + ' ' + this.lastName
        }
    },
})

4.v-model -- 语法糖详解

4.1、下拉框案例

<div id="app">
    <select name="" id="" v-model="result">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橘子</option>
    </select>
</div>

new Vue({
    el: "#app",
    data: {
        result: 'orange'
    }
})

4.2、解析v-model -- 双向绑定

v-model 其实是个语法糖(方便简写代码的语法) 它背后本质上包含了两个操作： v-bind 绑定input元素的value属性 v-on 指令绑定input元素的input事件

4.2.1、v-model语法糖

<input type="text" v-model="text">
<h1>{{text}}</h1>

new Vue({
    el: "#app",
    data: {
        text: 'hello word ！'
    }
})

4.2.2、拆分v-model

<input type="text" :value="text" @input="addText">
<h1>{{text}}</h1>

new Vue({
    el: "#app",
    data: {
        text: 'hello word ！'
    },
    methods: {
        //事件源
         addText(e) {
             console.log(e); 
             this.text = e.target.value
         }
    }
})

4.2.3、一行完成双向绑定

<input type="text" :value="text" @input="text=$event.target.value">
<h1>{{text}}</h1>

new Vue({
    el: "#app",
    data: {
        text: 'hello word ！'
    }
})

5.过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 ( 后者从 2.1.0+ 开始支持 )。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

例如: 格式化价格

5.1、全局过滤器

<div id="app">
    <p>{{price | filterMoney}}</p>
</div>

Vue.filter('filterMoney', (num) => {
    // toFixed(n)方法保留多少位小数
    return '￥' + num.toFixed(2) + ' 元'
})
new Vue({
    el: "#app",
    data: {
        price: 21.9
    }
})

5.2、局部过滤器

局部过滤器 ， 凡是 有全局又有局部的 局部使用后面都要加给s --- filter（全局） filters（局部）

<div id="app">
    <p>{{price | filterMoney}}</p>
</div>

new Vue({
    el: "#app",
    data: {
        price: 22.9
    },
    filters:{
        filterMoney(num){
            return '￥' + num.toFixed(2) + ' 元'
        }
    }
})

5.3、过滤器的使用场景

<div id="app">{{price | Mony}}</div>
<div id="app1">{{price |Mony}}</div>

当两个 都要使用过滤器并且使用的方法都一样时可以使用全局过滤器

Vue.filter('Mony', (num) => {
    return '￥' + num.toFixed(2) + '元'
})
new Vue({
    el: "#app",
    data: {
        price: 20.3
    }
})
new Vue({
    el: "#app1",
    data: {
        price: 50.9
    }
})

6.本地存储

6.1、永久存储

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

6.2、暂存

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

6.3、cookie

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存储在服务器。