常用的vue操作

只因为你温柔

已于 2022-12-13 17:38:01 修改

阅读量173

点赞数

分类专栏： # Vue 文章标签： vue 常用的操作

于 2019-07-17 20:45:23 首次发布

本文链接：https://blog.csdn.net/zsx1314lovezyf/article/details/96360227

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

过滤器/生命周期的钩子函数/模板语法{{}}/指令系统/Vue中的常用属性/Vue常用方法/Vue的过滤器/Vue的组件/组件的传值/Vue的全家桶( kfc ) vue+vue-router+vuex/使用vue-router/命名路由/动态路由匹配/编程式导航vs声明式导航

过滤器

1.局部过滤器在当前组件内部使用过滤器

给某些数据 添油加醋

// 声明
filters:{
  "过滤器的名字":function(val, a){
    	// a 就是 alex  val就是当前的数据
  }
}
// 只能在当前组件使用
//使用	管道符
数据 | 过滤器的名字(alex)

2.全局过滤器只要过滤器一创建, 在任何组件中都能使用

// 声明
Vue.filter("过滤器的名字", function(val, a){
  // a 就是 alex  val就是当前的数据
})
// 在各个组件中都能使用
// 使用  管道符
数据 | 过滤器的名字(alex)

生命周期的钩子函数

从生到死

beforeCreate
- 组件创建之前
created ***
- 组件创建完成
- 虚拟DOM React
- 发送ajax 获取数据实现数据驱动视图
beforeMount
- DOM挂在之前
mounted***
- DOM挂在之后
- 获取真实DOM
beforeUpdate
- 更新之前
updated
- 更新之后
activated
- 激活当前组件
deactivated
- keep-alive Vue提供的内置组件, 主要作用, 让组件产生缓存
- 停用当前主键
beforeDestroy
- 销毁之前
destroyed
- 销毁之后
- 如果开了定时器一定要在这个方法中结束定时器

Vue的基本用法

模板语法{{}} 关闭掉django中提供的模板语法{{}}

指令系统

v-text

v-html

v-bind和v-on

v-if和v-show

v-for

v-model 双向数据绑定

Vue中的常用属性

el:“”

data:function(){}

methods:{}

watch:{}

component:{}

template

Vue常用方法

钩子函数

Vue的过滤器

局部(filters来定义)和全局过滤器(filter来定义)

Vue的组件

全局组件

Vue.component("组件名", {
  
})

局部组件

声子挂子用子

组件的传智

父===>子

子===>父

平行组件传值

Vue的全家桶( kfc ) vue+vue-router+vuex

vue+vue-router 主要来做 SPA ( Single Page Application ) 单页面应用

vue-router 是vue的核心插件

为什么要使用单页面应用?

传统的路由跳转, 如果后端资源过多, 会导致页面出现 白屏现象, 让前端来做路由, 在某个声明周期的钩子函数

中发哦少年宫ajax, 数据驱动. 为了用户体验

使用vue-router

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>

<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>

    // 如果以后是模块化编程, Vue.proptotype.$VueRouter = VueRouter
    // Vue.use(VueRouter)

    // 路由范式:

    // http://127.0.0.1:8080/index/user
    // http://127.0.0.1:8080/user/1
    // http://127.0.0.1:8080/user/1
    // http://127.0.0.1:8080/user?user_id=1

    const User = {
        data(){
            return {
                user_id:""
            }
        },
        template:`
            <div>
                我是用户{{ user_id }}
            </div>
        `,
        created(){
            // 提醒一下，当使用路由参数时，例如从 /user/1 导航到 /user/2，
            // 原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，
            // 复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
            console.log(this.$route)
        },
        watch:{
            "$route" (to, from){
                console.log(to);
                console.log(from);
                this.user_id = to.params.id;
                // 发送ajax
            }
        }
    }

    const router = new VueRouter({
        // mode:"history",

        // 定义路由规则
        routes:[
            // 重定向
            {
                path:"/",
                redirect:"/user/:id"
            },
            {
                // :id动态匹配
                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>

命名路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>

<script src="vue.js"></script>
<script src="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",
                name: "Home",
                component:Home
            },
            {
                path: "/course",
                name: "Course",
                component:Course
            }
        ]
    })

    let App = {
        data(){
            return {

            }
        },
       // router-link  router-view是vue里面的内置组件router-link相当于a标签 to相当于href
       // router-view显示当前组件的内容
        template:`
            <div>
                <div class="header">
                    <router-link :to="{name:'Home'}">首页</router-link>
                    <router-link :to="{name:'Course'}">课程</router-link>
                </div>
                <router-view></router-view>
            </div>
        `
    }

    new Vue({
        el:"#app",
        // 挂在路由对象
        router,
        data(){
            return {

            }
        },
        template:`
            <App />
        `,
        components:{
            App
        }
    })

</script>
</body>
</html>

动态路由匹配

$route 路由信息对象

$router 路由对象 VueRouter

watch:{
    "$route" (to, from){
        console.log(to);
        console.log(from);
        this.user_id = to.params.id;
        // 发送ajax
    }
}

[外链图片转存失败(img-MU1uHWVG-1563367056970)(/Users/xiaoge/Downloads/assests/image-20190714162014310.png)]

编程式导航vs声明式导航

  <router-link :to="{name:'Home'}">首页</router-link>
  <router-link :to="{name:'Course'}">课程</router-link>

只因为你温柔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
常用的vue操作

过滤器/生命周期的钩子函数/模板语法{{}}/指令系统/Vue中的常用属性/Vue常用方法/Vue的过滤器/Vue的组件/组件的传值/Vue的全家桶( kfc ) vue+vue-router+vuex/使用vue-router/命名路由/动态路由匹配/编程式导航vs声明式导航过滤器 1.局部过滤器在当前组件内部使用过滤器给某些数据添油加醋// 声明filters:{ ...
复制链接

扫一扫