vue的深入理解

1.vue的初步认识

var data = { site: "csdn", url: "www.runoob.com", alexa: 10000}

var vm = new Vue({

el: '#vue_det',

data: {}

})

document.write(vm.$data === data) // true

document.write("
") // true

document.write(vm.$el === document.getElementById('vue_det')) // true

new vue可以理解为存入不同类型的对象一个集合，在该例子中，存入了div的对象即vm.$el，也存入了data，例如vm.$data

2.使用new vue给标签赋值

    
{{content}}

new Vue({
    el:'#vueAndMode',
    data:{
        content:"标题"
    }
})

new vue通过el得到父标签div,可给所有的子标签赋值

3.v_bind的使用及作用

为什么要用到v_bind的?

使用了v-bind 之后才可以才能给input的value ,a中href赋值,如果没有使用者不能给与这些属性赋值，{{}}只适合赋值标签的中间例如

{{}}

4.v-mode的使用及作用

v-mode可以双向传递数据

    
   
{{price}}


new Vue({
    el: '#v-mode',
    data: {
          price: 'hhh'
      }
});

v-mode和v-bind对比及区别?

v-mode实际上就是基于v-bind的，但是v-mode会比v-bind多一些功能，

相当于

要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把最新的value传递给 price。

回到上面两个例子，该例子中v-mode跟上一个v-bind的赋值对比，实现了同样的效果但是写法不一样，看

5.props的作用及使用

Vue.component('child', {//child模板通过props桥接把div中child获取来，并在template利用
    // 声明 props
    props: ['message'],
    template: '{{ message }}'
})
new Vue({
    el: '#appprop'
})

props的作用要和组件合起来使用，因为props就是向子组件（template）传递数据的

5.1 props第二个例子

  Vue.component('blog-post', {
      props: ['z_post'],
      template: `
  

    
{{ z_post.title }}
    

    
{{ z_post.sex }}
  
`
  })

new Vue({
    el: "#div12",
    data: { z_datalist: [
        { id: 1, title: '个人信息' ,name:'小李',sex:'男'}, { id: 2, title: '个人信息' ,name:'小h红',sex:'女'}, { id: 3, title: '个人信息' ,name:'小明',sex:'男' }
        ]
    }
})

该例子的业务过程

 

首先 vue.compant通过props:[‘z.post‘]获取中的z_post值，而blog-pos组件算属于new vue下的id为div12的字标签，new vue中的data可以向所有子标签传递数据，即把值给与了z_post ,通过v-bind：z_post和props的桥接给了template