Vue基础笔记

目录

一、什么是Vue

二、Vue的优势

三、Vue的安装与使用

四、数据渲染方式

五、v-方法

六、事件方法

---

一、什么是Vue

        简而言之，“vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架“

二、Vue的优势

        1、vue作为一款轻量级框架，门槛低，上手快，简单易学。

        2、vue可以进行组件化开发，数据与结构相分离，使代码量减少，

                从而提升开发效率，易于理解

        3、vue最突出的优势在于对数据进行双向绑定，使用虚拟DOM

        4、相较于传统页面通过超链接实现页面跳转，vue会使用路由跳转不会刷新页面

        5、vue是单页面应用，页面局部刷新，不用每次跳转都请求数据，

                加快了访问速度，提升了用户体验

三、Vue的安装与使用

       安装：

                cdn在线引入

                下载引入

                npm i vue

        使用：

                 1、创建容器

                2、引入

·               3、       

new Vue({

       el："#app",

       data:{},

       mthods:{}
})

四、数据渲染方式

        模板字符串:{{msg}}

        指令：

                v-text='msg'

                v-html='msg' //解析标签

五、v-方法

        v-if：满足条件显示，否则隐藏

        v-show：满足条件显示，否则隐藏

        两者之间的区别：

                v-show：依赖display:none隐藏，适用于频繁切换

                v-if：依赖删除dom节点隐藏，适用于多条件判断

        v-for：<p v-for=(item,index) in 数据 :key='唯一标识'>item</p>

                   <p v-for=item in 数据 >item</p>

六、事件方法

        属性绑定：单向 data-->bind

        表单属性绑定：双向 data<-->model

        事件绑定：  v-on:事件名='函数/代码' 简写 @事件名='函数/代码'

        事件对象： @click=''add($event，实参)" add(e,n){}

                           @click=''add(实参)" add(n){ event.target }

        事件修饰符：@click.stop.once='' 阻止事件冒泡

                              @click.prevent='' 阻止默认事件

                              @click.once='' 只执行一次

        表单修饰符：  v-model.number='' 将字符串转换为数值

                                v-model.trim='' 去除两边空格

                                v-model.lazy='' 将input事件转换为change事件