vue——基础

最新推荐文章于 2022-07-30 08:46:58 发布
最新推荐文章于 2022-07-30 08:46:58 发布
阅读量124 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42070179/article/details/102873636
版权

vue初学

1.基础

基础结构：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test1</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="run">
	<input type="button" @click="run" :value="msg">
</div>
  <script>
           var vue = new Vue({
             	el:'#run',
             	data:{},
                     methods:{},
                     filters:{},
                     directives:{},
                     component:{},
                     
                     beforeCreate(){},
                     created(){},
                     beforeMount(){},
                     monuted(){},
                     beforeUpdate(){},
                     updated(){},
                     beforeDestory(){},
                     destoryed(){}
             })
     </script>
  </script>
</body>
</html>

  • v-cloak：设置属性后可解决闪烁问题，且命名可自定义，注意若是下划线则会出问题

    如：v_cloak

    测试代码：

  • v-text：默认没有闪烁，但解析后会将属性值填写到标签中

    例如：<p v-text=“message”>123</p>显示时123会被覆盖

  • 使用插入值表达式：只替换表达式部分格式为{{data中的属性名}}

  • 绑定事件：v-on 简写 @

  • 绑定属性：v-bind 简写 ：

2. v-on修饰符

  • .stop 阻止事件冒泡
  • .prevent 阻止默认事件
  • .capture 添加事件侦听器时使用捕获机制
  • .self 只有事件在该元素本身触发事触发回调
  • .once 只触发一次

3. v-model双向绑定数据

  • model绑定元素仅限于表单元素

4.vue样式

4.1使用方式

  • 标签中直接使用:style=“写样式”
  • 标签中引用style=“样式写data中，此处调用即可”
  • 标签中使用数组style="[css1, css2, …]"引用多个对象

5.v-for

5.1迭代数据

  • 迭代数组
  • 迭代数据
  • 迭代对象

5.2v-for问题

  • 迭代数据时，会遍历对象数组，包括其ID，但遍历结束时会失去ID，dom中若对数据项进行操作很可能会出现问题

    解决方法：遍历时指定唯一可识别的KEY

6. v-if 和 v-show

  • 特点：

    v-if每次回重新删除创建元素

    v-show改变其显示方式

  • 消耗：

    v-if较高切换性能的消耗

    v-show较高的原始渲染的性能消耗

  • 应用：设计频繁切换，建议v-if； 元素对用户始终不可见，建议v-show

7.列表遍历动画渲染

  • 列表渲染：

    <!-- 添加appear会使得列表加载时产生入场效果 -->
<transition-group appear><kbd>此处添加要遍历的数据</kbd></transition-group>

<!-- 添加tag,渲染时会渲染为目标属性，默认是span -->
<transition-group appear tah="ul"><kbd>此处添加要遍历的数据</kbd></transition-group>

  • 列表渲染样式

    /*增加添加动画效果*/
.v-enter,
.v-leave-to{
    opacity: 0;
    transform: translateY(80px);
}
.v-enter-active,
.v-leave-active{
    transition: all 0.6s ease;
}

  • 优化数据项的移动效果

    /*元素位移时的渐变,与下面的 v-leave-actice配合使用*/
.v-move{
	transition: all 0.6s ease;
}
.v-leave-active{
	position: absolute;
}

8.动画显示

8.1自定义动画展示样式

基本属性：

v-enter：动画开始前
v-leave-to：动画结束后

v-enter-active：入场动画
v-leave-active：离场动画

  • 自定义显示样式

    /*移入*/
.v-enter,
.v-leave-to{
    opacity: 0;
    transform: translateX(150px);
}
/*v-enter-active：入场动画
v-leave-active：离场动画*/
/*淡出*/
.v-enter-active,
.v-leave-active{
    transition:all 0.4s ease;
}

  • 自定义绑定前缀（就是代码样式中的v）

    /*自定义前缀实现不同元素不同动画加载样式的绑定*/
<style>
	.my-enter,
    .my-leave-to{
    opacity: 0;
        transform: translateY(150px);
    }

    .my-enter-active,
    .my-leave-active{
        transition:all 0.4s ease;
    }
