Vue框架和Vue3简介

一.什么是Vue?

Vue是一款前端用来构建用户界面渐进式框架,是一个Javascript 的MVVM模式的库,可以提高前端开发效率。

特点:

1.双向数据绑定:vuejs会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。这也是vuejs最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。

2..组件化:vue通过组件,把一个单页应用中的各种模板拆分到一个一个单独的组件中,我们
只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数就叫做组件的属性),然后再分别写好各种组件的实例(填坑),整个应用就完成了。

3.视图,数据和结构的分离,使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作。

二.Vue的使用

使用方式:

1.传统方式:在html页面导入vue库
2.使用架构工具(专业开发):vue cli(vue脚手架),vite(新一代的架构工具)

安装途径:

1.官网下载:在Vue.js的官网上直接下载vue.js,并在.html中通过

Vue3:
     

三.Vue具体应用过程

(1)引入Vue库
(2)创建视图(View)
(3)创建模型(Model)
(4)创建Vue示例,将模型(Model)挂载到Vue上去--实现ViewModel双向数据绑定

四.模板与Vue指令

模板是帮助用户通过数据来驱动视图的渲染

模板的作用:

        (1)模板的插值:是通过使用"{{}}"运算符将模型中的数据插入到视图中
        (2)插入标签:使用v-html指令
        (3)插入普通文本:使用v-text指令
    注意:在Vue中使用v-开头的都是Vue指令。

Vue的指令:是带有v-前缀的特殊属性,通过属性来操作元素

模板的条件渲染:

        渲染:渲染就是将模型中的数据显示到视图中
        条件渲染就是根据表达式的值来决定是显示还是隐藏内容。
    (1)v-if:
    (2)v-show:
    (3)v-if和v-show的区别:
        a.实现方式不同:v-if底层采用DOM的appendChild方法创建一个元素添加到页面中,
                        v-show是通过css的display属性来控制是否显示元素。
        b.加载性能:v-if比较快,v-show比较慢。
        c.切换开销:v-if的开销大,v-show开销小。
    循环渲染:通过v-for指令将数组或集合中的数据渲染到视图中

vue内置指令:

 (1)v-bind:将页面元素的属性和模型中变量进行绑定
        

 (2)v-on:给元素绑定事件
        
            a、绑定一个事件
            
              


               
            b、绑定多个事件:
            
              
 

 (3)v-model:将input的值和模型中的变量进行绑定。实现数据与视图的双向绑定
        
    

你可能感兴趣的:(vue,vue.js)