vue的深入理解

1.vue的初步认识

<div id = 'vue_det'>

<div>

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("<br>") // true

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

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

2.使用new vue给标签赋值

<div id="vueAndMode">
    <p>{{content}}</p>
</div>

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

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

3.v_bind的使用及作用

<div id="bind">
    <input v-bind:value = 'name'/>
</div>
</body>
<script>
    new Vue({
        el:'#bind',
        data:{
            name:"109010"
        }
    })
</script>

为什么要用到v_bind的?

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

4.v-mode的使用及作用

v-mode可以双向传递数据

<div id="v-mode">
    <input v-model="price" placeholder="请输入密码"  value="{{data.price}}">
   <p>{{price}}</p>
</div>

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

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

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

<input v-model="price"   value="{{data.price}}">相当于

<input v-bind:value="price" v-on:input="price = $event.target.value" />

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

回到上面两个例子，该例子中v-mode跟上一个v-bind的赋值对比，实现了同样的效果但是写法不一样，看<input v-bind:value=' ' 和value ={{data.price}},写法，v-bind通过v-bind绑定数据，从而获取data的数据，v-mode可以把new vue中data数值给input中的value，因为v-mode是基于v-bind实现的，但是如果input的值发生了变化,price:'hhh'的值也会变化成input的value值，两者是相互的

5.props的作用及使用

<div id="appprop">
    <child message="通过 Prop 向子组件传递数据！!"></child>
</div>

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

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

5.1 props第二个例子

<!-------3333v-bind 来动态传递 prop------->
<div id="div12">  <!-------忽略div12,重视blog-post组件和下面Vue.component相关连,实际上两个是组合的
                    ，new vue data获取div12，通过v-bind把new vue的数据绑定到组件中，下面就是读取数据------->
    <blog-post v-for="z_data in z_datalist"  v-bind:z_post="z_data"></blog-post>
</div>

  Vue.component('blog-post', {
      props: ['z_post'],
      template: `
  <div class="blog-post">
    <h3>{{ z_post.title }}</h3>
    <div v-html="z_post.name"></div>
    <h5>{{ z_post.sex }}</h5>
  </div>
`
  })

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‘]获取<blog-post><blog-post/>中的z_post值，而blog-pos组件算属于new vue下的id为div12的字标签，new vue中的data可以向所有子标签传递数据，即把值给与了z_post ,通过v-bind：z_post和props的桥接给了template