vue的初步介绍

2021-10-07 17:34:55 阅读：145 来源： 互联网

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:{}

// })

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

标签：el,vue,插值,text,介绍,初步,Vue,new
来源： https://blog.csdn.net/ygpigu/article/details/120638584

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue的初步介绍