vue.js @慕课网

还想再吃一口
209 阅读1分钟

2-7 子组件与父组件的绑定




    TodoList
    


    

        

            
            提交
        

            
    
                
                            
                
            

    


<script>
    var TodoItem = {
        props:['content','index'],
        template:"<li @click='handleItemClick'>{{content}}</li>",
        methods:{
            handleItemClick:function(){
                this.$emit('delete',tis.index)//点击子组件时，触发delete事件
            }
        }
    } //局部组件

    var app = new Vue({
        el:'#root',
        conponents:{
            TodoItem:TodoItem
        },//在实例中注册
        data:{
            todoValue:'',
            list:[]
        },
        methods:{
            handleBtnClick:function(){
                this.list.push(this.todoValue)
                this.todoValue = ''
            },
            handleItemDelete:function(index){
                this.list.splice(index,1)=''
            }


        }
    })
</script>

第二章总结&对vue的基本认识

  1. 所有东西都是响应式的
  2. 一个vue的项目是由许多vue的实例组成的
  3.  v-model
    实现**表单**输入和应用状态间的双向绑定
  4. 组件化应用：
  • 从父作用域将数据传到子组件
  • 子单元通过prop与父单元进行联系
  1. Vue实例
  • vm变量来表示Vue实例
  • 只有实例被创建时data中存在的属性才是响应式的
  • 使用Object.freeze()，会阻止修改现在的属性
  • 实例属性与方法都有前缀**$**，以便与用户自定义的属性区分
  1. 实例生命周期钩子
  • 初始化过程：将实例挂载到DOM并在数据变化时更新DOM，同时在这一过程也会运行一些生命周期钩子函数，这给用户在不同阶段添加自己的代码的机会
  • 如：created钩子可以用来在一个实例被创建之后执行代码
  • mounted、updated、destoyed生命钩子的this上下文指向调用他们的Vue实例
  • 生命周期图示
  1. 模板语法
  • 将DOM绑定至底层Vue实例的数据
  • 插值
    • 文本：使用**{{}}**，通过 v-once指令，也可以进行一次性插值，当数据改变时，插值处的内容不会更新
    • 原始HTML

这里的** < span > **的值会替换成属性值rawHtml

    • 特性：{{}} 语法不能作用于html特性上，遇到这种情况时使用v-bind指令
    • 使用JS表达式：每个绑定都只能包含单个表达式
  • 指令（带有**v-**前缀，当表达式的值改变时，将其产生的的连带影响响应式地作用于DOM）
    • 参数
      • 在这里href是参数，告知v-bind指令将该元素的href特性与表达式url绑定

      • v-on指令，用于监听DOM事件

    • 修饰符：以 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定 例如，.prevent 修饰符告诉v-on指令对于触发的事件调用event.preventDefault()

    • 缩写： v-bind --> :
      v-on-->@
avatar
文章
阅读
粉丝