vue进阶语法及生命周期函数
1.calss和style绑定
操作元素的 class 列表和内联样式style是数据绑定的一个常见需求，它两都是属性，所以可以通过v-bind来绑定
1.1绑定HTML class
可以给v-bind：class一个对象，以动态切换class
<div v-bind:class="{ active: isActive }"></div>
这里也可以在对象中传入多个属性来动态切换class
模板：
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data：
data: {
isActive: true,
hasError: false
}
结果渲染：
<div class="static active"></div>
通过控制绑定事件控制内联样式style，实现js动态切换的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击更换图片颜色</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.c {
height: 200px;
width: 200px;
border-radius: 50%;
background-color: red;
}
.c1 {
background-color: green;
}
</style>
<body>
<div id="app">
<!-- v-on来监听元素点击事件 -->
<div class="c" v-bind:class="{c1:ok}" v-on:click="meta"></div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
ok:false
},
// 这里的这个this.ok = !this.ok用的很妙啊
methods:{
meta:function(){
this.ok = !this.ok
}
}
}); </script>
</html>
效果：
1.2数组语法
通过把一个数组传给v-bind：class，以应用一个class列表
<div v-bind:class="[activeClass, errorClass]"></div>
1.3表单输入绑定
用v-model指令在表单input即textarea元素上创建双向数据绑定，它的本质其实就是语法糖，负责监听用户的输入事件以更新数据
<div id="app">
<div id='example-3'>
<!-- 多行文本 -->
<span>多行显示：</span>
<p style="white-space: pre-line;">{{ msg }}</p>
<textarea v-model="msg" placeholder="多行添加"></textarea>
<br>
<!-- 多个复选框 -->
<input type="checkbox" id="jack" value="basketball" v-model="hobby">
<label for="jack">篮球</label> <input type="checkbox" id="john" value="football" v-model="hobby">
<label for="john">足球</label> <input type="checkbox" id="mike" value="doublecolorball" v-model="hobby">
<label for="mike">双色球</label>
<br>
<span>我的爱好: {{ hobby }}</span> <!-- 单选按钮 -->
<br>
<input type="radio" value="one" v-model="picked">
<label for="one">one</label>
<input type="radio" value="two" v-model="picked">
<label for="two">two</label>
<br>
<span>选中：{{picked}}</span>
<!-- 选择框 -->
<br>
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
hobby:[],
picked:'',
selected:''
}
})
效果：
这里还有更多实例，详见vue语法教程官网
1.4小清单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小清单</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
/*c1下的首个span标签*/
.c1 > span:first-child{
color: red;
text-decoration: line-through;
}
</style>
<div class="container">
<div class="row">
<div id="app" class="col-md-6 col-md-offset-3" style="margin-top: 100px">
<div class="panel panel-danger">
<!-- 标题 -->
<div class="panel panel-heading">
<h3 class="panel-title">小清单</h3>
</div>
<!-- 输入框 -->
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="Amount"
v-model= "newlis.title"
>
<span class="input-group-btn">
<!-- button按钮绑定属性 -->
<button
class="btn btn-default"
type="button"
v-on:click="add"
>
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<hr>
<!-- 列表栏 -->
<div class="list-group">
<!-- 内容主题框架 -->
<div class="list-group-item"
v-for="(item,index) in nextList"
v-bind:class="{c1:item.ok}"
>
<!-- 打钩 -->
<span class="glyphicon glyphicon-ok-sign"
v-on:click="changecolor(index)"
> {{ item.title }}</span> <!-- 叉按钮 -->
<span class="glyphicon glyphicon-remove pull-right"
v-on:click="remove(index)"
></span>
</div>
</div>
</div> </div> </div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
nextList:[],
newlis:{
title:'',
ok:false
}
},
methods:{
// 添加内容到列表，将this.newlis进行深拷贝传到nextList
add:function(){
var obj = Object.assign({}, this.newlis);
this.nextList.push(obj);
// 每次输入提交后，输入栏清零
this.newlis.title=''
},
// 点击钩，替换颜色
changecolor:function(index){
this.nextList[index].ok = !this.nextList[index].ok
}, // 点击叉，触发删除事件
remove:function(index){
this.nextList.splice(index,1)
}
}
});
</script>
</html>
效果：
2.上述总结
1. Vue使用
1. 生成Vue实例和DOM中元素绑定
2. app.$el --> 取出该vue实例绑定的DOM标签
3. app.$data --> 取出该vue实例绑定的data属性
2. 模板语法
1. {{name}} --> 在标签中间引用data属性中的变量
2. v-html='msg' --> 在页面上显示我定义的标签元素 3. v-if='ok' --> 控制标签在不在DOM中
4. v-show='!ok' --> 控制标签的display属性的值（是否显示） 5. v-bind:href='url' --> 将标签的属性和vue实例的data属性绑定起来
6. v-on:click='dianwo'--> 给标签绑定一个点击事件，方法需要在vue实例的methods中定义 7. v-model='article' --> 用在input标签和textarea标签中，将用户输入和vue实例中的数据属性建立双向绑定 3. 计算属性和侦听器
1. 计算属性
（字符串翻转的例子）
1. 计算属性需要定义在vue实例的 computed 中
2. 多用于对变量做一些自定义的操作
3. 我们在页面上像使用普通data属性一样使用计算属性
2. 侦听器
多用于一些复杂的运算或者异步操作
侦听器需要放在 vue实例的 watch 中
4. class和style属性
1. 基于对象的绑定
2. 基于数组的绑定
5. 条件渲染
v-if
如果想控制多个标签的显示与否，可以使用 template 标签把它们包起来
v-if/v-else
v-if/v-else if /v-else
3.生命周期钩子函数
这和在django中学的钩子函数定义一样，都是为了给在不同阶段能够添加自己的代码的机会
示意图：
# 红色框内的即为钩子
详细解释：点击这里
Vue的生命周期，就是从Vue实例被创建开始到实例销毁时的过程，整个过程主要可以分为八个阶段分别是：
- 创建前（beforeCreate）
- 已创建（created）
- 编译前（beforeMount）
- 编译后（mounted）
- 更新前（beforeUpdate）
- 更新后（update）
- 销毁前（beforeDestroy）
- 销毁后（destroyed）
vue进阶语法及生命周期函数的更多相关文章
- Vue定义组件和生命周期函数及实例演示！
定义全局组件 Vue.component("name",{...}) 定义局部组件 let Com = {....} new Vue({ data : ..., ..., comp ...
- Vue的11个生命周期函数的用法
实例的生命周期函数(官方11个):beforeCreate:在实例部分(事件/生命周期)初始化完成之后调用.created:在完成外部的注入/双向的绑定等的初始化之后调用.beforeMount:在页 ...
- Vue之生命周期函数和钩子函数详解
在学习vue几天后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的.因为我们有时候会在几个钩子函 ...
- vue实例的生命周期函数
Vue的生命周期函数通常分为以下三类: ①实例创建时的生命周期函数:②实例执行时的生命周期的函数:③实例销毁时的生命周期的函数. 代码与注释详解: <!DOCTYPE html> < ...
- vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- vue之生命周期函数例子
执行代码看生命周期函数的执行顺序 <!-- 根组件 --> <!-- vue的模板内,所有内容要被一个根节点包含起来 App.vue --> <template> ...
- Vue 组件以及生命周期函数
组件相当于母版的功能 新建.vue文件,手动完善 <template><div>根节点</div></template> <script>& ...
- Vue生命周期函数详解
vue实例的生命周期 1 什么是生命周期(每个实例的一辈子) 概念:每一个Vue实例创建.运行.销毁的过程,就是生命周期:在实例的生命周期中,总是伴随着各种事件,这些事件就是生命周期函数: 生命周期: ...
- Vue生命周期函数
生命周期函数: 组件挂载,以及组件更新,组建销毁的时候出发的一系列方法. beforeCreate:实例创建之前 created:实例创建完成 beforeMount:模板编译之前 mounted:模 ...
随机推荐
- Django（5） session登录注销、csrf及中间件自定义、django Form表单验证（非常好用）
一.Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认) 缓存 文件 缓存+数据库 加密cookie 1.数据库Session 1 2 3 4 5 ...
- 《C#高效编程》读书笔记02-用运行时常量(readonly)而不是编译期常量(const)
C#有两种类型的常量:编译期常量和运行时常量.两者有截然不同的行为,使用不当的话,会造成性能问题,如果没法确定,则使用慢点,但能保证正确的运行时常量. 运行时常量使用readonly关键字声明,编译期 ...
- Windows server 搭建ftp服务器
1.安装ftp 2.端口端口21和20的入出端口 3.点击IIS 服务器证书 4.FTP界面上选择“FTP身份验证”——>“基本身份验证”–>”启用” 5.FTP界面选择 “FTP授权规则 ...
- Redis简介及持久化
Redis是一个key-value数据库,他不仅性能强劲,而且还具有复制特性以及为解决问题而生的独一无二的数据模型.可用于缓存.消息队列.发布.订阅消息.商品列表和评论列表等场景.Redis提供了5种 ...
- 又到圣诞节，让你的网页下起雪(js特效)
又到圣诞节,让你的网页下起雪(js特效) 在4年多前,我写过一个特效,就是让你的网页下起雨,它的效果就是在你打开的网站,雨点下满你的屏幕,恩,大概效果如下图: 当然这个效果还有一些附带项,比如风速.风 ...
- matlab 中“newff” 函数的参数设置
matlab 中"newff" 函数的使用方法技巧|和各参数的意义 先来一个简单的源程序让大家练习一下: % Here input P and targets T define a ...
- Android应用开发基础之一：数据存储和界面展现（一）
Android项目的目录结构 Activity:应用被打开时显示的界面 src:项目代码 R.java:项目中所有资源文件的资源id Android.jar:Android的jar包,导入此包方可使用 ...
- 避免Autoclose和Autoshrink选项
避免Autoclose和Autoshrink选项发布日期:2001年12月18日 问题:我在Microsoft SQL Server 2000资源工具包中读到了一个用于就应当避免使用的选项对所有数据库 ...
- 基于 Azure 托管磁盘配置高可用共享文件系统
背景介绍 在当下,共享这个概念融入到了人们的生活中,共享单车,共享宝马,共享床铺等等.其实在 IT 界,共享这个概念很早就出现了,通过 SMB 协议的 Windows 共享目录,NFS 协议的网络文件 ...
- apache-实战（二）
Apache 虚拟主机 --用apache或nginx就可以做 一台服务器跑多台web服务 VPS virtual private server 虚拟专用服务器 --使用虚拟化技术来做 云服务器 虚拟 ...