为了账号安全,请及时绑定邮箱和手机立即绑定
  • 父组件和子组件通信:属性形式
    父组件中通过属性向子组件传递值,子组件接受属性的内容并再子组件上进行内容显示
    子组件可以绑定事件,实现子组件的删除必须删除父组件的相关数据,
    
    子组件和父组件通信:发布订阅模式
    子组件被点击需要通知父组件把数据删除,
    传递一个$emit,触发一个自定义事件,传递一个值,
    父组件在模板里可以监听子组件向外传递的出发的delete事件,如果父组件监听到子组件的事件,
    执行delete事件


    查看全部
  • build目录下放置的是项目的webpack配置文件,可以不动

    config是针对线上环境和开发环境的配置文件,也可以不动

    node_modules 指的是项目的依赖

    src 指的是源代码放置的目录

    static放置的是静态的资源

    src中的main.js文件是整个项目的入口文件

    vue-cli提供了一种新的vue的编码语法:单文件组件(一个.vue文件中包含了一个组件里必须的所有内容)

    vue-cli的优势:

    1可以使用es6。

    2一个组件是一个.vue的文件所定义的,实现了组件的封装。

    (在安装该工具之前需要安装npm和node)



    查看全部
  • 总结一下大概的逻辑过程:
    (1):父组件通过prop向子组件传值 子组件获得父组件传来的内容和索引。
    (2):子组件通过$emit向父组件抛出触发事件名称(delete)和触发事件的list索引值。
    (3):父组件通过监听对应事件名称(@delete)触发函数handleDelete。函数通过子组件抛出的索引值对应删除list

    查看全部
  • 我们可以把一个较大的项目拆分成一个个小的组件,这样维护起来就比较方便了
    vue组件的定义,这里说道两种:
        全局组件:vue提供了vue.component()来定义组件,第一个参数是组件的名字,也是我们将要写在dom里的标签,第二个参数是一个对象,里面可以定义一个模板,也是我们要显示的内容。
        还有一种方式叫做局部组件,在外面定义一个对象,对象里面装着模板,但是这样还不可直接使用,我们需要在实例里面进行注册,配置标签名和内容。意思就是在我这个vue实例里面去使用这个组件。
        在标签内可以像以往一样正常使用指令。
        要想显示我们想显示的内容,我们可以进行传参,在标签里面定义属性,属性就是我们想要显示的内容然后在组件里面用props(固定)给接收过来就可以正常使用了。


    查看全部
  • v-if控制DOM的存在与否

    v-show控件DOM的显示与否

    v-for控制一组数据,来循环显示数据

    v-if 当值为false时,直接将该标签f元素从DOM元素中移除

    v-show 当值为false时,将该标签元素隐藏 display:none

    如果显示隐藏的频率较高的话,用v-show更好,性能高一些

    <li v-for="(item,index) of list"  :key="index">{{item}}</li>

    使用v-for时加一个key属性,提升渲染效率,key值要求每一项都不相同

    如果频繁对列表进行变更时不建议使用index作为key值

    查看全部
  • 1、如果用script引入js,最好放在head里面,用于防止页面抖屏

    2、vue编写着重于数据

    3、语法:

        <div id="root">//挂载点

            {{msg}}  //挂载点里的内容都叫做模板内容,也可以直接将模板内容放到实例的template里面去

        </div>

        <script>

            new vue({     //vue实例

                el:"#root",

                data:{

                    msg:"hello wold"    

                }

            })

        </script>

    查看全部
  • 页面内容过于复杂,可将组件拆分,可定义全局组件或局部组件:

    1、全局组件:在页面任何地方都能使用

        //定义全局组件

        Vue.component("todo-item", {

            template: "<label>我是全局组件</label>"

        });

        new Vue({

            el: "#root",

        });

    //使用全局组件

     <div id="root">

            <todo-item></todo-item>

        </div>

    2、局部组件:要在外层Vue实例里进行注册

        //定义局部组件

        var todoItem = {

            template: "<label>我是局部组件</label>"

        }

        new Vue({

            el: "#root1",

            components: { //局部组件:要在挂载点(它的外层Vue实例,即此处的root1)进行注册

                "todo-item-1": todoItem

            }

        });

        //使用局部组件

    <div id="root1">

            <todo-item-1></todo-item-1><!--局部组件:只能在挂载点底下使用-->

            <todo-item></todo-item><!--全局组件:在页面任何地方都能使用-->

        </div>

    组件拆分之后的传参问题:外部(html页面)可以通过自定义属性的形式传参,组件要定义props[]接收属性

    //父组件向子组件传递数据:通过属性

        Vue.component("todo-item-2", {

            props: ["content", "index"],//接收从外部传进来的属性content、index

            template: "<li>{{index+1}}、{{content}}</li>"

        });

        new Vue({

            el: "#root2",

            data: {

                inputValue: "",

                list: []

            },

            methods: {

                submitClick: function () {

                    this.list.push(this.inputValue);

                    this.inputValue = "";

                }

            }

        })

    <div id="root2">

            <div>

                <input v-model="inputValue" />

                <button @click="submitClick">提交</button>

            </div>

            <ul> <!--自定义属性content、index-->

                <todo-item-2 v-for='(item,index) of list'

                             :key="index"

                             :content="item"

                             :index="index" 

                >

                </todo-item-2>

            </ul>

        </div>


    查看全部
  • npm install -g @vue/cli
    
    vue create vue-cli-demo


    参考网址:

    https://cli.vuejs.org/

    https://cli.vuejs.org/guide/creating-a-project.html#vue-create


    查看全部
  • 1、计算属性:(高效率,当计算的值发生改变的时候,就会重新计算)

    语法:

    computed:{

        c:function(){

            return this.a+this.b

        }

    }

    2、侦听器:(当某个值发生改变的时候,就进行对应的操作)

    语法:

    wacth:{

        a:function(){

            //业务逻辑

        }

    }

    查看全部
  • v-for:循环显示,最好加上:key = index,如果不需要排序可以使用index,如果需要排序或者做其他操作,不用index,存在问题。

    v-if:隐藏与显示,v-show也可以实现隐藏与显示,但是当只需要不频繁切换隐藏显示时用v-if可以。当频繁切换时用v-show,会自动加上display:none,并没有从dom中清除,这样就 不用重新渲染,性能好。而v-if会使元素从dom中清除,每次切换都得重新渲染,加载。


    list是数组的话使用 of ,前面的参数为(value,index);
    list是对象的话使用 in ,前面的参数为(value,key,index);

    <div v-for="(value, key, index) in object">
    {{ index }}. {{ key }}: {{ value }}
    </div>
    这里官网上已经变成in了,感觉使用新写法比较好,第三个值才是索引


    查看全部
  • 这个课程的代码我已经打包在 https://github.com/1171843306/Vue.js
    大家可以去那里下载或者观看

    查看全部
    4 采集 收起 来源:课程总结

    2018-06-19

    • v-if="" : 控制DOM存在与否;

    • v-show="" : 控制DOM显示与否;

    • v-for="(item, index)of list"  :key="index": 控制循环列表的输出;

    ( 意为把 list 数组下的每一个元素赋值给变量名 item ,并把每个元素的下标存到对应的 index 中。PS : key 的值不可重复)

    查看全部
  • 组件可以分为全局组件和局部组件

    全局组件定义之后可以在模板里的任何地方调用

    局部组件需要通过components在实例里进行注册才能使用,vue模板里的属性使用必须要通过props来接收

    查看全部
  • vue只会对它所对应的挂载点内的内容产生作用

    挂载点里的内容称为模版

    模版可以通过template写在vue中,和写在挂载点下面的作用是一样的

    vue实例绑定到挂载点后会自动对模版和数据内容进行处理,生成要最终展示的内容


    查看全部
  • 插值表达式 {{}}   v-text v-html

    事件  v-on:click="handleClick"   简写 @click="handleClick"

    模板指令 v-bind:title=" 'dell lee' + title"  简写 :title="title"


    双向绑定

    --<input :value="content"/>   属性绑定

    <input v-model="content"/>   双向数据绑定


    计算属性

    <input v-model="firstName"/>

    <input v-model="lastName"/>

    <div>{{fullName}}</div>


    侦听器


    v-if 移除/添加 DOM v-show 显示/隐藏 v-for <li v-for="(item,index) of list" :key="index">{{item}}</li>     :key 提升渲染效率 不能重复


    子组件向外触发事件

    this.$emit('delete',this.index)


    监听子组件事件

    <todo-item @delete="handleDelete"></todo-item>


    new Vue({

    el:"#id",

    data:{

    content:"hello",

    title="this is hello world",

    firstName:'',

    lasrName:'',

    count:0,

    list:[1,2,3]


    },

    template:'',

    computed:{

    fullName:function(){

    return this.firstName + this.lastName


    }

    },

    watch:{

    firstNme:function(){

    this.count++

    }

    fullName :function(){

    this.count++

    }


    },


    methods:{

    handleClick:function(){

    this.content="world";


    },

    handleDelete:function(index){

    this.list.splice(index,i)

    }


    }


    })


    查看全部
    3 采集 收起 来源:课程总结

    2018-04-19

首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1、对Javascript基础知识已经掌握。 2、对Es6和webpack有简单了解。
老师告诉你能学到什么?
使用Vue2.0版本实现响应式编程 2、理解Vue编程理念与直接操作Dom的差异 3、Vue常用的基础语法 4、使用Vue编写TodoList功能 5、什么是Vue的组件和实例 6、Vue-cli脚手架工具的使用 7、但文件组件,全局样式与局部样式

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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