A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

1、响应式属性和方法
  每个Vue实例都会代理其data对象里所有的属性。
      var data={a:1}
      var vm=new Vue({data:data})   
      vm.a===data.a // -> true  设置属性也会影响到原始数据
      vm.a=2
      data.a        // -> 2     ... 反之亦然
      data.a=3
      vm.a          // -> 3
  即:都可以使vm.xxx这种方式获取和修改实例属性。
  注意:
    只有这些被代理的属性是响应的
    如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
    那么这种情况的话,可以使用VueJs的vm.$xxx的方式来修改实例属性,这同样会触发视图更新,响应式的改变

2、生命周期钩子
  生命周期钩子包括created、beforeCompile、compiled、ready、beforeDestroy、destroyed
  钩子的this指向调用它的Vue实例
  我们可以在钩子的方法中使用this来指代当前实例。
  Vuejs中没有控制器的概念,组件的自定义逻辑可以分割在这些钩子里面

3、插值
  单词插值,只有在第一次渲染时候渲染值,之后不会随实例属性值的变化而改变
  插入原始HTML,这种方式内容以 HTML 字符串插入,数据绑定将被忽略
  如果需要复用模板片断,应当使用partials
  注意:
    在网站上动态渲染任意HTML是非常危险的,因为容易导致XSS攻击

4、v-show 和 v-if的选择
  v-if:
    v-if是惰性的,如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)
  v-show:
    相比之下,v-show简单得多——元素始终被编译并保留,只是简单地基于css切换

6、prop数据绑定
  prop默认是单向绑定
    当父组件的属性变化时,将传导给子组件,但是反过来不会
    这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解
  解决办法:
    使用.sync或.once绑定修饰符显式地强制双向或单次绑定
  即:
    1.单向绑定(prop数据默认为单向绑定)
        <child :msg="parentMsg"></child>
    2.双向绑定
        <child :msg.sync="parentMsg"></child>
    3.单次绑定
        <child :msg.once="parentMsg"></child>

7、组件的父链
  子组件可以用this.$parent访问它的父组件
  根实例的后代可以用this.$root访问它
  父组件有一个数组this.$children,包含它所有的子元素

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马