<div class="app" >
{{msg}}
</div>
<script src="vue.js"></script>
<script type="text/javascript">
window.onload = function(){
new Vue({
el:".app",
data:{
msg:"HelloWord!"
}
});
}
</script>
<div class="app" >
<input type="button" value="点我" @click="print($event)">
</div>
<script src="vue.js"></script>
<script type="text/javascript">
window.onload = function(){
let vm = new Vue({
el:".app",
data:{
msg:"HelloWord!"
},
methods:{
// print:function(event){
// console.log(event.target.value);
// }
// 或者:如下结果一样的
print(event){
console.log(event.target.value);
}
}
});
}
</script>
{{data | filter(参数) | filter(参数)}}
const axios = require('axios');
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
// Send a POST request
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// GET request for remote image
axios({
method: 'get',
url: 'http://bit.ly/2mTM3nY',
responseType: 'stream'
})
.then(function (response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
// Send a GET request (default method)
axios('/user/12345');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期学习</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</html>
el: '#app',
vm.$mount(el) //这个el参数就是挂在的dom接点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期学习</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<!--html中修改的-->
<h1>{{message + '这是在outer HTML中的'}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
template: "<h1>{{message +'这是在template中的'}}</h1>", //在vue配置项中修改的
data: {
message: 'Vue的生命周期'
}
</script>
</html>
new Vue({
el: '#app',
render: function(createElement) {
return createElement('h1', 'this is createElement')
}
})
vm.message = '触发组件更新'
beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。 destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
# created
数据data已经初始化完成,方法也已经可以调用,但是DOM未渲染。有人问了,请求都是异步的,并不会阻碍实例加载。这是我个人水平的问题,这边改正,在这个周期里面,请求因为是异步的,不会阻碍实例加载,除非是那些同步操走才会导致页面空白。这样说来,在这个周期里面进行请求,渲染速度反而会更快。
# beforeMount
DOM未完成挂载,数据也初始化完成,但是数据的双向绑定还是显示{{}},这是因为Vue采用了Virtual DOM(虚拟Dom)技术。先占住了一个坑。
# mounted
数据和DOM都完成挂载,在上一个周期占位的数据把值给渲染进去。可以在这边请求,不过created请求会更好一些。这个周期适合执行初始化需要操作DOM的方法。
# beforeUpdate
只要是页面数据改变了都会触发,数据更新之前,页面数据还是原来的数据,当你请求赋值一个数据的时候会执行这个周期,如果没有数据改变不执行。
# updated
只要是页面数据改变了都会触发,数据更新完毕,页面的数据是更新完成的。beforeUpdate和updated要谨慎使用,因为页面更新数据的时候都会触发,在这里操作数据很影响性能和容易死循环。
# beforeDestroy
这个周期是在组件销毁之前执行,在我项目开发中,觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行,只不过beforeDestroy无法阻止路由跳转,但是可以做一些路由离开的时候操作,因为这个周期里面还可以使用data和method。比如一个倒计时组件,如果在路由跳转的时候没有清除,这个定时器还是在的,这时候就可以在这个里面清除计时器。
# Destroyed
说实在的,我还真的不知道这个周期跟beforeDestroy有什么区别,我在这个周期里面调用data的数据和methods的方法都能调用,所以我会觉得跟beforeDestroy是一样的。
# 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
# 注册 (指令函数)
Vue.directive('my-directive', function () {
// 这里将会被 `bind` 和 `update` 调用
})
# getter,返回已注册的指令
var myDirective = Vue.directive('my-directive')
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
# 然后你可以在模板中任何元素上使用新的 v-focus 属性,如下:
<input v-focus>
<transition>
# 需要执行动画的元素
</transtion>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-3',
data: {
show: true
}
})
<transition-group>
<p :key="1"></p>
<p :key="2"></p>
</transition-group>
<div id="app"></div>
<script>
# 使用Vue.extend()创建组件构造器
Vue.extend({
template:"<h2>Hello Word</h2>"
});
# 使用Vue.component()根据传入的组件名和组件构造器来创建组件。
Vue.component("hello","myComponent");
new Vue({
el:"#app"
});
</script>
Vue.component("test",{
template:"<h3>try</h3>"
});
Vue.component("my-hello",{
template: "<h4>Hello Word!</h4>" ;
data:function(){
return:{
name:"alice",
age:12,
//ande other data ....
}
}
});
new Vue({
el:"#app"
});
new Vue({
el:"#app",
components:{
"my-components-name":{
template:"<p>111</p>",
data(){
return{
age:11,
...
}
}
},
}
});
<body>
<div class="app">
<my-hello></my-hello>
</div>
<template id="wbs">
<div>
<h3>{{msg}}</h3>
<ul>
<li v-for="v in arr">
{{v}}
<li>
</ul>
</div>
</template>
<script>
var vm = new Vue({
el:".app",
components:{
"my-hello":{
name:"wbs12344",//指定组件的名称,若没加name,默认是标签名
template:"#wbs",
data(){
return{
msg:"welcome",
arr:[1,2,3,4],
}
}
}
}
});
</script>
</body>
<body>
<div class="app">
<button @click="flag='my-name'">显示name组件</button>
<button @click="flag='my-age'">显示age组件</button>
<div>
<component :is="flag"></component>
</div>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:".app",
data:{
flag:"",
},
components:{
"my-name":{
template:"<h1>这是my-name组件,x为{{x}}</h1>",
data:function(){
return{
x:Math.random()
}
}
},
"my-age":{
template:"<h3>这是my-age组件,y为{{y}}</h3>",
data(){
return{
y:Math.random()
}
}
}
}
});
</script>
</body>
<body>
<div class="app">
<button @click="flag='my-name'">显示name组件</button>
<button @click="flag='my-age'">显示age组件</button>
<div>
<keep-alive>
<component :is="flag"></component>
</keep-alive>
</div>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:".app",
data:{
flag:"",
},
components:{
"my-name":{
template:"<h1>这是my-name组件<br>{{x}}</h1>",
data:function(){
return{
x:Math.random()
}
}
},
"my-age":{
template:"<h3>这是my-age组件<br>{{y}}</h3>",
data(){
return{
y:Math.random()
}
}
}
}
});
</script>
</body>
Vue.component('my-component', {
props: {
# 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
# 多个可能的类型
propB: [String, Number],
# 必填的字符串
propC: {
type: String,
required: true
},
# 带有默认值的数字
propD: {
type: Number,
default: 100
},
# 带有默认值的对象
propE: {
type: Object,
# 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
# 自定义验证函数
propF: {
validator: function (value) {
# 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
var Event = new Vue();
Event.$emit(事件名,数据);
Event.$on(事件,data=>{})
<body>
<div class="app">
<demo-component>这里有内容,那么slot里面显示的就是这个。</demo-component>
</div>
<template id="demo">
<div>
<h1>This is a demo</h1>
<slot>如果没有内容,显示这个!</slot>
</div>
</template>
<script src="vue.js"></script>
<script type="text/javascript">
var vm =new Vue({
el:".app",
components:{
"demo-component":{
template:"#demo",
}
}
});
</script>
</body>
持续更新中哦,关注不迷路哈!!!