Vue的基本使用(三)
2024-09-01 02:47:46
1.过滤器
1.局部过滤器,在当前组件内部使用过滤器,给某些数据添油加醋.
//声明
filters:{
"过滤器的名字":function(val,a,b){
//a就是alex,val就是当前的数据
}
} //使用 管道符|
数据 | 过滤器的名字("alex","wusir")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<body>
<div id="app">
<App/>
</div> <script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/moment.js"></script>
<script>
let App = {
data() {
return {
msg: "hello world",
time: new Date()
}
},
template: `
<div>我是一个APP {{ msg | myReverse }}
<h2>{{ time | myTime("YYYY-MM-DD") }}</h2>
</div>
`,
filters: {
myReverse: function (val) {
return val.split("").reverse().join("")
},
myTime: function (val, formatStr) {
return moment(val).format(formatStr);
}
}
}; new Vue({
el: "#app",
data() {
return {}
},
components: {
App
}
})
</script>
</body>
</html>
2.全局过滤器,只要过滤器一创建,在任何组建中都能使用
Vue.filter("过滤器的名字",function(val,a,b){})
在各个组建中都能使用
数据 | 顾虑器的名字("alex","wusir")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<div id="app">
<App/>
</div>
<script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/moment.js"></script>
<script>
Vue.filter("myTime", function (val, formatStr) {
return moment(val).format(formatStr)
}); let App = {
data() {
return {
msg: "hello world",
time: new Date()
}
},
template: `
<div>我是一个APP {{ msg | myReverse }}
<h2>{{ time | myTime("YYYY-MM-DD") }}</h2>
</div>
`,
filters: {
myReverse: function (val) {
return val.split("").reverse().join("")
}
}
}; new Vue({
el: "#app",
data() {
return {}
},
components: {
App
}
})
</script>
</body>
</html>
2.生命周期的钩子函数
beforeCreate():组件创建之前
created():组件创建之后
beforeMount():装载数据到DOM之前会被调用
mounted():装载数据到DOM之后会调用,可以获取到真实存在的DOM元素
beforeUpdate():在更新之前,调用此钩子,应用:获取原始的DOM
updated():在更新之后,调用此钩子,应用:获取最新的DOM
beforeDestroy():组件销毁之前
destroyed():组件销毁之后,如果开了定时器,一定要关闭定时器
acticated():组件被激活
deactivated():组件被停用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3</title>
</head>
<body>
<div id="app">
<App/>
</div>
<script src="../vue/dist/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() {
//组件创建之后
console.log("组件创建之后", this.msg);
},
beforeMount() {
//装载数据到DOM之前会调用
console.log(document.getElementById("app"));
},
mounted() {
//装载数据到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("beforeDestory");
},
destroyed() {
//定时器的销毁要在此方法中处理
console.log("destroyed", this.msg);
},
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>
3. vue-router的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/vue-router.js"></script>
<script>
//如果以后是模块化编程,Vue.proptotype.$VueRouter = VueRouter
// Vue.use(VueRouter)
const Home = {
data() {
return {}
},
template: `<div>我是首页</div>`
}; const Course = {
data() {
return {}
},
template: `<div>我是免费课程</div>`
}; //创建路由
const router = new VueRouter({
//定义路由规则
mode: "history",
routes: [
{
path: "/",
redirect: "/home"
},
{
path: "/home",
component: Home
},
{
path: "/course",
component: Course
}
]
}); let App = {
data() {
return {}
},
//router-link和router-view是vue-router提供的两个全局组件
//router-view是路由组件的出口
template: `
<div>
<div class="header">
<router-link to="/home">首页</router-link>
<router-link to="/course">免费课程</router-link>
</div> <router-view></router-view>
</div>
`
}; new Vue({
el: "#app",
//挂载 路由对象
router,
data() {
return {}
},
template: `<App />`,
components: {
App
}
}) </script>
</body>
</html>
4.命名路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5</title>
</head>
<body>
<div id="app"></div>
<script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/vue-router.js"></script>
<script>
//如果以后是模块化编程,Vue.proptotype.$VueRouter = VueRouter
// Vue.use(VueRouter)
const Home = {
data() {
return {}
},
template: `<div>我是首页</div>`
}; const Course = {
data() {
return {categoryList:[]}
},
template: `<div>
<span v-for = "(item,index) in categoryList">{{ item.name }}</span>
</div>`,
methods:{
getCategoryList(){ }
},
created(){
//ajax发送请求,数据获取
this.getCategoryList();
}
}; //创建路由
const router = new VueRouter({
//定义路由规则
mode: "history",
routes: [
{
path: "/",
redirect: "/home"
},
{
path: "/home",
name:"Home",
component: Home
},
{
path: "/course",
name:"Course",
component: Course
}
]
}); let App = {
data() {
return {}
},
//router-link和router-view是vue-router提供的两个全局组件
//router-view是路由组件的出口
//router-link默认会被渲染成a标签,to属性默认被渲染成href
template: `
<div>
<div class="header">
<router-link to="/home">首页</router-link>
<router-link to="/course">免费课程</router-link>
</div> <router-view></router-view>
</div>
`
}; new Vue({
el: "#app",
//挂载 路由对象
router,
data() {
return {}
},
template: `<App />`,
components: {
App
}
}) </script>
</body>
</html>
5.动态路由匹配
$route 路由信息对象
$router 路由对象VueRouter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7</title>
</head>
<body>
<div id="app"></div>
<script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/vue-router.js"></script>
<script>
//路由范式:
//http://127.0.0.1:8000/index/user
//http://127.0.0.1:8000/user/1
//http://127.0.0.1:8000/user/2
//http://127.0.0.1:8000/user?user_id=1 const User = {
data() {
return {
user_id: null
}
},
template: `<div>我是用户{{ user_id }}</div>`,
created() {
console.log(this.$route);//路由信息对象
//当使用路由参数时,例如从/user/foo导航到/user/bar,原来的组件实例会被复用.
//因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效.
//不过,这也意味着组件的生命周期钩子不会再被调用.
},
watch: {
"$route"(to, from) {
//对路由变化做出响应.
console.log(to.params.id);
console.log(from);
this.user_id = to.params.id;
//发送ajax
}
}
}; //创建路由
const router = new VueRouter({
routes: [
{
path: "/user/:id",
name: "User",
component: User
}
]
}); let App = {
data() {
return {}
},
template: `
<div>
<div class="header">
<router-link :to = "{ name:'User',params:{id:1} }">用户1</router-link>
<router-link :to = "{ name:'User',params:{id:2} }">用户2</router-link>
</div>
<router-view></router-view>
</div>
`
}; new Vue({
el: "#app",
router,
data() {
return {}
},
template: `<App />`,
components: {
App
}
}) </script>
</body>
</html>
6.编程式导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8</title>
</head>
<body>
<div id="app"> </div>
<script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/vue-router.js"></script>
<script> const Home = {
data() {
return {}
},
template: `<div>我是首页</div>`
}; const User = {
data() {
return {
user_id: null
}
},
template: `<div>
我是用户{{ user_id }}
<button @click = "clickHandler">跳转首页</button>
</div>`,
created() {
console.log(this.$route);
},
methods: {
clickHandler() {
this.$router.push({
name: "Home"
})
}
},
watch: {
"$route"(to, from) {
console.log(to.params.id);
console.log(from);
this.user_id = to.params.id;
//发送ajax
}
}
}; //创建路由
const router = new VueRouter({
//定义路由规则
routes: [
{
path: "/user/:id",
name: "User",
component: User
},
{
path: "/home",
name: "Home",
component: Home
}
]
}); let App = {
data() {
return {}
},
template: `
<div>
<div class="header">
<router-link :to = "{name:'User',params:{id:1}}">用户1</router-link>
<router-link :to = "{name:'User',params:{id:2}}">用户2</router-link>
</div>
<router-view></router-view>
</div>`
}; new Vue({
el: "#app",
router,
data() {
return {}
},
template: `<App />`,
components: {
App
}
})
</script>
</body>
</html>
最新文章
- Oracle使用SQL传输表空间
- 【译】Spring 4 Hello World例子
- BZOJ1798: [Ahoi2009]Seq 维护序列seq
- Javascript 去掉字符串前后空格的五种方法
- 高可用工具keepalived学习笔记
- git(icode)分支及发布管理方式
- hibernate 实体关系映射笔记
- 怎么加 一个 hyperlink 到 e-mail template for CRM
- Javascript 备忘
- Docker中的一些命令
- linux oracle 设置随系统自动启动数据库实例和监听
- RDLC添加链接
- 模拟post请求(PHP)
- spring Annotation 组分注塑
- Android App 压力测试 monkeyrunner
- [转]nodejs使用request发送http请求
- 并发容器学习—ConcurrentSkipListMap与ConcurrentSkipListSet 原
- 用foobar进行码率转换 适用与sacd-r转成低码率
- pandas DataFrame(5)-合并DataFrame与Series
- ipc基础