</style>
/*表单中锁定前缀*/
<transition name="my">
	<h1 v-if="flag1">123</h1>
</transition>

8.2调用第三方库

  • animate.css

  • 使用：

    <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutRight" :duration="800">
	<h1 v-if="flag">123</h1>
</transition>

8.3钩子函数使用

  • 页面使用

    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
    <div v-show="flag" class="ball"></div>
</transition>
//对应函数写自己的动画效果

9.组件

抽离代码，提高复用，与模块化不同的是组件化不倾向于代码逻辑而是页面部件

》》》template中有且仅有唯一的一个根元素

  • 示例：template:'

    第一个根元素

    第二个根元素
    ’是不合法的

9.1组件的创建

  • 方式1：vue.extend

    //定义组件：
var com = Vue.extend({
	template:'<h1>这是创建的组</h1>'
})
//绑定组件
Vue.component('my-com', com)

//简写以上方式
 Vue.component("my-com",Vue.extend({
     template:'<h1>这是创建的组</h1>'
 }))

  • 使用vue.component

    Vue.component('com2',{
	template:'<h2>组件创建方式2</h2>'
})

  • 外置模板引入

    //模板位置，vue绑定的元素块外部
<template id="tem">
    <div>
         <h1>外部模板</h1>
    </div>
</template>

//模板绑定
Vue.component('com3',{
	template:'#tem'
})

9.2组件使用

html代码的vue绑定区中直接使用你的组件名
例如：上面组件中的，my-com, com1, com3作为标签名即可

组件中可以有data,但data必须为function且返回对象
>>>好处,避免同名组件间元素相互影响

9.3组件间的切换

  • v-if和v-else实现不同组件的显示与否（两个组件）：简单应用，登录注册点击后切换公共区域

  • 使用component占位（多个组件）

    <component :is="comName"></component>

    切换方式

    <a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
//点击更改组件ID值为对应的组件名
<script>
	Vue.component('login',{
         template:'<h1>填写登录信息</h1>'
    })
    Vue.component('register',{
        template:'<h1>填写注册信息</h1>'
    })
</script>

    • //使用transition包裹component即可
<transition>
	<component :is="comName"></component>
</transition>

      //切换顺序
<transition mode="out-in"></transition>

9.5父子组件传值

9.5.1父组件—》子组件

子组件默认无法访问父组件的数据

  • 引用时传值：v-bind属性绑定给子组件，需要注意的是，父组件传递值时使用的变量需在子组件中props数组中定义

    //vue绑定域中传递值给子组件,同时变量名为parentmsg，值是msg
<div id="app">
	<com v-bind:parentmsg="msg"></com>
</div>

    //子组件中获取值,定义与父组件传值相同的变量名
//注意：props数组中定义的值一般不建议修改，可将变动数据写到data中
components:{
    com:{
        template:'<h1>子组件的模型，父组件传递的数据解析结果是：{{parentmsg}}</h1>',
        props:['parentmsg']
	}
}

9.6父子组件传递方法

  • 使用事件绑定机制， v-on，向子组件传递一个父组件的方法引用

  • 子组件中使用$emit触发父组件的方法执行

    //vue绑定的区域中，传递引用，方法引用名为：fun, 被引用方法是：show
<com1 v-on:fun="show"></com1>

    //vue操作区
var vue = new Vue({
    el: '#app',
    data: { },
    methods: {
        show(){
            alert('父组件方法执行了')
        }
    },
    components:{
        com1:{
            template:'<h1>子组件的模型1，等待父组件方法<input type="button" @click="click_func" value="点击触发方法"/></h1>',
            methods:{
                click_func(){
                    //调用click_func时会通过以下语句触发引用函数
                    //this代表当前组件，$emit触发操作，()中写触发的方法引用名
                    this.$emit('fun')
                }
            }
        }
    }
})

    传递方法同时传参

    //上面方法修改部分如下
//父组件方法
show(data){
    alert('父组件方法执行了'+data)
}
//子组件方法修改
click_func(){
    //调用click_func时会通过以下语句触发引用函数
    //this代表当前组件，$emit触发操作，()中写触发的方法引用名
    this.$emit('fun',999)
}

