vue——基础

改变数组的某一个元素,触发视图更新

        this.list[1] = {
            name: ‘setchange‘,
            price: 222
        }
        //列表的改变不会触发视图更新,需要使用Vue.set的方法可以触发视图更新
        Vue.set(this.list, 1, {
            name: ‘setchange‘,
            price: 222
        })

标签属性

1 v-bind绑定的标签属性为动态绑定,数据更新则视图更新,简写 v-bind:src="imgSrc" <==> :src="imgSrc"

2 用v-bind 绑定class

        //1 使用v-bind绑定的class和普通class共存
        <span class="old" :class="bgred">v-bind</span>

        //2 对象的方式绑定
        <span  :class="{bgred:true,color:true}">v-bind</span>

        //3 数组的方式绑定
        <span  :class="[‘bgred‘,‘color‘]">v-bind</span>

        //4 混合使用
        <span  :class="[{‘bgred‘:hasError},‘color‘]">v-bind</span>
        hasError是数据

3 用 v-bind 绑定 style

        <span  :style="linkCss">v-bind</span>
        this.linkCss = {color:‘red‘,‘font-size‘:‘20px‘}

条件渲染 v-if (元素添加/移除) v-show (显示/隐藏)

v-else,即可以配合v-if 也可以配合 v-show使用

    <a v-if="isPart">显示</a>
    <a v-else>no data</a>

Vue事件绑定-表单事件绑定

绑定方式 v-on:click="方法()" <==> @click="方法()"

事件修改器

  • @click.stop="事件()" 阻止冒泡
  • @keydown.enter="事件()" 键盘键入 enter的时候才触发事件
  • @keydown.13 = “事件()” 键盘键入的键的编码是13的时候触发事件

自定义事件

在父组件中定义自定义事件
        <father @my-event="onChildClick"></father>
        methods:{
            onChildClick(parmfromChild){
                事件触发时执行
            }
        }

事件如何被触发呢?在子组件中通过 eimt触发

在子组件中
        <button @click="emitMyEvent">触发</button>
        methods:{
            emitMyEvent(){
                this.$emit(‘my-event‘,要传给父组件的数据);
            }
        }

表单中的事件

1 lazy: 延迟更新
    <input type="text" v-model.lazy="title" /> {{title}}
2 number 输入值转成数组
    <input type="text" v-model.number="num"/>
3 trim 去掉前后空格
    <input type="text" v-model.trim="str"/>
4 制作checkbox 见 base/form base/component/select.vue

计算属性 根据其他属性的变化进行同步变化

    computed:{
        newAttr(){
            return ‘$‘+this.price;
        }
    }

数据监听 watch

    <input type="text" v-model="myVal"/>
    watch{
        myVal:function(newValue,oldValue){
            console.log(newValue,oldValue);
        }
    }

组件间的通信

1 在父组件中使用子组件

    //1  引入
    import child from ‘./子组件路径‘;
    //2 放入父组件的components对象中,注册子组件
    components:{
        child
    }
    //3 在父组件的 template中调用
    <child></child>

2 使用is 引入组件,实现动态绑定组件。base/componentPage.vue

        <button type="button" name="button" @click="change(1)">1号子组件</button>
        <button type="button" name="button" @click="change(2)">2号子组件</button>
        <div :is="childComponent"></div>

        import ChildComponent1 from ‘@/base/child1‘
        import ChildComponent2 from ‘@/base/child2‘

        data() {
            return {
                childComponent: ‘‘
            }
        },
        components: {
            ChildComponent1,
            ChildComponent2
        },
        methods: {
            change(index) {
                if (index == 1) {
                    this.childComponent = ‘child-component1‘
                } else {
                    this.childComponent = ‘child-component2‘
                }
            }
        }

3 父子组件的通信

4 给子组件动态绑定数据

5 插槽功能

父组件向子组件传递信息,传递的是模板

        父组件中
        <message-child @my-event="listenChild" :info="info">
            <p>我是父组件传递的模板,会显示到子组件的slot位置</p>
        </message-child>

        子组件中,放置slot就会显示
        <div class="">
            子组件内容
            {{info}}
            <button @click="passToFather">发送数据给父组件</button>
            <slot></slot>
        </div>
2 插槽默认值
    当没有内容的时候,会显示no slot,有内容显示传输的内容
    <slot>no slot</slot>
3 具名slot,可以根据name值,定向显示模板内容
        父组件中
        <message-child @my-event="listenChild" :info="info">
            <p>我是父组件传递的模板,会显示到子组件的slot位置</p>
            <!-- 具名slot -->
            <div slot="header">
                我是header
            </div>

            <div slot="footer">
                我是footer
            </div>
        </message-child>

        子组件中,放置slot就会显示
        <div class="">
            <slot name="header">没有头部</slot>
            子组件内容
            {{info}}
            <button @click="passToFather">发送数据给父组件</button>
            <slot></slot>
            <slot name="footer">没有底部</slot>
        </div>

