Vuejs基本使用

一、简单使用

①首先需要实例化vue：new 出来，注意Vue大小写

②通过el绑定元素：el 选项的作用就是告诉 Vue 管理模板的入口节点（不要绑定body和html）

③data：是响应式数据，就是数据驱动视图，当数据发生改变，那么所有绑定该数据的 DOM 都会跟着改变（MVVM）

    <div id="app">
        <h1>{{ 1 + 1 }}</h1>
        <h1>{{ 'hello' + 'world'}}</h1>
        <h1>{{ foo }}</h1>
        <div>
            <span>{{foo}}</span>
        </div>
        <p>{{foo}}</p>

    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                foo:'bar'
            }
        });
    </script>

④Vue可以通过示例实例化的vue访问和更改data里的数据

二、双向数据绑定

①v-model 是 Vue 提供的一个特殊的属性，在 Vue 中被称之为指令

    <div id="app">
        <h1>{{ message }}</h1>
        <h1>{{ message}}</h1>
        <h1>{{ message }}</h1>
        <div>
            <span>{{message}}</span>
        </div>
        <p>{{message}}</p>
        <input type="text" v-model="message">
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello vuejs!!'
            }
        });
    </script>

②它的作用就是：双向绑定表单控件，双向数据绑定是指当数据发生改变， DOM 会自动更新，当表单控件的值发生改变，数据也会自动得到更新

三、对比JavaScript原生DOM操作

①示例：姓名展示

    <div class="app">
        姓: <input type="text" value="王" id="firstname"><br>
        名: <input type="text" value="五" id="lastname">
        <p id="fullname">王五</p>
    </div>
    <script>
        var firstname=document.getElementById("firstname");
        var lastname=document.getElementById("lastname");
        var fullname=document.getElementById("fullname");

        firstname.addEventListener("input",handleTextInput);
        lastname.addEventListener("input",handleTextInput);

        function handleTextInput(){
            fullname.innerHTML=firstname.value+lastname.value
        }
    </script>

②示例：点击数字自增

    <div id="app">
        <input type="number" id="num" value="0">
        <button id="btn">点击+1</button>
    </div>
    <script>
        var btnobj=document.getElementById('btn');
        var numobj=document.getElementById('num');
        var number=numobj.value;
        btnobj.onclick=function(){
            number++;
            document.getElementById('num').value=number;
        }
    </script>

③示例：简单加法计算器

    <input type="number" id="num1">+<input type="number" id="num2">
    <button id="btn">=</button>
    <strong id="ret">0</strong>
    <script>
        var num1obj=document.getElementById('num1');
        var num2obj=document.getElementById('num2');
        var btnobj=document.getElementById('btn');
        var retobj=document.getElementById('ret');
        btnobj.onclick=function(){
            retobj.innerHTML=Number(num1obj.value)+Number(num2obj.value);
        }
    </script>

四、使用Vuejs进行操作

①示例：姓名展示

    <div id="app">
        姓: <input type="text" v-model="firstname"><br>
        名: <input type="text" v-model="lastname">
        <p>{{firstname + lastname}}</p>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                firstname:'王',
                lastname: '五',
            }
        });
    </script>

②示例：点击数字自增

    <div id="app">
        <input type="number" v-model="num">
        <!-- v-on:click注册点击事件 -->
        <button v-on:click="handleIncrement">点击+1</button>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               num:0
           },
           //方法写在methods里
           methods:{
               handleIncrement:function(){
                   //this是app,app可以访问data的变量num
                   this.num++;
               }
           }
       });
    </script>

③示例：简单加减乘除计算器

    <div id="app">
        <input type="number" v-model="num1">+<input type="number" v-model="num2">
        <button v-on:click="handlefun">=</button>
        <strong>{{num3}}</strong>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               num1:"0",
               num2:'0',
               num3:'0'
           },
           methods:{
               handlefun:function(){
                   this.num3=Number(this.num1)+Number(this.num2);
               }
           }
       });
    </script>

五、结论

①vuejs的好处是不需要DOM操作(vue的内部已经处理有关DOM操作的部分)，vue就像一个很高级的模板引擎

②vue先通过new实例化，通过el绑定一个管理程序入口，把页面需要操作的DOM，都通过数据绑定的方式来处理

③在vue中，通过模板绑定的数据都是响应式的，数据一旦变化，则绑定数据的视图元素也会改变