10获取组件元素

  • 标签设置属性ref=“XXX”，便可在vue中使用this.$refs.XXX.innerText获取其值
  • 组件设置ref=“XXX”，便可在vue中通过这个组件的引用操作组件data，调用组件方法

11.路由

  • 前端路由而言，单页面应用程序主要通过URL中的Hash实现不同页面的跳转，而HTTP请求中并不会包含Hash相关内容，这种通过Hash改变页面跳转的方式叫前端路由

11.1 v-router

  • 使用基础：配置对应的router.js包

  • 使用方式：

    1.创建routerObj对象

    // 登录组件模板对象
var login = ({
    template:'<h1>登录</h1>'
});
//注册模块组件
var register = ({
    template:'<h1>注册</h1>'
});

var routerObj = new VueRouter({
    //路由匹配规则
    //下面的route对象数组中，每个对象必有path和component属性
    //path:监听路径，component:路径匹配时显示的组件（代码中写组件模板对象，非组件引用）
    route:[
        {path:'/login',component:login},
        {path:'/register', component:register}
    ]
});

    2.将路由组件与Vue实例关联

    var vue = new Vue({
    el:'#app',
    data:{},
    methods:{

    },
    //注册vue组件
    router:routerObj
})

    3.实现组件切换

    //在vue接管区域
//传统跳转连接
<a href="#/login">登录</a>
<a href="#/register">注册</a>
//新跳转方式,router-link默认渲染a标签
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>

    4.设置页面默认组件

    {path:'/', redirect:'/login'},

11.2 高亮

  • 法1：

    //给router-link-active添加样式
<style>
    .router-link-active{
    }
</style>

  • 法2：

    //router构造方法中设置属性值
linkActiveClass:'mycss'

11.3 查询规则

  • 路由中传递参数作为查询规则，则不需要修改路由规则

    //下面的都匹配/login
<router-link to="/login?id=13">登录</router-link>
<router-link to="/login?id=10&name=lll">登录</router-link>

    //组件读出路径参数
//在解析路径时会将参数放置到route的query对象中，故此，我们调用其值的方法是:this.$route.query.id
template:'<h1>登录组件,组件中传递的参数是：{{$route.query.id}}'

  • 路由传参，路由模式匹配

    //模板对象
template: '<h1>登录组件2,组件中传递的参数是：{{$route.params.id}},组件本身的msg={{msg}}</h1>',

    <div id="app2">
    <router-link to="/login2/14">登录</router-link>
    <router-link to="/register2">注册</router-link>
    <transition mode="out-in">
        <router-view></router-view>
    </transition>
</div>

    routes: [
    { path: '/login2/:id', component: login2 },
    { path: '/register2', component: register2 }
],
//此处需要注意：我们的路由若是：/login/:id/:name,而实际路径是：/login/12则会匹配不到

11.4 路由嵌套

  • 方法：路由嵌套使用

    routes: [
    { 
        path: '/account',
        component: account,
        children:[
            {path:'login', component: login},
            {path:'register', component: register}
        ]
    }
],

  • 子组件嵌套

    //页面接管区域
<div id="app">
    <router-link to="/account">account</router-link>
    <router-view></router-view>
</div>
//组件模板
<template id="temp">
    <div>
        <h1>account组件</h1>
      	//路径从/开始  
        <router-link to="/account/login">登录组件</router-link>
        <router-link to="/account/register">注册组件</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="login">
    <div>
        <h1>登录组件</h1>
    </div>
</template>
<template id="register">
    <div>
        <h1>注册组件</h1>
    </div>
</template>

    //组件模板绑定到组件模板对象
//组件模板对象
var account = {
    template: '#temp'
}
var login = ({
    template: '#login'
})
var register = ({
    template: '#register'
})
//路由使用
var router = new VueRouter({
    routes: [
        {
            path: '/account',
            component: account,
            children: [
                //路径前不加 /
                { path: 'login', component: login },
                { path: 'register', component: register }
            ]
        }
    ],
    linkActiveClass: 'myactive'
})
//vue绑定路由
var vue = new Vue({
    el: '#app',
    data: {},
    methods: {},
    router: router
})

12 布局

  • 多个组件同时布局到一个页面分割整个区域

  • 引用：

    <div id="app">
    <router-view></router-view>
    <div class="container">
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>
    </div>
