VUE写点入门的（1）

VUE写点入门的（1）

1，Vue与JQ的区别（数据驱动和DOM驱动）

基于DOM驱动，简单来说就是直接通过代码操作页面上的html元素。
举例：<div id="demo">text<div> 要是利用DOM驱动改变div里的值

JS
var demoDiv = document.getElementById('demo')//获取对应DOM节点
contentDiv.innerHtml = 'helloword'//操作DOM

JQ
  $('#demo').text('helloword')
  //依然是获取DOM，操作DOM的方式来改变对应的数据。

那么基于数据驱动 比方说Vue在开发中就有显著优势。

<div id="demo"> {{text}}<div>

 <script>
        new Vue({
            el:'#demo',//绑定对应的节点
            data() {
                return {
                    text:'helloworld'//将数据渲染到对应节点
                }
            },
        })
    </script>

这么简单的来看还是先绑定节点，再操作节点，但实际运用中我们可以直接更改text中的值来改变对应节点的数据。但是JS和JQ只能操作对应DOM，用代码来改变值。
比如如果我们要将div中的text变成 hellovue
在数据驱动中我们只需要在data中操作即可
但是要在JS和JQ中要另写或者更改代码来实现。

  $('#demo').text('hellovue ')

demoDiv.innerHtml = 'hellovue '

2，v-model如何实现双向绑定。

v-model这个指令可以体现vue数据驱动。
v-model实现了数据的双向绑定，那么什么是双向绑定呢，就是不仅data中的数据会渲染到页面上，节点中的数据改变会改变data中的数据。
那v-model是怎么实现的呢，
用input元素举例。
v-model可以拆分为v-bind绑定数据和v-on input提交表单数据两步。
即为

    <div id="app">
        <input v-model='text' >
    </div>

 <div id="app">
        <input  v-bind:value='text' v-on:input="text = $event.target.value" >
    </div>

基于 v-model我们可以做一个小东西方便理解数据的双向绑定。

   <input v-model.number='Num_a' >+ <input v-model.number='Num_b' >=<div>{{Num_b+Num_a}}</div>
   //这样我们就可以得到一个值的加法计算

我们也可以利用computed来监听数据变化

 <input v-model.number='Num_a' >+ <input v-model.number='Num_b' >=<div>{{sum}}</div>
  computed: {
                sum:function(){
                    return this.Num_a+this.Num_b
                }
            },

3，v-for 模版引擎循环渲染

v-for指令就是将对应数组内容便利循环渲染到页面
首先在data里定义个数组

data() {
                return {
                    Num_a:0,
                    Num_b:0,
                    list:['vue','react','Angular']
                }
            },

然后进行循环渲染

 <div v-for='(item,i) in list'>{{i}}---{{item}}</div>

这样就能得到数组里每一个值（item）和每一个下标（i）并将它按序渲染到页面
甚至我们可以去遍历一个数字

  <div v-for='(item,i) in 3'>{{i}}---{{item}}</div>

这时我们得到的item是123 得到的i是012.

3，v-on：事件绑定。

简单的写一点东西，帮助理解数据双向绑定。

<input type="text" v-model='name'>

<button v-on:click='add'>添加</button>

 methods: {
                add(){
                    console.log(this.name)
                    this.list.push(this.name)
                }
            },

这样我们就能通过input点击事件改变data数据从而改变渲染。