vue3
moment.js时间格式处理
更多使用方法在官网
··
过滤器的使用
局部过滤器
//1.注册局部过滤器 在组件对象中定义
//data同级别
filters:{ //任意值接收
'过滤器的名字':function(value){
}
}
//2.使用过滤器 使用管道符 |
{{price | '过滤器的名字'}}
//声明
filters:{ //任意值接收
'过滤器的名字':function(value,a，x){
}
}
使用 //当前alex就是函数接受的a （可以多传对号入座）
{{price | '过滤器的名字（alex，x）'}}
<script src="vue.min.js"></script>
全局过滤器
// 注册全局的过滤器
//第一个参数是过滤器的名字，第二个参数是执行的操作
Vue.filter('reverse',function(value) {
return value.split('').reverse().join('');
});
//使用跟 局部过滤器一样
{{price | '过滤器的名字'}}
{{price | '过滤器的名字（alex，x）'}}
生命周期的钩子函数
图
beforeCreate(){},组件创建之前
created(){},组件创建之后,created中可以操作数据，发送ajax
beforeMount(){}, 组件挂载之前,数据到DOM之前会调用
mounted(){},组件挂载之后,数据到DOM之后会调用 可以获取到真实存在的DOM元素，
beforeUpdate(){},组件在更新之前，调用此钩子，应用：获取原始的DOM
updated(){}, 组件在更新之后，调用此钩子，应用：获取最新的DOM
beforeDestroy(){} ,销毁之前
destroyed(){} , 销毁后 //注意： 定时器的销毁 要在此方法中处理
activated(){}， 内置的<keep-alive>（保存当前状态） 组件被激活时调用
deactivated(){} ，组件被移除时调用
详细参考下图:
代码示例
document.querySelector('#box').style.color = 'red'; 新接触 获取当前标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<App/>
</div>
<script src="vue.js"></script>
<script>
let Test = {
data() {
return {
msg: 'alex',
count:0,
timer:null
}
},
template: `
<div id="test">
<div id="box">{{ msg }}</div>
<p>{{ count }}</p>
<button @click = 'change'>修改</button>
</div>
`,
methods: {
change() {
this.msg = 'wusir';
document.querySelector('#box').style.color = 'red';
}
},
beforeCreate() {
// 组件创建之前
console.log('组件创建之前', this.msg);
},
created() {
// ********最重要
// 组件创建之后
// this.timer = setInterval(()=>{
// this.count++
// },1000);
// 使用该组件，就会触发以上的钩子函数，
// created中可以操作数据，发送ajax，并且可以实现数据驱动视图
// 应用：发送ajax请求
console.log('组件创建之后', this.msg);
// this.msg = '嘿嘿黑';
},
beforeMount() {
// 装载数据到DOM之前会调用
console.log(document.getElementById('app'));
},
mounted() {
// *******很重要*****
// 这个地方可以操作DOM
// 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM
console.log(document.getElementById('app'));
//jsDOM操作
},
beforeUpdate() {
// 在更新之前，调用此钩子，应用：获取原始的DOM
console.log(document.getElementById('app').innerHTML);
},
updated() {
// 在更新之后，调用此钩子，应用：获取最新的DOM
console.log(document.getElementById('app').innerHTML);
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
//注意： 定时器的销毁 要在此方法中处理
console.log('destroyed',this.timer);
clearInterval(this.timer);
},
activated(){
console.log('组件被激活了');
},
deactivated(){
console.log('组件被停用了');
}
}
let App = {
data() {
return {
isShow:true
}
},
template: `
<div>
<keep-alive>
<Test v-if="isShow"/>
</keep-alive>
<button @click = 'clickHandler'>改变test组件的生死</button>
</div>
`,
methods:{
clickHandler(){
this.isShow = !this.isShow;
}
},
components: {
Test
}
}
new Vue({
el: '#app',
data() {
return {}
},
components: {
App
}
})
</script>
</body>
</html>
生命周期钩子函数
小总结
Vue的基本语法
模板语法{{}} django可能会与之冲突 可以在关闭django模板语法
指令系统
v-text
v-html
v-show和v-if
v-bind和v-on
v-for
v-model 双向的数据绑定
Vue中常用的数据属性
data：function（）{}
el
methods
watch
computed
template
Vue的常用方法
钩子函数
Vue的过滤器
filters 局部
Vue.filter 全局
Vue的组件
Vue.componen('租件的名字'，{配置选项}) 全局组件
局部组件
声子 挂子 用子
组件的传值
子=》父 props
父=》子
平行组件传值
浙公网安备 33010602011771号