Vue的基础知识

一、认识Vue

Vue图标

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

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

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

M:model(模型,表示数据);

V:view(视图,表示界面);

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

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

-------面试题:JQuery和MVvm的区别?

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

三、主流的MVvm框架有哪些?

1.angular

2.react

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

四、Vue的下载引入

1.在官网下载:https://cn.vuejs.org/v2/guide/installation.html,简单的使用不深入研究,选择下载-生产版本;

2.下载下来之后,复制文件进js文件中并引入在要使用的页面:

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

五、Vue常用的语法

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

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

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

3.:属性=" ",单向绑定:数据->视图,用于显示属性值,双引号中应当写js代码,可访问vue数据;

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

4.v-model=" ":,一般用于表单元素与VUE的双向绑定(数据<-->视图),单一的CheckBox使用v-model应该绑定boolean数据,多个checkbox使用v-model应绑定数组。

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

5.v-for,循环生成元素。

演示:生成十个多选框

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

6.<template>,虚拟辅助元素,运行后不生成任何元素。

7.v-if,依照条件生成元素,如不符合条件不会生成元素。

8.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: { //定义vue中的方法
                onover(e){
                        e.target.style.backgroundColor='red';
                    },
                onout(e){
                    e.target.style.backgroundColor='transparent';
                },
                myfun(){
                    alert(parseInt(Math.random()*10));
                }
            },
            mounted(){ //渲染完成之后的回调函数(钩子函数)
             
            }
        });
    </script>

六、在VUE对象中可以定义

data:定义文本内容,属性内容,布尔值,数组;

methods:定义普通方法;

mounted:定义VUE视图渲染完成之后执行的动作;

watch:定义对data中定义的数据变化的侦听;

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

七、vue的基本练习实例看下一篇博客

Vue图标

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值