Vue的基础知识

最新推荐文章于 2022-10-10 17:21:31 发布

婷婷T

最新推荐文章于 2022-10-10 17:21:31 发布

阅读量189

点赞数 1

分类专栏： vue 文章标签： vue MVvm框架ｖｕｅ下载ｖｕｅ的常用语法ｖｕｅ对象

本文链接：https://blog.csdn.net/qq_41629684/article/details/103596610

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、认识Vue

Vue图标

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

二、Vue的设计思想－基于MVvm框架

Ｍ：model(模型，表示数据)；

V：view(视图，表示界面)；

vm:view model(视图模型，用于模型和数据之间的转换)；

它的基本思想是数据驱动视图，也就是视图的改变是通过数据的改变实现的，要改变界面仅需改变数据，无需DOM操作。

－－－－－－－面试题：JQuery和MVvm的区别？

JQuery是基于dom操作的，易理解，是符合习惯的传统框架，无需ＤＯＭ操作。MVvm是数据驱动的，利用内存虚拟ＤＯＭ技术，在内存生成结构后，一次性生成界面。

三、主流的ＭＶvm框架有哪些？

1.angular

2.react

3.vue(中国尤雨溪主导开发)

四、Vue的下载引入

１．在官网下载：https://cn.vuejs.org/v2/guide/installation.html，简单的使用不深入研究，选择下载－生产版本；

２．下载下来之后，复制文件进js文件中并引入在要使用的页面：

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

五、Vue常用的语法

１．每个 Vue 应用都需要通过实例化 Vue 来实现。

<script src="js/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app', //vue渲染到元素(element),根据id渲染
            data: { //定义vue中的数据
                
            },
            methods: { //定义ｖｕｅ中的方法
                
            },
            mounted(){ //渲染完成之后的回调函数（钩子函数）
               
        });
</script>

2.{{}}:文本插值,数据绑定最常见的形式。单向绑定：数据－－>视图，用于在空白处显示vue数据，可写js代码（不能用于属性）；

３．:属性＝" ",单向绑定：数据－>视图,用于显示属性值，双引号中应当写js代码，可访问vue数据；

<p :title="message">{{ message }}</p>

４．v-model=" ":，一般用于表单元素与ＶＵＥ的双向绑定（数据<－－>视图），单一的ＣｈｅｃｋＢｏｘ使用v-model应该绑定boolean数据，多个checkbox使用v-model应绑定数组。

<input type="checkbox" v-model="ok">{{ok}}
<input type="checkbox" value="1" v-model="ids">

５．v-for，循环生成元素。

演示：生成十个多选框

<template v-for="n in nums">
            <input type="checkbox" :value="n" v-model="ids">{{n}}
</template>

６．<template>，虚拟辅助元素，运行后不生成任何元素。

７．v-if，依照条件生成元素，如不符合条件不会生成元素。

８．v-show，依照条件显示元素，若不符合条件不会显示元素，无论是否显示元素始终存在。

9.@eventName,用于事件与处理函数的绑定，如@click,@mouseover,@mouseout

注意：有三种形式@click="myfun" 或v-on:mouseover="onover($event)" 或@mouseout="onout($event)"

<div style="display:flex;flex-direction: row;" >
<div  @click="myfun" v-on:mouseover="onover($event)" @mouseout="onout($event)" v-for="n in 10" style="height: 80px;width:30px;border:1px solid blue;margin:5px;">{{n}}</div>
  </div>
<script src="js/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app', //vue渲染到元素
            data: { //定义vue中的数据
             
            },
            methods: { //定义ｖｕｅ中的方法
                onover(e){
                        e.target.style.backgroundColor='red';
                    },
                onout(e){
                    e.target.style.backgroundColor='transparent';
                },
                myfun(){
                    alert(parseInt(Math.random()*10));
                }
            },
            mounted(){ //渲染完成之后的回调函数（钩子函数）
             
            }
        });
    </script>

六、在ＶＵＥ对象中可以定义

data:定义文本内容，属性内容，布尔值，数组；

methods:定义普通方法；

mounted:定义ＶＵＥ视图渲染完成之后执行的动作；

watch:定义对ｄａｔａ中定义的数据变化的侦听；

computed:定义计算属性，即通过其他属性计算得到的属性值，会随着其他属性变化而变化。

七、ｖｕｅ的基本练习实例看下一篇博客

Vue图标