精华内容
下载资源
问答
  • vue 备忘录

    千次阅读 2018-05-31 18:28:28
    vue写了个日历备忘录的功能。省略了备忘录的增删改查功能。 直接上代码 <!DOCTYPE html> <html lang="en"> &amp...

    用vue写了个日历备忘录的功能。省略了备忘录的增删改查功能。
    这里写图片描述
    直接上代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>备忘录</title>
        <style type="text/css">
            #box{
                width: 469px;
            }
            /*日历*/
                *{
                    padding: 0;
                    margin: 0;
                }
                li{
                    list-style: none;
                }
                #calendar{
                    width:380px;
                    margin: 40px auto 0;
                    padding-bottom: 30px;
                    border-bottom: 1px solid #eee;
                }
                .pickDay{
                    margin: 0 auto;
                    width: 100px;
                    height: 65px;
                    text-align: center;
                }
                .pickDay span{
                    font-size: 12px;
                    color: #989898;
                }
                .pickDay span:first-of-type{
                    font-size: 72px;
                    color: #789AF7;
                }
                .month {
                    width: 100%;
                }  
                .month ul {
                    margin: 29px 0 25px;
                    display: flex;
                    justify-content: center;
                }  
                .year-month {
                    width: 180px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .choose-year {
                    font-size: 14px;
                    color: #989898;
                }
                .choose-month {
                    text-align: center;
                    color: #989898;
                    font-size: 14px;
                }
                .arrow {
                    width: 28px;
                    height: 28px;
                    text-align: center;
                }
    
                .arrow:hover {
                    background: rgba(100, 2, 12, 0.1);
                    cursor: pointer;
                }
    
                .month ul li {
                    color: #789AF7;
                    font-size: 20px;
                }
    
                .weekdays {
                    width: 270px;
                    margin: 0 auto 7.5px;
                    display: flex;
                    flex-wrap: wrap;
                    color: #808080;
                    justify-content: space-around;
                }
    
                .weekdays li {
                    display: inline-block;
                    font-size: 16px;
                    color: #808080; 
                    width: 26px;
                    text-align: center;
                }
    
                .days {
                    width: 270px;   
                    margin: 0 auto;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    background: #FFFFFF;
                }
    
                .days li {
                    position: relative;
                    display: inline-block;
                    width: 14.2%;
                    text-align: center;
                    padding-bottom: 7.5px;
                    padding-top: 7.5px;     
                    color: #999;
                    cursor: pointer;
                }
                .days .momo_mark{
                    position: absolute;
                    right: 0;
                    top: 10px;
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    background: #7699F8;
                }
                .days li span{
                    font-size: 16px;
                }
                .days li .active {
                    color: #789AF7;
                }  
                .days li .other-month {
                    padding: 5px;
                    color: #E6E6E6;
                }
                .days li:hover{
                    color: #789AF7;
                } 
                .days li:hover .other-month{
                    color: #789AF7;
                }
    
            /*备忘录*/
                #memo{
                    width: 400px;
                    margin: 30px 0 0 20px;
                }
                #memo h4{
                    text-indent: 20px;
                    height: 20px;
                    line-height: 20px;
                    font-size: 14px;
                    color: #7699F8;
                }
                .memo_list li{
                    margin-top: 12px;
                }
                .memo_list .memo_list_s{
                    width: 399px;   
    
                }
                .memo_list .memo_list_s:hover{
                    background: #EEE;
                }
                .memo_list .memo_list_s:hover .circle{
                    background: #F84848;
                }
    
                .memo_list .memo_list_s:hover #edit_memo{
                    background: url(../assets/edit_active.png) no-repeat;
                }
                .memo_list .memo_list_s:hover #del_memo{
                    background: url(../assets/del_active.png) no-repeat;
                }
                .circle{
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    background: #7699F8;
                    vertical-align: top;
                    margin: 12px 5px 0px 9px;
                }
                .memo_list_mont{
                    display: inline-block;
                    width: 323px;
                    min-height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    color: #666666;
                }
                .memo_operate{
                    display: inline-block;
                    vertical-align: top;
                    font-size: 0;
                    padding-top: 9px;
                }
                .memo_operate button{
                    width: 12px;
                    height: 12px;
                    margin-right: 10px;
                    background: #fff;
                    border: none;
                }
                #addMemo{
                    width: 96px;
                    height: 28px;
                    line-height: 28px;
                    color: #789BF8;
                    background: #fff;
                    border: 1px solid #789BF8;
                    border-radius: 2px;
                    margin: 25px 0 0 20px;
                }
                .memo_cont{
                    width: 310px;
                    background: #7699F8;
                    border-radius: 2px;
                    margin-left: 20px;
                    margin-top: 15px;
                    padding: 37px 30px 24px 30px;
                }
                .memo_edit{
                    width: 100%;
                    min-height: 140px;
                    line-height: 28px;
                    color: #fff;
                    font-size: 14px;
                    background: url(../assets/bgborder.png) repeat-y;
                    outline: none;
                    border: none;
                    resize:none;
                }
                .edit_operate{
                    padding-top: 20px;
                    display: flex;
                    justify-content: flex-end;
                }
                .edit_operate button{
                    width: 20px;
                    height: 20px;
                    margin-left: 16px;
    
                }
                #cancel_edit{
                    background: url(../assets/error.png) center center no-repeat;
                }
                #save_edit{
                    background: url(../assets/right.png) center center no-repeat;
                }
    
            /*动画*/
                .fade-enter-active, .fade-leave-active {
                    transition: all 0.5s ease-in;
                }
                .fade-enter, .fade-leave-to{
                    opacity: 0;
                }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="calendar" v-if="pickDay != null">
                <div class="pickDay">
                    <span>{{pickDay}}</span><span></span>
                </div>
                <!-- 年份 月份 -->
                <div class="month">
                    <ul>
                        <li class="arrow" @click="pickPre(currentYear,currentMonth)">&#10094;</li>
                        <li class="year-month" @click="pickYear(currentYear,currentMonth)">
                        <span class="choose-year">{{ currentYear }}</span>
                        <span class="choose-month"> - {{ currentMonth }}</span>
                        </li>
                        <li class="arrow" @click="pickNext(currentYear,currentMonth)">&#10095;</li>
                    </ul>
                </div>
                <!-- 星期 -->
                <ul class="weekdays">
                    <li>MO</li>
                    <li>TU</li>
                    <li>WE</li>
                    <li>TH</li>
                    <li>FR</li>
                    <li style="color:red">SA</li>
                    <li style="color:red">SU</li>
                </ul>
                <!-- 日期 -->
                <ul class="days">
                    <li @click="pick(day.day)" v-for="day in days">
                        <!--本月-->
                        <span class="momo_mark" v-if="day.memo_type"></span>
                        <span v-if="day.day.getMonth()+1 != currentMonth" class="other-month">{{ day.day.getDate() }}</span>
                        <span v-else>
                            <!--今天-->
                            <span v-if="day.day.getFullYear() == new Date().getFullYear() && day.day.getMonth() == new Date().getMonth() && day.day.getDate() == new Date().getDate()" class="active">{{ day.day.getDate() }}</span>
                            <span v-else>{{ day.day.getDate() }}</span>
                        </span>
                    </li>
                </ul>
            </div>
            <div id="memo">
                <h4>备忘录</h4>
                <ul class="memo_list"  v-if="currentMemo">
                    <li v-for="(memo,index) in currentMemo" :key="index">
                        <div class="memo_list_s">
                            <span class="circle"></span>
                            <div class="memo_list_mont">{{memo.cont}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </body>
        <script src="https://cdn.bootcss.com/vue/2.5.11/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el : "#box",
                data : {
                    currentDay: 1,
                    currentMonth: 1,
                    currentYear: 1970,
                    currentWeek: 1,
                    days: [],
                    pickDay : null,
                    currentMemo : null,
                    memo_list :["2018-05-11","2018-05-31"]//时间格式必须为xxxx-xx-xx;
                },
                created: function() {
                  this.initCalendar(null);
                 },
                methods:{
                    initCalendar: function(cur){
                        if (cur) {
                            var date = new Date(cur);
                        } else {
                            var date = new Date();
                            this.pickDay = date.getDate();
                        }
                        this.currentYear = date.getFullYear();
                        this.currentMonth = date.getMonth() + 1;                    
                        var str = this.formatDate(this.currentYear , this.currentMonth, 1);
                        this.currentWeek = new Date(str).getDay() == 0 ? 7 : new Date(str).getDay();
    
                        this.days.length = 0;//初始化数组
                        for (var i = this.currentWeek - 1; i >= 0; i--) {       
                            var d = new Date(str);
                            var memo_type = false;
                            d.setDate(d.getDate() - i);                 
                            for (var j = 0; j < this.memo_list.length; j++) {
                                var memoTime = new Date(this.memo_list[j]).getTime();
                                if( d.getTime() == memoTime){
                                    memo_type = true;
                                }                   
                            }
                            this.days.push({day:d,memo_type:memo_type});
                        }
                        for (var i = 1; i <= 35 - this.currentWeek; i++){
                            var d = new Date(str);
                            d.setDate(d.getDate() + i);
                            var memo_type = false;
                            for (var j = 0; j < this.memo_list.length; j++) {
                                var memoTime = new Date(this.memo_list[j]).getTime()
                                if( d.getTime() == memoTime){
                                    memo_type = true;
                                }                   
                            }
                            this.days.push({day:d,memo_type:memo_type});
                        }
                    },
                    pick: function(date){
                        this.pickDay = date.getDate();
                        this.initCalendar(this.formatDate(date.getFullYear() , date.getMonth() + 1, 1));
                        var curPickDay = this.formatDate(date.getFullYear() , date.getMonth() + 1, date.getDate())
                        // 数据发送请求拿回即可,这里我就写死了,随便写两个样例
                        if(curPickDay == "2018-05-11"){                     
                            this.currentMemo = [{
                                cont :"setDate() 方法用于设置一个月的某一天。该方法什么都不返回"
                            },{
                                cont :"getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。"
                            }]
                        }else if(curPickDay == "2018-05-31"){
                            this.currentMemo = [{
                                cont :"getDay() 方法可返回表示星期的某一天的数字。返回值是 0(周日) 到 6(周六) 之间的一个整数"
                            },{
                                cont :"setDate(0); 上月最后一天;setDate(-1); 上月倒数第二天;setDate(dx) 参数dx为 上月最后一天的前后dx天"
                            }]
                        }else{
                            this.currentMemo= null;
                        }
                    },
                    pickPre: function(year, month){
                        // setDate(0); 上月最后一天
                        // setDate(-1); 上月倒数第二天
                        // setDate(dx) 参数dx为 上月最后一天的前后dx天
                        var d = new Date(this.formatDate(year , month , 1));
                        d.setDate(0);
                        this.initCalendar(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
                    },
                    pickNext: function(year, month){
                        var d = new Date(this.formatDate(year , month , 1));
                        d.setDate(35);
                        this.initCalendar(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
                    },
                    // 返回 类似 2016-01-02 格式的字符串
                    formatDate: function(year,month,day){
                        var y = year;
                        var m = month;
                        if(m<10) m = "0" + m;
                        var d = day;
                        if(d<10) d = "0" + d;
                        return y+"-"+m+"-"+d
                    }
                }
            })
        </script>
    </html>

    欢迎大家提意见,提BUG

    展开全文
  • vue备忘录

    2019-10-02 11:59:33
    1.Vue构造其中有一个el参数,它是dom元素中的id。 2.Vue中的实例属性与方法都有前缀$,以便与用户定义的属性区分开来。如:$el。 3.v-html指令用于输出html代码。 4.修饰符是以半角句号 . 指明的特殊后缀,用于...

    1.Vue构造其中有一个el参数,它是dom元素中的id。

    2.Vue中的实例属性与方法都有前缀$,以便与用户定义的属性区分开来。如:$el。

    3.v-html指令用于输出html代码。

    4.修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
    例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()。
    .stop 阻止事件冒泡
    .capture 使用事件捕获
    .self 只在该元素本身出发,子元素不会触发
    .once 事件只触发一次(版本:2.1.4新增)

    5.过滤器,由管道符指示,过滤器函数接受表达式的值作为第一个参数。
    <!-- 在两个大括号中 -->
    {{ message | capitalize }}

    <!-- 在 v-bind 指令中 -->
    <div v-bind:id="rawId | formatId"></div>

    data:{rawId:1},
    filters:{formatId:(value)=>{return value++;}}

    6.v-bind:id缩写:id
    v-on:click缩写@click

    7.当我们给一个比如 props 中,或者 data 中被观测的对象添加一个新的属性的时候,不能直接添加,必须使用 Vue.set 方法。

    8.计算属性computed{
    newId:{//可以直接使用
    get:function(){},
    set:function(value){}
    }
    }
    当newId属性值改变的时候,会触发跟这个属性相关的视图的改变。

    9.监听属性watch
    data{id:1}
    watch:{id:function(val){axios......then().catch()}}
    watch用来监听一个data里的属性值;当此值改变的时候,会触发数据的变化。
    一般情况下涉及到异步请求数据就在watch里写。

    10.class属性绑定
    对象语法:v-bind:class="{ active: isActive, 'text-danger': hasError }"
    都为true的情况下,应用样式,后面的会覆盖前面的样式。
    数组语法: v-bind:class="[activeClass, errorClass]"

    11.style(内联样式绑定)
    对象:v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"
    数组:v-bind:style="[baseStyles, overridingStyles]"

    12.按键修饰符:如v-on:keyup.enter
    .enter
    .tab
    .delete (捕获 "删除" 和 "退格" 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta

    13.input修饰符
    .lazy:在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
    .number
    .trim:自动过滤输入的首尾空白字符

    14.props父组件传递给子组件。

    15.自定义事件$on(eventName);父组件接收子组件事件
    $emit(eventName);子组件发出事件

    16.监听原生事件:.native修饰:<my-component v-on:click.native="doTheThing"></my-component>

    17.router-link to="" 渲染结果 a href=""
    设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。
    设置 append 属性后,则在当前 (相对) 路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b
    有时候想要 <router-link> 渲染成某种标签,例如 <li>。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。

    18.vue路由懒加载:进入首页不用一次加载过多资源造成用时过长。

    19.只有data中的数据是响应式的,动态添加近来的数据默认为非响应式。
    可以通过以下方式实现动态添加数据的响应式
    var vm = new Vue({
    data: {
    stu: {
    name: 'jack',
    age: 19
    }
    }
    })
    1 Vue.set(object, key, value) - 适用于添加单个属性
    2 Object.assign() - 适用于添加多个属性
    Vue.set(vm.stu, 'gender', 'male')
    /* Object.assign 将参数中的所有对象属性和值 合并到第一个参数 并返回合并后的对象*/
    vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })

    20.获取更新后dom中的数据 则需要通过 Vue.nextTick(callback);实例调用vm.$nextTick(function () {})

    21.v-for="(item, key, index) in obj"<!-- item 为值,key 为键,index 为索引 -->

    22.注意:computed中的属性不能与data中的属性同名,否则会报错

    23.拦截器会拦截发送的每一个请求,请求发送之前执行request中的函数,请求发送完成之后执行response中的函数
    // 请求拦截器 //响应拦截器形似
    axios.interceptors.request.use(function (config) {
    // 所有请求之前都要执行的操作
    return config;
    }, function (error) {
    // 错误处理
    return Promise.reject(error);
    });

    24.非父子通讯可以用事件总线
    var bus = new Vue()
    // 在组件 B 绑定自定义事件
    bus.$on('id-selected', function (id) {
    // ...
    })
    // 触发组件 A 中的事件并传递值;此值可以在父组件通过$event访问到
    bus.$emit('id-selected', 1)

    25.mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

    26.我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
    然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

    27.一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
    因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    28.由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
    当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
    当你修改数组的长度时,例如:vm.items.length = newLength
    可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:
    vm.$set(vm.items, indexOfItem, newValue)
    为了解决第二类问题,你可以使用 splice:
    vm.items.splice(newLength)

    29.对象同28,当你需要改变多个属性,应该这样做:
    Object.assign({}, vm.object, {
    age: 27,
    favoriteColor: 'Vue Green'
    })

    30.有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。

    31.单个复选框,绑定到布尔值;多个复选框,绑定到同一个数组。

    32.选择框:如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。
    在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐提供一个值为空的禁用选项。

    33.这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值。
    props: ['initialCounter'],
    data: function () {
    return {
    counter: this.initialCounter
    }
    }

    34.在极少数的情况下需要手动强制更新,那么你可以通过 $forceUpdate 来做这件事。

    35.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

    36.input中οnkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'') " onafterpaste="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"表示只能输入中文字。

    37.全局路由钩子函数:每次路由跳转,都会执行beeforeEach和afterEach

    beforeEach(to,from,next){

    console.log(to);//到达的路由

    console.log(next);//管道中,可以跳转到其他路由

    console.log(from);//离开的路由

    }

    确保始终调用该next函数,否则永远不会解析挂钩

    afterEach(to,from){}

    38.单个路由钩子函数beforeEnter有三个参数:to/from/next,在配置路由的时候添加此钩子函数

    39.组件内钩子函数beforeRouteEnter+beforeRouteUpdate+beforeRouteLeave,三个参数:to/from/next

    在组件内部定义,其中beforeRouteUpdate是在二级路由更改时才会触发。

    40.回退函数

    goBack () {
    window.history.length > 1
    ? this.$router.go(-1)
    : this.$router.push('/')
    }

    41.当params参数更改时,触发页面调用生命周期钩子函数

    watch: {
    '$route' (to, from) {}
    }或者

    beforeRouteUpdate (to, from, next) {}

    42.捕获所有/ 404未找到路线:path{*}

    43.路由传参

    // named route
    router.push({ name: 'user', params: { userId: '123' } })

    // with query, resulting in /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' } })

     44.路线元字段

    可以meta在定义路径时包含字段:
    {
    path: 'bar',
    component: Bar,
    // a meta field
    meta: { requiresAuth: true }
    }
    通过to.meta.requiresAuth访问

    45.滚动行为

    scrollBehavior (to, from, savedPosition) {
    // return desired position
    }
    返回值:
    { x: number, y: number }
    { selector: string, offset? : { x: number, y: number }} (仅在2.6.0+中支持偏移)

     

    转载于:https://www.cnblogs.com/xinyouhunran/p/10862256.html

    展开全文
  • Vue备忘录

    2019-01-06 19:41:15
    v-cloak [v-cloak] { display: none !important; }  

    v-cloak

    [v-cloak] {
        display: none !important;
    }

     

    展开全文
  • vue备忘录 笔记 (Notes) A memo application developed with vue. 用vue开发的备忘录应用程序。 View demo 查看演示 View Github 查看Github 贡献 (Contributing) Welcome 欢迎 Fork it 叉它 Submit pull ...

    vue备忘录

    笔记 (Notes)

    A memo application developed with vue.

    用vue开发的备忘录应用程序。

    贡献 (Contributing)

    Welcome

    欢迎

    • Fork it

      叉它

    • Submit pull request

      提交拉取请求

    翻译自: https://vuejsexamples.com/a-memo-application-developed-with-vue/

    vue备忘录

    展开全文
  • vue 备忘录Directives 指令 Conditionals 有条件的 Directives 指令 Working with form elements 使用表单元素 Modifying events 修改事件 Mouse event modifiers 鼠标事件修改器 Submit an event only if a ...
  • vue备忘录 ror2-项目备忘单 (ror2-item-cheat-sheet) The Risk of Rain 2 Item Cheat Sheet built in Vue. Vue中内置的“下雨的风险2项目备忘单”。 View Demo 查看演示 View Github 查看Github 项目设置 ...
  • vue备忘录单页demo

    2019-05-06 16:13:47
    配置环境 vue-cli3.0 运行依赖 vue-router,vuex,mint-ui。 安装npm install,npm run serve运行即可
  • VUE备忘录的增删改查

    2020-03-06 20:57:50
    一.图片描述 ... <div id="app"> <div class="wrap"> ...h2 class="sec-title">新建备忘录</h2> <form class="tipForm"> <div class="flex-center"> ...
  • vue备忘录(转盘活动)

    2018-12-10 11:52:46
    1、 aaa.init .init初始化 function init() { var TestStrA = "abc"; var TestStrB = "def"; var TestStrC = TestStrA + TestStrB; alert(TestStrC);... var node=document.createEle...
  • 基于vue备忘录

    2021-06-01 20:10:44
    基于vue备忘录
  • 主要为大家详细介绍了vue实现日历备忘录功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue写了个日历备忘录的功能,省略了备忘录的增删改查功能。直接上代码备忘录#box{width: 469px;}/*日历*/*{padding: 0;margin: 0;}li{list-style: none;}#calendar{width:380px;margin: 40px auto 0;padding-...
  • Vue.js实现备忘录功能

    2020-10-16 18:54:57
    主要为大家详细介绍了Vue.js实现备忘录功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue.js实现备忘录demo

    2020-10-16 18:55:55
    主要为大家详细介绍了vue.js实现备忘录的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了Vuex2.0+Vue2.0构建备忘录应用实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下。 (尊重他人劳动成果,从小事做起~ demo原github地址:https://github.com/vuejs/vue...
  • vue单页备忘录功能

    2019-05-06 14:09:22
    功能实现效果 1.vuex状态集成,添加内容保存到列表功能 2.点击列表进入详情页功能 3.vue-router路由管理,组件跳转。 4.mint-ui组件库引入,新增列表左滑删除功能。 5.表单功能 ...
  • vue小项目 在线备忘录

    2020-02-28 14:56:38
    vue小项目 在线备忘录效果图已经实现功能待完成功能源码下载地址 效果图 已经实现功能 新增加备忘录。 展示备忘录列表。 展示未完成数,总数。 完成,未完成的切换备忘记录。 显示,隐藏已完成备忘记录。 删除背完...
  • Vue实现简易备忘录

    2021-07-22 11:01:39
    0.项目结构 1.实现效果 输入后,按下回车添加 2.代码 notepad.html <html> <head> <...备忘录</title> <meta http-equiv="content-type" content="text/html; charset=U
  • vue的使用样式备忘录

    2019-11-26 16:51:19
    1.如何将两个并排显示的div放在同一个div里面 <div > <div style="width:50%;float:left"></div> <div style="width:50%;float:left"></div> </div>... ...
  • vue案例todolist备忘录

    2018-10-19 22:35:00
    项目效果:https://cinderellastory.github.io/todolist/dist/index.html#/ 项目链接:... vue逆袭群,希望能够帮助到大家! 群号:659182980 转载于:https://www.cnblogs.com/CinderellaStory...
  • 备忘录

    2018-12-29 08:12:38
    Js备忘录 错误查询表 cloud.tencent.com/developer/d... ...Vue备忘录 vscode eslint配置 1.npm i --save-dev eslint-plugin-html 2.vscode中setting.json //配置eslint "eslint.autoFixOnSave": true, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,199
精华内容 479
关键字:

vue备忘录

vue 订阅