Vue生命周期
初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
钩子函数
- beforeCreated:该函数是在VUE实例化时调用。
- created:创建实例之后进行调用。
- beforeMount:页面加载完成,没有渲染。例如:是{{name}}
- mounted:
1.与JS中的Window.οnlοad=function({.,.}),Jquery中的$(document).ready(function(){…})
2.在dom文档渲染完毕之后将要执行的函数,此时页面中的{{name}}已经被渲染完成。 - beforeDestroy:该函数将在销毁实例前进行调用。
- destroyed:改函数将在销毁实例时进行掉调用。
- beforeUpdate:组件更新之前
- updated:组件更新之后
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="num"/>
<h2>简单学习一门前端语言,这门语言叫做{{name}}</h2>
<h3>我需要学习更多的语言,与时俱进</h3>
<h4>{{num}}加油</h4>
<!--如果num 没有在data中初始化那么num将无法新增-->
<button v-on:click="add">点我Add方法</button>
<button v-on:click="num++">点我</button>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const demo = new Vue({
el: "#app",
beforeCreate: function () {
// 首先进入
this.num = 1;
},
data: {
// 第二步
name: "VUE",
num: 2
},
created() {
// 第三步
this.num = 100;
},
beforeMount() {
// 第四步
this.num = 101;
},
methods: {
add: function () {
this.num++;
}
}
});
</script>
</html>
指令
指令 (Directives) 是带有 v-
前缀的特殊特性。指令特性的预期值是:单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
例如我们在入门案例中的v-on,代表绑定事件。
插值表达式
花括号
格式:
{{表达式}}
说明:
- 该表达式支持JS语法,可以调用js内置函数(必须有返回值)。
- 表达式必须有返回结果,例如1+1,没有结果的表达式不允许使用,如:var a= 1+1;
- 可以直接获取VUE实例中定义的数据或函数
例:
HTML
html <div id="app">{{name}}</div>
JS:
js var app = new Vue({ el:"#app", data:{ name:"Jack" } })
v-text和v-html
使用v-text 和 v-html 指令来替代{{}}
说明:
- v-text:将数据输出到元素内部,如果输出的数据有html代码,会作为普通文本输出
- v-html:将数据输出到元素内部,如果输出的数据html代码,会被渲染。
HTML
<div id="app">
v-text:<span v-text="hello"></span><br/>
v-html:<span v-html="hello"></span>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hello:"<h1>加油中国!加油世界!</h1>"
}
})
</script>
这样动态插值就不会出现闪烁的状态,但没有值时只会是空白页面
v-model
v-text,v-html均为单向绑定,数据影响了视图渲染,但反过来就不行。
v-model是双向绑定,视图(View)和模型(Model)相互影响。双向绑定在视图中可以修改数据,这样限定了视图元素类型。
v-model可使用元素:
- input
- select
- textarea
- checkbox
- radio
- components(Vue中的自定义组件)
html
<div id="app">
<input type="checkbox" v-model="language" value="java">Java</input>
<input type="checkbox" v-model="language" value="PHP">PHP</input>
<input type="checkbox" v-model="language" value="Python">Python</input>
你选择了:{{language}}</br>
你选择了:{{language.join(",")}}</br>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data":{
language:[],
}
});
</script>
</div>
v-on基本用法
v-on指令用于给页面元素绑定事件
v-on:事件名称 ="JS片段或函数名称"
vue中v-on支持的事件总结
示例:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="add">点击Add增加1个Num</button>
<button @click="minus">点击minus 减1个Num</button>
<h1>
现在有{{num}}个粉丝
</h1>
<span v-text="h_num"></span>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
num: 1,
el:"#app",
beforeCreate:{
},
data:{
num:1,
h_num: "现在有"+this.num+"个粉丝",
},
methods:{
add:function(){
this.num++;
},
minus:function(){
this.num--;
}
}
});
</script>
</body>
</html>
绑定事件可以简写:例如:v-on:click 可以写成@click。
事件修饰符
在事件处理程序中调用event.preventDefault()
或event.stopPropagation()
是非常常见的需求。
Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示。
.stop
:阻止事件冒泡到父元素。.prevent
:阻止默认事件发生*.capture
:使用事件捕获模式.self
:只有元素自身触发事件才执行。(冒泡或捕获的都不执行).once
:只执行一次
实例:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:contextmenu.prevent="num++">add</button>
<button @contextmenu="decrement($event)">mins</button>
<h2>新增{{num}}粉丝</h2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
decrement(ev) {
this.num--;
}
}
});
</script>
</body>
</html>
v-on:contextmenu.prevent:鼠标右键点击事件,取消下图窗口
@contextmenu:上图窗口依旧存在。
按键修饰符
监听键盘事件,Vue允许为v-on
在监听键盘事件时添加按键修饰符。
<input v-on:keyup.13="submit"/>
<input @keyup.enter="submit"/>
全部按键别名:
.enter*
.tab
.delete
(捕获“删除”和"退格“键).esc
.space
.up
.down
.left
.right
组合按钮
.ctrl
.alt
.shift
例如:
<input @keyup.alt.67="clear"/>
<div @click.ctrl="doSomething">Do something</div>
v-for
遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。
语法:
````v-for="item in items``
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VFOR</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
<ul>
<li v-for="(user,index) in users">
{{(index+1) }}- {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el:"#app",
data: {
users: [
{name:"王大",gender:"男",age:12},
{name:"王大拿",gender:"男",age:32},
{name:"小姑",gender:"女",age:8},
]
}
});
</script>
</body>
</html>
v-if和v-show
基本使用
v-if:条件判断。但结果为true时,所在的元素才会被渲染。
v-if="布尔表达式"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VFOR</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user,index) in users" v-if="user.flag">
{{(index+1) }}- {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
<ul>
<!--v-show="!user.flag" = true-->
<li v-for="(user,index) in users" v-show="!user.flag">
{{(index+1) }}- {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el:"#app",
data: {
users: [
{name:"王大",gender:"男",age:12,flag:true},
{name:"王大拿",gender:"男",age:32,flag: false},
{name:"小姑",gender:"女",age:8,flag:false},
]
}
});
</script>
</body>
</html>
v-else
你可以使用v-else
指令来表示v-if
的“else”块:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VFOR</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user,index) in users">
<h6 v-if="user.age>10">
{{(index+1) }}- {{user.name}} - {{user.gender}} - {{user.age}}
</h6>
<h5 v-else>
{{(index+1) }}- {{user.name}} - {{user.gender}} - {{user.age}}
</h5>
</li>
</ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el:"#app",
data: {
users: [
{name:"王大",gender:"男",age:12,flag:true},
{name:"王大拿",gender:"男",age:32,flag: false},
{name:"小姑",gender:"女",age:8,flag:false},
]
}
});
</script>
</body>
</html>
v-bind
html属性不能使用双大括号形式绑定,只能使用v-bind指令。
在将v-bind
用于class
和style
时,Vue.js做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>VBIND</title>
</head>
<body>
<div id="app">
<div v-bind:title="m_title" v-bind:style="m_style"/>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
m_title:"title1",
m_style:"border: 1px solid red; width: 50px; height: 50px;"
}
});
</script>
</body>
</html>
绑定多个样式
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>VBIND</title>
</head>
<body>
<div id="app">
<div v-bind:title="m_title" v-bind:style="[m_style,wh_style]"/>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
m_title:"title1",
m_style:{border: "1px solid red"},
wh_style:{width: "50px",height:"50px"}
}
});
</script>
</body>
</html>