learn_vue

尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如：

<div id="parent">

<user-profile ref="profile"></user-profile>

</div>

var parent = new Vue({ el: '#parent' })

// 访问子组件实例

var child = parent.$refs.profile

当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对应的子组件。

$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs。

子组件和父组件互相通信

          

// 负组件

<template>
  <div id="app">
<button @click="parentChange()">显示</button>
{{v}}
  <Demo @childupdate="childChange" :isVisible="v"/>
  </div>
</template>

<script>
  import Demo from '@/pages/demo/childDemo1'
  export default {
    name: 'app',
    components: {
      Demo
    },
    data () {
      return {
        v: 'hahahahah'
      }
    },
    methods: {
      parentChange () {
        this.v = true
      },
      childChange (msg) {
        this.v = msg
      }
    }
  }
  // ref="editUser"   emit  动态组件  mounted  emit参数（this.$emit('update:visible', false)）
  // http://www.jianshu.com/p/bf3bc4a9cd0d      .sync()  this.$emit('update:p_model', val)
  // 爷孙组件通信  兄弟组件传递数据
  // $child $parent
</script>

 

//子组件
<template>
  <div style="border:1px solid orange"  v-if="isVisible">   <!--:visible.sync="isVisible"-->
    我是要显示的内容
    <div @click="close">取消</div>
    <br/>
  {{isVisible}}  
  </div>
</template>

<script>
  export default {
    props: ['isVisible'],
    data: function () {
      return {
      }
    },
    methods: {
      close () {
        this.$emit('childupdate', false) // 主动触发upup方法，'hehe'为向父组件传递的数据
      }
    }
  }
</script> 

 

 

// app.vue   hello.vue

import Hello from  hello

 

// <template>用法  
  <div id="user_name_03"></div>
    <template id="children-template">
        <p>{{firstname}}{{lastname}}{{age}}</p>
    </template>

<script>
var User_03=Vue.extend({　　
  data:function(){

      return {

        firstname:'1',

        lastname:'2',

        age:3

      }

    },

    template:'#children-template'

   })

   var user_03=new User_03();

   user_03.$mount('#user_name_03')

</script>

 

子组件引用
尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如：

<div id="parent">

<user-profile ref="profile"></user-profile>

</div>

var parent = new Vue({ el: '#parent' })

// 访问子组件实例

var child = parent.$refs.profile

当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对应的子组件。

$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs。

 

new Vue({
      el: '#app',
      router,
      store,//使用store
      template: '<App/>',
      components: { App }
    })


var MyComponent = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

index.vue   http://blog.csdn.net/a1104258464/article/details/51918510

temlate ;多组件; expore default ;vuex

new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})

 

Vue 还可以显式指定单向还是双向的数据绑定：

<!-- default, one-way-down binding -->
<child :msg="parentMsg"></child>

<!-- explicit two-way binding -->
<child :msg.sync="parentMsg"></child>

<!-- explicit one-time binding -->
<child :msg.once="parentMsg"></child>

$refs

 

<button v-on:click="reverseMessage">反转字符串</button>

过滤器filter  method computed   watch  

修饰符 .lazy .number .trim

prop验证

自定义指令 directive   钩子函数