为了账号安全,请及时绑定邮箱和手机立即绑定
  • (1):父组件通过prop向子组件传值 子组件获得父组件传来的内容和索引。
    (2):子组件通过$emit向父组件抛出触发事件名称(delete)和触发事件的list索引值。
    (3):父组件通过监听对应事件名称(@delete)触发函数handleDelete。函数通过子组件抛出的索引值对应删除list

    父子组件之间的交互:

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

    子组件向父组件传递数据:通过发布订阅模式


    查看全部
  • v-html 会被转义   v-text  不会;{{}} 插值表达式,vue不面向DOM编程,面向数据。

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

    查看全部
    2 采集 收起 来源:课程介绍

    2018-06-19

  • <!--以下短短38行代码竟然暗藏一个错误,若有兴趣不烦来找找。注意:仅仅只需修改一个字母即可让程序运行通过哦(并非低级的拼写错误)-->

    <html>

    <head>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    </head>

    <body>

    <div id="app">

    <div>

    <input v-model='msg'>

    <button @click='send'>发送</button>

    </div>

    <ul>

    <sendMsg v-for='item of list' :isay='item'>

    </sendMsg>

    </ul>

    </div>

    <script>

    var myMsg={

    props:['isay'],

    template:'<li>{{isay}}</li>',

    }

    new Vue({

    el:'#app',

    components:{

    sendMsg: myMsg

    },

    data:{

    msg:'',

    list:[],

    },

    methods:{

    send:function(){

    this.list.push(this.msg);

    this.msg='';

    }

    }

    });

    </script>

    </html>


    查看全部
  • <div id="app">

    <p>{{ message }}</p>

    </div>

    <div id="app-2">

    <span v-bind:title="message">

                   鼠标悬停几秒钟查看此处动态绑定的提示信息!

             </span>

    </div>


    <div id="app-3">

    <p v-if='seen'>

    xianzaikandaowola

    </p>

    </div>

    <div id="app-4">

    <ol>

    <li v-for="todo in todos">

    {{todo.text}}

    </li>

    </ol>

    </div>

    <div id="app-5">

    <p>{{message}}</p>

    <button v-on:click="clickevent">点击</button>

    </div>

    <div id="app-6">

    <p> {{message}}</p>

    <input type="text" v-model='massage' >

    </div>

            <div id="app-7">

    <h1 v-text='number' v-on:click="clickIt"> <h1>

    </div>

            <script type="text/javascript">

    new Vue({

    el: '#app',

    data: {

    message: 'Hello js!'

    }

    })

    var app2 = new Vue({

    el: '#app-2',

    data: {

    message: '页面加载于 ' + new Date().toLocaleString()

    }

    })


    var app3 = new Vue({

    el: '#app-3',

    data: {

    /*    seen:false */

    seen: true

    }

    })

    var app4 = new Vue({

    el: '#app-4',

    data: {

    todos: [

    { text: "no1" },

    { text: "no2" },

    { text: "no3" }

    ]

    }

    })

    /* 添加新内容 */

    app4.todos.push({ text: "no4" }, { text: "no5" })


    var app5 = new Vue({

    el: '#app-5',

    data: {

    message: 'hello'

    },

    methods: {

    clickevent: function() {

    this.message='第五:'+this.message.split('').reverse().join('')

    }

    }

    })


    var app6 = new Vue({

    el: "#app-6",

    data: {

    message: '第六:'+'hi'

    }

    })

    //替换

    var app7=new Vue({

    el:"#app-7",

    data:{

    number:'第七:'+12345

    },

    methods:{

    clickIt:function(){

    this.number='第七:'+112

    }

    }

    })

    </script>

            

            


    查看全部
  • 新建Vue实例:

    new Vue({
        el:'#root',
        template:'<h1>hello {{msg}}</h1>',
        data:{
            msg:"world"
        }
    })

    这里面的el叫做挂载点,它规定了vue实例挂载在哪一个html元素上,挂载点外的元素不可使用vue语句

    template叫做模版,可以把已经挂载了Vue实例的html元素内的结构直接放到这里面,这和在html元素里编写时一样的;

    data中存放的就是被挂载的html元素内所有需要的数据,可以使用{{双大括号}}来做插值。

    查看全部
  • v-on:click  =  @click

    v-bind:title = :title

    查看全部
  • 计算属性与侦听器:

    <div id="root">

      姓:<input v-model="firstName">//v-model双向数据绑定

      名:<input v-model="lastName">//v-model双向数据绑定

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

      <div>{{count}}</div>

    </div>

    实例:

      new Vue({

        el:"#root",

        data:{

          firstName:'',

          lastName:'',

          count:0

        },

        computed:{//计算属性,只有数据发生变化才会重新计算,未发生变化用之前计算结果的缓存值来展示

          fullName:function(){

            return this.firstName+' '+this.lastName

          }

        },

        watch:{//侦听器,侦听数据是否发生变化

          fullName:function(){

            this.count++

          }

        }

      })


    查看全部
  • 在之前使用new Vue定义一个Vue实例(组件)时,数据存放在data对象里,代码如下:

    new Vue({
        el: '#app',
        data: {
            msg: 'hello vue'
        }
    })

    但使用vue-cli时,存放数据的data属性不再是对象了,而是一个函数,函数的返回值是一个对象。

    export default {
        data: function() {
            return {
                msg: 'hello vue'
            }
        }
    }

    使用ES6语法简化为:

    export default {
        // data () {} 表示data是一个函数
        data () {
            return {
                msg: 'hello vue'
            }
        }
    }


    查看全部
  • <template>...</template>标签内部只允许有一个根标签(如div),即所有的标签要包裹在一个根标签内,代码如下:

    <template>
        <div>
            <div>...</div>
            <ul>...</ul>
            ...
        </div>
    </template>


    查看全部
  • 子组件向外部进行一个发布(触发事件),那么父组件在模板里创建子组件的时候,同时可以监听子组件触发的事件

    查看全部
  • 父/子组件如何通信:

    • 父组件向子组件传值是通过在组件上绑定属性的方式,如:content、:index这两个属性

    • 子组件向父组件传值是通过发布-订阅模式,子组件通过this.$emit('事件', '值')方法触发事件传递值,父组件监听对应事件可以获取到传递过来的值

    查看全部
  • 每一个Vue组件都是一个Vue实例,也可以说每一个Vue实例都是一个Vue组件。对于代码中的new Vue(...)这个大的Vue实例来说,它里面如果没有定义template属性的话,那就会把挂载点标签(<div id="app">...</div>)中的所有DOM标签当做template(模板)。

    查看全部
    • 使用Vue.component()方法来定义Vue的组件。

    • 每一个Vue的组件都是一个Vue的实例,一个Vue项目就是由很多Vue的实例组成。

    • 既然每一个Vue的组件都是一个Vue的实例,那么在定义组件时也可以有data、template、methods等属性

    查看全部

举报

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下载
官方微信
友情提示:

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