</div>

  • 路由:

    var router = new VueRouter({
    routes: [
        {
            path: '/',
            components: {
                'default': header,
                'left': left,
                'main': body

            }
        },
    ]
})

13 watch

13.1监听数据域的变化

可在其中编写数据变动时触发的方法

  • 代码示例：

    界面数据区域

    <div id="app">
    姓：
    <input type="text" v-model="firstName">
    名：
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
</div>

    watch监听区

    var vue = new Vue({
    el: '#app',
    data: {
        firstName:'',
        lastName:'',
        fullName:'',
    },
    methods: {
    },
    watch:{
        'firstName':function(newVal, oldVal){
            this.fullName = newVal + '-' + this.lastName
        },
        'lastName':function(newVal){
            this.fullName = this.firstName + '-' + newVal
        }
    }
})

13.2 监听路由变化

  • 代码示例：

    //veu中
watch:{
    '$route.path':function(newVal, oldVal){
        if(newVal === '/login'){
            console.log('欢迎来到登录界面！');
        }else if(newVal === '/register'){
            console.log('欢迎来到注册界面，请注册')
        }else{
            console.log('你的请求去找诗和远方了')
        }
    }
}

14 使用计算属性

计算属性本质是一个方法，但将方法名当属性用，使用属性时并不会作为调用方法

  • 代码示例：

    computed:{
    //计算属性本质是一个方法，但将方法名当属性用，使用属性时并不会作为调用方法
    'fullName':function(){
        return this.firstName + '-' + this.lastName
    }
}

  • 注意：

    • 方法属性引用时当普通属性即可
    • 计算属性的方法内部任何数据变化都会导致重新计算
    • 属性求值方法存在缓存中，数据不变化，计算不重置

15 render

可将绑定元素替换为设置的模板

  • reder中写函数，返回模板对象,这个方法会将vue控制区域的所有东西替换掉

    render:function(createElements){
    // createElements方法会将指定的模板对象渲染为html
    var html = createElements(login)
    return html
}

简单示例