总结

组件交出数据三种方式
  1. 通过v-bind 将数据从父组件传入到子组件
  2. this.$emit 将子组件的数据发回父组件
  3. slot 插槽功能

动画

  • 动画
  • 自定义指令
  • mixins
  • 插件

动画

css 实现动画
        mode="out-in" 先出去再进来.

        template
        <transition name="fade" mode="out-in">
            <div class="box" v-show="isShow">
                我是测试动画
            </div>
        </transition>

        css样式
        .fade-enter-active,.fade-leave-active{
            transition: 0.5s;
        }
        .fade-enter,.fade-leave-active{
            opacity: 0;
        }
接受的过度状态
  • v-if
  • v-show
  • :is 动态组件
        动态组件
        <div class="">
            <transition name="fade" mode="out-in">
                <div :is="currentView"></div>
    
            </transition>
            <button type="button" @click="toggleCom()" name="button">切换</button>
        </div>
    
        toggleCom() {
            if (this.currentView == ‘Trans1‘) {
                this.currentView = Trans2;
            } else {
                this.currentView = Trans1;
            }
        }
    

自定义指令

使用 Vue.directive]

        定义全局变量 main.js 中定义全局指令
        Vue.directive(‘css‘,{
            //插入之后执行  el:当前元素  bind:绑定的值,打印自己看
            inserted(el,bind){
                console.log(‘inserted‘);
                console.log(bind);
                var obj = bind.value;
                var arr = [];
                for(let key in obj){
                    arr.push(key+‘:‘+obj[key]);
                }
                var style = arr.join(‘;‘);
                el.style.cssText = arr;
            }
        })

        <div class="" v-css="{‘color‘:‘red‘}">
             内容
        </div>

路由

时间: 2024-10-26 09:02:16

vue——基础的相关文章

vue基础知识之vue-resource/axios

Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-resource还提供了

vue基础语法

vue基础语法 vue官网链接:https://cn.vuejs.org/  一.Vue简介 Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. Vue.js是一款轻量级的.以数据驱动构建web界面的前端JS框架,它在架构设计上采用了MVVM(Model-View-ViewModel)模式,其中ViewModel是Vue.js的核心,它是一个Vue的实例,而这个实例又作用域页面上的某个HTML元素. 其核心在于通过数据驱动界面的更新

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:给博客首页加花样(二)

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM

千锋教育Vue组件--vue基础的方法

课程地址: https://ke.qq.com/course/251029#term_id=100295989 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue基础的方法</title&

Vue 基础篇

Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能 + ... 代码上的不同: 一般使用库:调用某个函数,自己可以把控库的代码 一般使用框架:其框架在帮我们运行已编写好的代码 框架:初始化自身的一些行为 执行你所编写的代码 施放一些资源 库:小而精 框架:大而全 ( 框架包含了各种库 ) 二.起步 引包 直接用 <scri

Vue基础学习一

Vue基础一 1.0 前端开发规范 ? 前端开发规范 1.1 vue版本更迭 vue版本 ???-?vue?1.0???2014年 ???-?vue?2.0???2016年 ???-?vue?3.0[?试用版?]?2019年国庆 1.2匿名函数 javascript (function?(形参1,形参2)?{ /?你的代码?/ ?})(实参1,实参2) ???-?好处 ?????-?1.?防止全局作用域 ?????-?2.?防止命名冲突 ?????-?3.?防止一些脚本的攻击 ?????-?4.

前端框架Vue自学之Vue基础语法(二)

终极目标:掌握和使用Vue(全家桶:Core+Vue-router+Vuex) 本博客目的:记录Vue学习的进度和心得(Vue基础语法) 内容:通过官网说明,掌握Vue基础语法. 正文: Vue基础语法 一. 原文地址:https://www.cnblogs.com/xinkuiwu/p/12031107.html

Vue基础篇--5列表渲染v-for

Vue基础篇--5列表渲染v-for 1.用v-for把一个数组对弈为一组元素 我们用v-for指令根据一组数组选项列表进行渲染. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="./vue.js"

Vue基础篇--6事件处理

Vue基础篇--6事件处理 1.监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例 <div id="exp"> <button v-on:click="count +=1">add 1</button> <p>The button above has been clicked {{count}} times.</p> </div> new

Vue基础篇--8组件基础 component

Vue基础篇--8组件基础 component 1.简单示例 <div id='components1'> <button-conter></button-conter> </div> <script> // 定义一个名为button-conter组件 Vue.component("button-conter",{ data:function () { return { count:0 } }, template:`<b