Vue2.5开发去哪儿网App 第三章笔记 下

1.样式的绑定

我们可以传给 v-bind:class 一个对象，以动态地切换 class   例如：

:class="{activated:isactivated}"

上面的语法表示 activated 的更新将取决于数据属性 isActive 是否为 真值 。

实现动态切换:

<div @click="HandleDivClick" :class="{activated:isactivated}">hello world</div>

HandleDivClick:function () {
    this.isactivated = !this.isactivated
}

:class = "[class1,class2,class3......]"  添加多个样式

<div @click="HandleDivClick1" :class="[activated,'defaultClass']">hello world1</div>

HandleDivClick1:function () {
    this.activated = this.activated==='activated'?'':'activated';
}

2.绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）

<div :style="styleObj" @click="HandleDivClick2">my style</div>

styleObj:{
    color:'black',
    fontSize:'50px'
}

HandleDivClick1:function () {
    this.activated = this.activated==='activated'?'':'activated';
}

<div :style="[styleObj,{cursor:'pointer'}]" @click="HandleDivClick2">my style</div>

HandleDivClick2:function () {
    this.styleObj.color = this.styleObj.color==='black'?'red':'black';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>
    <script src="../../vue.js"></script>
    <style>
        .activated{color: red}
        .activated1{color: yellow}
        .myfontSize{font-size: 20px}
    </style>
</head>
<body>
<div id="app">
    <div @click="HandleDivClick" :class="{activated:isactivated}">hello world</div>

    <div @click="HandleDivClick1" :class="[activated]">hello world1</div>

    <!--#多个样式-->
    <div @click="HandleDivClick1" :class="[activated,'myfontSize']">hello world12</div>

    <div :style="styleObj" @click="HandleDivClick2">my style</div>

    <div :style="[styleObj,{cursor:'pointer'}]" @click="HandleDivClick2">my style</div>

</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            isactivated:false,
            activated:'',
            styleObj:{
                color:'black',
                fontSize:'50px'
            }
        },
        methods:{
            HandleDivClick:function () {
                this.isactivated = !this.isactivated
            },
            HandleDivClick1:function () {
                this.activated = this.activated==='activated'?'':'activated';
            },
            HandleDivClick2:function () {
                this.styleObj.color = this.styleObj.color==='black'?'red':'black';
            }
        }
    })
</script>
</body>
</html>

3.条件渲染 

v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="../../vue.js"></script>
</head>
<div id="app">

    <div  v-if="show" data-test="v-if">{{message}}</div>
    <div  v-else>Bye</div>
    <!--v-else 元素必须紧跟在 v-if 或 v-show 元素的后面——否则它不能被识别-->

    <!--#dom在页面上存在，display: none;-->
    <div  v-show="show" data-test="v-show">{{message}}</div>

    <template>
        <div v-if="charactor === 'a'">This is A</div>
        <div v-else-if="charactor==='b'">This is B</div>
        <div v-else>This is others</div>
    </template>

    <div v-if="myinput==='email'">
        邮箱：
        <input type="text" key="email">
    </div>
    <div v-else>
        用户名：
        <input type="text" key="username">
    </div>
</div>
<body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            show:false,
            message:'hello world',
            charactor:'a',
            myinput:'email'
        }
    })
</script>
</body>
</html>

相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它

4.列表渲染

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法

列表的遍历：

    <div v-for="(item,index) in list" :key="item.id">
        {{item.text}}--{{index}}
    </div>

list:[
    {
        id:'asjdflsfsaf',
        text:'hello'
    },
    {
        id:'12316581',
        text:'dong'
    },
    {
        id:'wefdsadf',
        text:'nyyyy'
    },
],

对象的遍历：

UserInfo:{
    username:"boss dong",
    age:20,
    school:'ny'
}
<!--key:键 item:值  index:索引-->
<div v-for="(item,key,index) in UserInfo">
    {{item}}---{{key}}---{{index}}
</div>

