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 功能的编写,在熟悉基 ...
随机推荐
- 变动事件_DOM2级的变动事件(mutation)
DOM2级定义了如下变动事件: DOMSubtreeModified:在DOM结构中发生任何变化时触发.这个事件在其他任何事件触发后都会触发. DOMNodeInserted:在一个节点作为子节点被插 ...
- 使用jstl的Foreach 和jquery的each()的index属性
最近项目中用到隔行换色问题,使用到了jstl的foreach和jquery的each进行遍历. 首先jstl技术.除了常用的items,var外,还有一个下标属性varStatus,从0开始,使用起来 ...
- 【设计模式】Javascript设计模式——状态模式（行为型）
注:这个模式是非常聪明的,很有点数学中组合的意思,现在,来看下这个模式是怎么个思想. 问题提出:假如某个操作有三种可能,分别为1,2,3,还可能是组合,比如先执行1,再执行2或者先执行2再执行3或者1 ...
- python(1)在windows8.1下搭建python27和python36环境
去Python官网下载需要的Python版本 https://www.python.org/ 我下载的是下面这两个版本: Python 2.7.13 Python 3.6.1 安装Python27时, ...
- Python爬虫防封杀方法集合
Python爬虫防封杀方法集合 mrlevo520 2016.09.01 14:20* 阅读 2263喜欢 38 Python 2.7 IDE Pycharm 5.0.3 前言 ...
- 20145232 韩文浩 《Java程序设计》第4周学习总结
教材学习内容总结 · Chapter 继承与多态 继承:避免多个类间重复定义共同行为.继承可以理解为一个对象从另一个对象获取属性的过程. 所有Java的类均是由java.lang.Object类继承而 ...
- （最长公共子序列 暴力） Common Subsequence (poj 1458)
http://poj.org/problem?id=1458 Description A subsequence of a given sequence is the given sequence w ...
- webView自适应及缩放
WebView wv=(WebView) findViewById(R.id.webView); wv.setVisibility(WebView.VISIBLE); WebSettings ws = ...
- java后台技术
本文旨在梳理服务端开发技术栈,希望帮助后端开发同学更全面了解Java服务端主要涉及的知识点 1. 语言相关 1.1 Java 核心知识点 Java的类加载机制 JVM相关:JVM内存模型和结构,GC原 ...
- [violet2]sillyz
题意:定义S(n) = n*各数位之积,然后给定L<=R<=10^18,求有多少个n在[L,R]区间内 思路: 看了半天无从下手..看完题解才豁然开朗.. 具体思路看vani神博客吧.讲的 ...