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>

Vue2.5开发去哪儿网App 第三章笔记下的更多相关文章

Vue2.5开发去哪儿网App 第五章笔记下
1. 多个元素或组件的过渡多个元素的过渡: <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-ac ...
Vue2.5开发去哪儿网App 第四章笔记下
1.解决非父子组件之间的传值问题非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 给 Vue类上挂在一个属性,然后创建vue实例时,实例就拥有了这个属性 Vue.prototype.bus ...
Vue2.5开发去哪儿网App 第三章笔记上
1. vue 生命周期函数每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 ...
Vue2.5开发去哪儿网App 第五章笔记上
1.css动画原理 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; } .fade-leave-to{ o ...
Vue2.5开发去哪儿网App 第四章笔记上
一 . 组件细节知识点 1. 解决组件在h5中编码规范例如 : table , ul , ol 等等 <table> <tbody> <row></r ...
Vue2.5 开发去哪儿网App
Vue2.5开发去哪儿网App 技术栈和主要框架
Vue2.5开发去哪儿网App 首页开发
主页划 5 个组件,即 header icon swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...
Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用
一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...
Vue2.5开发去哪儿网App 从零基础入门到实战项目
第1章课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基 ...

随机推荐

POSTMAN 数据关联
概述在使用postman测试接口是,我们可能需要先获取一个token,然后再将这个token发送到第二个请求.这个需要做postman的关联,一次性完成这两个测试. 实现方法 1.编写两个控制器方法 ...
C++二级指针第一种内存模型（指针数组）
二级指针第一种内存模型(指针数组) 指针的输入特性:在主调函数里面分配内存,在被调用函数里面使用指针的输出特性:在被调用函数里面分配内存,主要是把运算结果甩出来指针数组在C语言和C++语言中,数组 ...
hibernate之三种时态之间的转换
判断状态的标准 oid 和 session相关性 public class HibernateUtils { private static SessionFactory sessionFact ...
(spfa) Highway Project (zoj 3946 )
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5718 Highway Project Time Limit: 2 Seco ...
如何将指定文件或文件夹直接提交到svn指定目录
以下步骤适用于客户端是Tortoisesvn 服务端是VisualSVN Server的SVN库: 安装Tortoisesvn 获取配置库路径 checkout想要提交到的SVN库或目录将需要提交 ...
java读取excel文件(.xls,xlsx,csv)
前提,maven工程通过poi读写excel文件,需要在pom.xml中配置依赖关系: 在<dependencies>中添加如下代码 <dependency> <grou ...
响应式和移动 web
移动web 教程:http://www.imooc.com/learn/494 iphone5 问题一:6401136的图片,能否在iphone5上完全显示? chrome下 iphone5:3205 ...
SRM473
250pt: 题意:在二维平面上,给定3种,左转.右转,以及前进一步,的指令序列循环执行,问整个移动过程是否是发散的. 思路:直接模拟一个周期,然后判断1.方向是否和初始时不同 2.是否在原来的点满 ...
C++ const方法及对象
一.整体代码 01.cpp #include <iostream> using namespace std; class Test { public: Test(int x) : x_(x ...
Android-Kotlin-空值处理&字符串比较&常量
空值处理: [案例一:] 1.Kotlin对控制处理很严格,默认就不能写null,否则编译都不通过: 描述Car汽车对象: package cn.kotlin.kotlin_base01 /** * ...

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

Vue2.5开发去哪儿网App 第三章笔记 下的更多相关文章

随机推荐

热门专题

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

Vue2.5开发去哪儿网App 第三章笔记下的更多相关文章