为了账号安全,请及时绑定邮箱和手机立即绑定
  • 其他 阿达大

    查看全部
  • 父组件通过属性向子组件传值;

    子组件通过发布$emit向父组件传值;

    查看全部
    0 采集 收起 来源:vue-router介绍

    2020-03-14

  • vue 入门导图

    查看全部
    0 采集 收起 来源:知识点解释

    2020-03-09

  • Git 简单实用教程

    查看全部
    0 采集 收起 来源:如何集成vue?

    2020-03-03

  • 一、条件渲染

    1、v-if,v-else , v-else-if 

    2、v-show 

    二、列表渲染

    1、v-for : v-for="item in list"

    三、Class和Style绑定

    1、v-bind: -->简写  :style


    查看全部
  • 查看全部
    1 采集 收起 来源:前置学习环境

    2020-02-19

  • git checkout -b 分支名   在主分支上创建一个新的分支

    git checkout 分支名 切换到对应分支

    git breach -a 查看所有分支

    合并分支,首先切换到主分支,使用git merge 本地分支名,再在主分支上进行git push 提交到远程

    git branch -D dev 删除本地名为dev的分支,然后使用

    git push origin  :dev 注意:dev的冒号前为空

    git reset --hard head^ 退回到之前的版本

    git log 查看日志

    git reflog 之前的提交日志

    http://img1.sycdn.imooc.com//5e4bb5890001276b06580242.jpg

    使用git reset --hard HEAD@{1}或者git reset --hard 44c2edc即可再找到对应的版本

    查看全部
    1 采集 收起 来源:如何集成vue?

    2020-02-18

  • console.log()

    console.error()

    alert()阻塞式,执行完才会执行后续代码

    debugger 断点

    chrome浏览器中console的使用


    chrome浏览器vue组件

    选项卡一:可以看到页面用到了哪些组件,组件中用到了用哪些属性

    选项卡二:监视调试vue中的vuex


    Network:查看页面上加载的项

                     XHR:页面上发起的请求

                     JS  CSS IMG:页面中对应用到的文件

                    最右侧online选项当需要调试页面上交互可以选择Slow 3G(较慢的网速),看加载的顺序速度loading交互

    mounted是vue的生命周期,当页面挂载完成后执行

    可以在mounted中定义window.vue=this,然后在chrome浏览器中,console选项卡中使用,window.vue.属性名,或者window.vue.方法名进行调试


    可以将vue赋值给一个全局变量,从而取到其中的值

    例如 : var app = new Vue({

                el:'#app',

                data:{

                    msg: 'Hello'

                }

              })

    在console调试页面,就可使用app.msg获取到msg的值

    查看全部
    0 采集 收起 来源:如何进行调试

    2020-02-18

  • state : 组件的状态(需要管理的或者组件公用的)

    mutations : 定义改变状态的方法集

    使用vuex,首先定义一个store这样的js文件,在文件中引入vuex

    Vue.use(Vuex),定义state和mutations

    在组件中使用vuex

    首先,使用import引入store(定义了vuex的js文件)。然后在组件的default中引用stroe,在组件中提交或修改,使用store.commit('store中定义的方法名')。使用公共的状态,同样需要引入和在default引用,在data中引用,例如,msg: store.state.属性名。

    查看全部
    1 采集 收起 来源:vuex介绍

    2020-02-18

  • v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
    相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。


    <div id="app">    <div v-if="Math.random() > 0.5">      Sorry    </div>    <div v-else>      Not sorry    </div></div> ----------<div id="app">    <div v-if="type === 'A'">      A    </div>    <div v-else-if="type === 'B'">      B    </div>    <div v-else-if="type === 'C'">      C    </div>    <div v-else>      Not A/B/C    </div></div>


    查看全部
    1 采集 收起 来源:模板语法

    2020-02-18

  • VUE入门
    查看全部
    0 采集 收起 来源:知识点解释

    2020-02-13

  • 组件化

    独立的、可复用的、整体化的

    组件化的原因

    实现功能模块的复用、高执行效率、开发单页面复杂应用

    拆分原则

    300行原则(包括样式、逻辑等所有代码)、复用原则(经常去使用,比如头部导航和底部版权)、业务复杂性原则

    查看全部
  • :class="['active','more',{'another': item.age<30}]"

    当item.age小于30时,有class名another

    :

    在vue的data中

    styleMsg: {

    color: 'red',

    textShadow: '0 0 5px green'

    }

    注意,像text-shadow这种带-的css属性名,应用以下写法

    1. 'text-shadow': '',

    2. 'textShadow':''   (驼峰法)

    查看全部
  • computed:{

    msg1: function(){

    return 'computed:'+this.msg+arr

    }

    }

    注:this.msg为vue实例中data中的msg属性值,arr为vue实例外的变量值

    只改变arr,msg1的值不发生变化

    改变arr后改变msg,msg1的值中的this.msg和arr同时获取最新的值,发生重新渲染


    watch:{

    msg:function(newval,oldval){

    console.log(newval)

    console.log(oldval)

    }

    }

    watch监听属性,当msg值发生改变时触发

    watch通常监听一个变量或常量

    computed可监听多个变量或常量但一定都是在vue的实例中


    查看全部

举报

0/150
提交
取消
课程须知
1.前端基础知识的HTML,Javascript, css 2.适合于前端小白,想了解最流行的前端框架的小伙伴。 3.有基础的前端/后台人员,想提高工作效率,扩展前端框架的应用的人
老师告诉你能学到什么?
1. vue常用模板语法 2. 列表渲染、条件渲染 3. Class与style绑定 4. vue事件绑定与处理 5. vue计算属性computed, watch 6. vue-cli快速创建工程 7. vue的组件思想,代码规范 8. vue-router介绍 9. 认识vuex,组件间的通信方式 10. 前端调试方法,vue组件调试方法

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!