vue数组方法：push pop shift unshift splice sort reverse

重点 数据视图双向修改：

列表数据的修改（例如修改第二项）：

//方法1. splice()
// 语法
// arrayObject.splice(index,howmany,item1,.....,itemX)
// 参数  描述
// index   必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
// howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
// item1, ..., itemX   可选。向数组添加的新项目。
 this.list.splice(1,1,{id:'xlj',text:'new dong'});

// 方法2.修改引用
this.list=[
    {
        id:'asjdflsfsaf',
        text:'hello'
    },
    {
        id:'12316581',
        text:'new dong'
    },
    {
        id:'wefdsadf',
        text:'nyyyy'
    },
]

// 方法3：

Vue.set(this.list,1,{    id:'456789',    text:'changed by Vue.set'})

对象数据的修改：

//方法1：// this.UserInfo.username = 'new boss';

// 方法2：
Vue.set(this.UserInfo,'username','new boss');

   对象增加数据：

// 方法1.添加一个plac字段，修改引用
// this.UserInfo = {
//     username:"boss dong",
//     age:20,
//     school:'ny',
//     place:'重庆'
// }
//方法2.Vue.set方法
Vue.set(this.UserInfo,'place','北京')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="../../vue.js"></script>
</head>
<body>
<div id="app">
    <div v-for="(item,index) in list" :key="item.id">
        {{item.text}}--{{index}}
    </div>
    <button @click="HandleBtnClick">修改dong</button>

    <!--<template  v-for="(item,index) in list">-->
        <!--<div  :key="item.id">-->
            <!--{{item.text}}--{{index}}-->
        <!--</div>-->
        <!--<span>{{item.text}}</span>-->
    <!--</template>-->

    <!--对象的遍历-->
    <!--key:键 item:值  index:索引-->
    <div v-for="(item,key,index) in UserInfo">
        {{item}}---{{key}}---{{index}}
    </div>
    <button @click="ChangInfo">修改Info</button>
    <button @click="AddInfoPlace">添加地址</button>
</div>
<script>
    //vue数组方法：push pop shift unshift splice sort reverse

    var vm = new Vue({
        el:"#app",
        data:{
            list:[
                {
                    id:'asjdflsfsaf',
                    text:'hello'
                },
                {
                    id:'12316581',
                    text:'dong'
                },
                {
                    id:'wefdsadf',
                    text:'nyyyy'
                },
            ],
            UserInfo:{
                username:"boss dong",
                age:20,
                school:'ny'
            }
        },
        methods:{
            HandleBtnClick:function () {
                // #修改第二项

                //方法1. splice()
                // 语法
                // arrayObject.splice(index,howmany,item1,.....,itemX)
                // 参数    描述
                // index    必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
                // howmany    必需。要删除的项目数量。如果设置为 0，则不会删除项目。
                // item1, ..., itemX    可选。向数组添加的新项目。
                // this.list.splice(1,1,{id:'xlj',text:'new dong'});

                // 方法2.修改引用
                this.list=[
                    {
                        id:'asjdflsfsaf',
                        text:'hello'
                    },
                    {
                        id:'12316581',
                        text:'new dong'
                    },
                    {
                        id:'wefdsadf',
                        text:'nyyyy'
                    },
                ]

                // 方法3：
                Vue.set(this.list,1,{
                    id:'456789',
                    text:'changed by Vue.set'
                })
            },
            ChangInfo:function () {
                //方法1：
                // this.UserInfo.username = 'new boss';
                // 方法2：
                Vue.set(this.UserInfo,'username','new boss');
            },
            AddInfoPlace:function () {
                // 方法1.添加一个plac字段，修改引用
                // this.UserInfo = {
                //     username:"boss dong",
                //     age:20,
                //     school:'ny',
                //     place:'重庆'
                // }
                //方法2.Vue.set方法
                Vue.set(this.UserInfo,'place','北京')
            }
        }
    })
</script>
</body>
</html>