vue的初步介绍

Vue 是一套用于构建用户界面的渐进式框架。 是一套用于构建用户界面的 渐进式框架 。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与 现代化的工具链 以及各种 支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

首先，我们来介绍一下怎么样使用vue

1、引入vue.js文件，可以到官方下载

<!-- 引入vue.js文件 -->

    <script src="./vue.js"></script>

2、创建一个vue的容器：
   

 <!-- 创建一个容器，使用Vue就可以控制这个函数-->

    <div id="app" v-cloak>

        {{msg}}

    </div>

3、构造vue的项目

     这里的new Vue()就是MVVM中的核心，它提供了双向数据绑定的能力      

  const vm = new Vue({

            el: '#app', //指定这个当前创建的vm实例控制页面上的区域，element：元素，此处的el就MVVM中的V视图层

            data: {

                // 这个对象表示我们要渲染的一个数据，此处的MVVM就是M，视图数据层

                msg: 123,

            }

        });

4、vue的属性：

 /**插值表达式和v—text的区别

             * 1、使用插值表达式内容存在闪烁的问题，但是"v-text"没有闪烁的问题

             * 2、可以在插值表达式中加入v-cloak解决插值闪烁的问题

             * 3、v-text会让其元素存在的内容给覆盖掉，插值表达式则不会

             * 

             v-html可以渲染数据中有html片段的数据，v-text和插值表达式都不行

             v-bind:可以直接将data里面的数据写入其中，简写：直接写冒号：v-bind:title="btnTitle",:title="btnTitle"

             可以实现追加的内容:v-bind:title="btnTitle+',这是追加的内容'",并且被添加的内容需要用单引号给包起来，不然会被当成变量执行，会报错

             v-on:+事件处理函数，无需操作dom元素就可以：

             add: function() {console.log('ok')},，

             对象中函数的简写形式：

             add() {console.log('ok')}

             v-on的简写形式：@
*/

  我们来做一个例子： 

<div class="cz">

        <!-- {{}}只能在元素标签内容区，不能在属性中使用-->

        <!-- 双大括号语法叫插值表达式，在插值表达式中，可以写任何合法的js表达式  -->

        <p>{{mas}}</p>

        <button>按钮</button>

        <input type="button" v-bind:title="btnTitle+',这是追加的内容'" value="按钮">

        <h2 v-text="mas"></h2>

        <input type="button" :title="btnTitle" name="" id="" :value="btn" @click="add">

        <hr>

        <p>{{weight}}</p>

    </div>

 

        const vi = new Vue({

                el: '.cz',

                data: {

                    mas: '被vue操作了',

                    btnTitle: "这个是按钮",

                    weight: 5,

                    btn: "点击增加按钮"

                },   

          这样就实现了点击按钮增减数字的功能

最后：我们来复习一下到现在学习过的内容：

 整理如下：        

   // v-html、v-text、{{}}、v-on、v-bind

            // const vm=new Vue({

            // el:#app,

            // data:{

            // 

            // },

            // method:{}

            // })

希望以上内容对你有所帮助，谢谢