为了账号安全,请及时绑定邮箱和手机立即绑定
  • 上面的div标签称为vue实例的挂载点


    660649e5000105b606400360.jpg
    查看全部
  • El指的是Vue实例与哪一个节点绑定


    660648610001129b06400360.jpg
    查看全部
  • 局部组件调用需要做一个声明


    660632eb0001f67b06400360.jpg
    查看全部
  • 通过vue.component定义的组件称为全局组件


    6606326b0001ed3c06400360.jpg
    查看全部
  • 实现V-bind数据项的绑定


    66060b2e00019eb406400360.jpg
    查看全部
  • 挂载点:

          vue实例的里面el属性对应的id节点,vue只会处理挂载点里面的内容

    模版:

            指挂载点里面的内容

    写法:

    1):写在挂载点里面

    2):使用template属性写在vue的实例里面

    挂载点,模版,实例之间的关系:

           在vue的实例里面指定一个挂载点,然后写上模版,vue就会自动结合

    模版和数据生成最终想展示的内容并放在挂载点里面

    查看全部
  • 模板指的就是挂载点里面的内容

    查看全部
  • data:数据全部放data里面

    查看全部
  • el:指绑定哪个元素!

    查看全部
  • my hvr. v
    61
    查看全部
  • nvm r u know fecb
    kebmHbep canceled hh.hh hhh
    查看全部
  • rbr ju$ts
    查看全部
  • aqa3376336 fewwwgg
    阿拉啊啊-- -
    644
    叫我。a吗3 =-6就@。亚奥就是阿拉
    ==爱上了-/4@按时睡觉%%*466%na
    aasaaaaasoso.-
    04#
    #_##mqaaw
    查看全部
    0 采集 收起 来源:课程介绍

    2023-06-14

  • )丫㇏:‘冫济141′º 疒㇏0
    查看全部
  •     <div id="root">

            <div>

                <input v-model="inputValue" />

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

                <button @click="deleteValue">删除</button>

            </div>

            <ul>

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

                    {{item}}

                </li>

            </ul>

        </div>

        <script>

            new Vue({

                el: "#root",

                data: {

                    inputValue: '',

                    list: []

                },

                methods: {

                    addValue: function() {

                        this.list.push(this.inputValue)

                        this.inputValue = ''

                    },

                    deleteValue: function() {

                        this.list.pop()

                    }

                }

            })

        </script>

    查看全部
  • <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>TodoList</title>

        <script src="./vue.js"></script>

    </head>

    <body>

        <div id="root">

            <div>

                <input v-model="inputValue" />

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

            </div>

            <ul>

                <todo-item 

                    v-for="(item, index) of list" 

                    :key="index"

                    :content="item"

                    :index="index"

                    @delete="handleDelete"

                >

                </todo-item>

            </ul>

        </div>  

        <script>

            Vue.component('todo-item', {

                props: ['content', 'index'],

                template: '<li @click="handleClick">{{content}}</li>',

                methods: {

                    handleClick: function() {

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

                    }

                }

            })

            new Vue({

                el:"#root",

                data: {

                    inputValue: '',

                    list: []

                },

                methods: {

                    handleSubmit: function() {

                        this.list.push(this.inputValue)

                        this.inputValue = ''

                    },

                    handleDelete: function(index) {

                        this.list.splice(index, 1);

                    }

                }

            })

        </script>

    </body>

    </html>

    查看全部
  • scoped 表示样式只针对该组件,一般不会去掉,否则全局都会同名调用。

    查看全部
  • 父组件定义的模板,模板会显示父组件list的数据

    创建子组件todo-item,传递名为content和index参数对应item,index的值。

    子组件props声明传递的参数,

    当点击的时候handleClick,this.$emit会向外触发一个名为'delete'的事件,事件的值为this.index,

    父组件创建子组件的时候@delete监听该事件,当触发delete事件的时候会触发父组件handleDelete方法。

    查看全部
  • 每一个Vue.component组件都是一个Vue的实例

    如果实例没有定义template模板的方法,那么就寻找el挂载点根标签作为它的模板

    Vue实例就是一个组件,每个组件也是一个Vue。

    每一个主键中都可以绑定@click点击事件和添加methods方法

    查看全部
  • Vue.component 定义全局组件

    : content='itemxx'  传递值参数

    props: ['content'],  声明接收名字为content 的参数,不然{{content}} 无法接收传递的参数

    查看全部
  • Vue.component() 定义全局组件

    定义局部主键

    var TodoXxx = {

      template: '<li>xxx</li>'

    }

    需要再Vue的components中声明注册,否则无法调用

    查看全部
首页上一页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下载
官方微信
友情提示:

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