ANG-X
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue生命周期中mounted和created的区别
xdnloveme的博客
09-19 40万+
一、什么是生命周期？ 用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨，但是也基本上可以理解。 通过一系列实践，现在把所有遇到的问题整理一遍，今天记录一下created和mounted的区别： 二、created和mounted区别？ 官方图解如下: 我们从图中看两个节点： created:在模板渲染成html前调用，即通常初始化
vue基础代码演示——temp.json
03-21
如果觉得百度云下载速度慢可以在此处下载，如果没有积分也可以直接私信博主直接给文件，所需积分只是给个鼓励，谢谢支持！！！
VUE的生命周期
C134609的博客
07-30 166
vue的生命周期函数：一共有八个分别是：创建前后，挂在前后，更新前后，销毁前后（顺序不能打乱）,分别对应：beforecreate,created,beforemonute,monuted,beforeupdate,updated,beforeDestory,destoryed
vue概略
weixin_42790916的博客
03-21 295
vue vue自定义事件 vue自定义事件可以通过创建一个文件 event 里面new一个vue的实例 然后 通过两个随便是什么组件(兄弟 或者隔的比较远)的mounted中调用 一个调用on 然后传递一个函数 但是要在 beforeDestroy生命周期中销毁这个绑定 要不然容易造成内存泄漏 在另一个组件中的mothod的方法中使用emit调用 父子组件生命周期顺序 cerated vue...
vue的生命周期简介
天心天地生的博客
11-07 175
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 使用vue框架，需要在合适的时机做合适的事情，了解了vue对象的生命周期和钩子函数，才能知道，哪些事情应该咋哪个函数里做。 Vue生命周期经历哪些阶段： 总...
vue--mounted
Efficiency9的博客
06-04 6万+
1.钩子函数 钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。（百度百科）2.相对于前端来讲 对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。3.vue中的mount
vue面试——2021最全面的vue基础面试题.pdf
12-14
Vue面试2021最全面的Vue基础面试题.pdf 本资源提供了Vue基础知识点的面试题，涵盖了Vue的基本原理、双向数据绑定的原理、MVVM、MVC、MVP等软件架构设计模式的区别等知识点。 1. Vue的基本原理 Vue实例创建时，Vue...
Vue 3.0 基础框架
03-23
虽然Vue 3.0发布，Element UI也推出了与Vue 3兼容的版本——Element Plus，它不仅保留了Element UI原有的优秀设计，还新增了许多组件和功能，并优化了性能。 Echarts 是一个由百度开发的开源可视化库，支持丰富的...
Vue购物车——组件化.rar
05-01
总结，"Vue购物车——组件化"案例展示了Vue如何利用组件化思想构建一个购物车功能，涵盖了组件注册、父子组件间通信和数据单向绑定的关键知识点，这些是理解和掌握Vue.js框架的基础。通过学习和实践这个案例，开发者...
vue-demo——脚手架.zip
12-02
在实际开发中，`vue-demo`可能已经包含了基础的路由配置、登录注册组件、状态管理示例等，让开发者对Vue的实践有更深入的理解。通过学习和修改这个脚手架项目，可以迅速掌握Vue的开发流程，并以此为基础构建自己的...
彻底理解vue的钩子函数，vue的生命周期理解，什么是vue的生命周期，钩子函数
jiang7701037的博客
10-17 2万+
官方图（官方的图大家总是理解不了）： 使用vue框架，需要在合适的时机做合适的事情，了解了vue对象的生命周期和钩子函数，才能知道，哪些事情应该咋哪个函数里做。 一、vue的生命周期的理解 生命周期 用人举例说明： 生命周期就是一个人的一生，此处我需要说的没有人情一点（哈哈）。 从人的出生，到成长，到工作，到死亡，就是人的一生，也叫一个人的生命周期。 2....
vue的生命周期
汉堡请不要欺负面条
07-04 3万+
一.概念了解 1.什么是生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直...
Vue实例中生命周期created和mounted的区别(具体细节分析)。
qq_34246965的博客
08-10 9833
最近刚好在学习Vue.js，在实敲轮播demo时发现了一个当时感觉很奇怪的问题： 初始化使用mounted钩子时，只调用了一次，之后就没有调用过了。害我一直以为是自己之后的代码书写有问题，结果自己再敲一遍还是只能初始化调用一次。。。发现这个问题后找找大神们的博客看了看，发现了created钩子的使用。下面就将这次的经历给记录下来。 生命周期先上图 这里写图片描述 什么是生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这
9.Vue中mounted的简单理解
热门推荐
sinat_41124751的博客
07-31 36万+
Vue小白笔记9——mounted的简单理解
vue中的router-link linkActiveClass属性
Little_Flower的博客
03-07 6388
在路由中配置linkActiveClass属性 export default new Router({ routes: [ { path: '/', name: 'HolleWorld', component: HolleWorld } ], linkActiveClass: 'active' // active为路由激活时...
vue-router中的router-link的active-class
lianwenxiu的博客
07-16 1090
在vue-router中做底部导航栏加active样式的做法： 在router.js中设置linkExactActiveClass属性： 在使用的地方加入exact: 定义公共样式： .active{ color: #51BC8A } ...
vue路由跳转后高亮问题|active class(激活状态)linkActiveClass 和 linkExactActiveClass以及exact
x_xiNan9416的博客
09-27 3543
linkActiveClass 是模糊匹配 linkExactActiveClass 是精准匹配 exact也是精准的意思 问题 看下边图片: 当css样式为#nav a.router-link-exact-active { color: #42b983; }时,如果下边没有子路由不会有什么问题,但是如果有子集路由的话,当你点击小说下边的子集路由小说就不会高亮 图片如下: 解决这个问题只需要改变css为#nav a.router-link-active { color: #42b983; } 对比初始的
VueRouter的active-class，exact，exact-active-class三个属性的使用
faker____的博客
07-03 2099
<router-link to="/news">唐诗</router-link> <router-link to="/news/exact/test" >test唐诗</router-link> <router-link to="/" exact> 导航 </router-link> ...
vue3基础后台管理项目
最新发布
07-28
- *2* *3* [vue系列（三）——手把手教你搭建一个vue3管理后台基础模板](https://blog.csdn.net/xxfen_/article/details/125410412)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值