欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

对于前端框架的基本认识(vue)

程序员文章站 2022-04-12 10:34:43
...

对于前端框架的基本认识(vue)

框架

framework，是别人开发一个网站的半成品，让程序开发人员能够集中精力在业务逻辑。

1.vue框架

(1)基本介绍

官网：cn.vuejs.org

渐进式JavaScript 框架

作者：尤雨溪

https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470?fr=aladdin

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue框架的核心：

数据驱动页面、组件化开发

(2)特性

指令系统

虚拟DOM

路由

devtools

生态系统繁荣

(3)缺点

兼容性不好（不支持ie8及以下的浏览器）

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

错误提示不友好

(4)安装

①外部链接引入

生产版本

​ 体积小，没有错误提示

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

开发版本

​ 有错误提示

[color=#FF6600][/color]

②npm安装

npm install vue

2.vue基本使用

(1)引入vue.js

注意是开发版本

(2)实例化vue

(3)设置挂载点，并在挂载点内使用初始数据

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue安装</title>
    <!-- 第一步：引入vue.js -->
    <!-- 直接引入外部链接 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 第三步：设置挂载点（vue作用范围） -->
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <script>
        console.log(Vue)//Vue是一个构造函数
        // 第二步：实例化vue
        let app = new Vue({
            el:"#app",//querySelector
            data:{//初始数据
                msg:"hello vue.js"
            }
        });
        console.log(app)//app是实例化的对象
    </script>
</body>
</html>

(4)注意事项

①挂载点要使用id选择器

②挂载点不能是html或者body标签

vue.js:634 [Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.

3.指令系统

vue框架是一个声明式框架，想要使用变量或者函数时要先定义对应的变量或者函数

vue提供了很多指令来实现原生js或者jquery能实现的DOM操作

vue提供的指令一般都是写在开始标签内，作为一个属性使用。

<标签名 v-指令 ></标签名>

1.内容展示

(1)文本插值语法

{{ }} 文本插值语法，用来展示内容或者执行单行js代码

示例代码：

<div id="box">
        <h2>{{ age }}</h2>
        <h2>{{ age >=18 ?  "已成年" : "未成年"}}</h2>
        <p>{{ num1 * num2 }}</p>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                age:17,
                num1:100,
                num2:33
            }
        })
    </script>
(2)v-text

v-text可以实现和文本插值相似的功能，但是它只能写在标签的开始标签中，如果标签内部有内容，则会被v-text对应的变量值进行覆盖。

<h2 v-text="name"></h2>
<script>
    new Vue({
        el:"#box",
        data:{
        	name:"小明"
        }
    })
</script>
(3)v-html

如果要解析的内容中包含了html标签，用v-text和文本插值语法都会把内容原样展示，使用v-html就可以解析html标签。

<h2 v-html="name"></h2>
<script>
    new Vue({
        el:"#box",
        data:{
        	name:"<b>小明</b>"
        }
    })
</script>

文本插值、v-text、v-html

相同：都可以在标签内展示内容

不同：使用场景不同：

​ 一段内容中，只有某一部分是需要解析变量来展示内容时，使用文本插值语法

​ 内容固定不需要改变（没有html标签）时用v-text

​ 内容固定不需要改变（有html标签）时用v-html

2.条件判断

(1)v-if、v-else、v-else-if

语法：

<标签 v-if="表达式或者布尔值" ></标签>

当条件表达式成立时或者布尔值的值为true时，指定的标签会在页面结构中存在，否则就不存在。

注意：v-else、v-else-if只能依存于v-if而存在

示例代码

<div id="container">
    <p v-if="isok">已同意</p>
    <p v-else>未同意</p>
    <hr>
    <p v-if="age >=18">已成年</p>
    <p v-else>未成年</p>
    <hr>
    <p v-if="score >= 60 && 70 > score">及格</p>
    <p v-else-if="score >=70 && 80 > score">良好</p>
    <p v-else-if="score >=80 && 100 >= score">优秀</p>
    <p v-else>不及格</p>
</div>
<script>
    new Vue({
        el:"#container",
        data:{
            isok:false,
            age:15,
            score:5
        }
    })
</script>
(2)v-show

v-show也可以实现和v-if相同的功能，让页面展示指定的标签。

不同的是，v-show的表达式或者布尔值为false时，指定的标签也会在页面结构中存在，不过添加了一个display:none属性来隐藏了这个标签。

它是真正的惰性加载，如果页面结构中有内容要频繁的切换展示状态时，要使用v-show。

示例代码：

<p v-show="isok">已同意</p>
<p v-show="!isok">未同意</p>

3.事件绑定

v-on

语法格式：

<标签 v-on:事件名="执行代码或者函数名" ></标签>

函数使用：

如果要执行的代码只有一行，可以不需要定义函数，直接在v-on:事件名="执行代码"中写执行代码，如果要执行的代码不止一行，需要使用自定义函数。

在vue中自定义函数要写在methods配置选项中，然后在事件名后调用函数

<button v-on:click="changeStr('郑州')"></button>
<button v-on:click="changeStr('北京')"></button>
<button v-on:click="changeStr('中国')"></button>
<script>
	new Vue({
		el:"#app",
		data:{
			str:"郑州"
		},
		methods:{
            changeStr:function(val){
                this.str = val;
            },
			changeStr2(val){
				this.str = val;//此处的this就是vue实例本身
			}
		}
	})
</script>

函数参数

(1)在调用函数时，如果没有显式的传递参数，在定义函数中又有一个形参，那么此时这个形参是事件对象。

<div class="box" v-on:click="boxClick"></div>
<script>
        new Vue({
            el:"#app",
            methods:{
                boxClick(ev){
                    console.log(ev)//此时ev就是事件对象
                }
            }
        })
</script>

(2)在调用函数时，显式的传递了参数，如果定义函数时形参参数数量比实参参数数量多时，那么多余的参数是undefined

如果在函数中接收普通参数的同时，还想使用事件对象，那么需要在调用函数时，显式的传递一个$event来代表事件对象。

<div class="box" v-on:click="boxClick(100,$event)"></div>
<script>
    new Vue({
        el:"#app",
        methods:{
            boxClick(num,e){
                console.log(num)//此时num是数字100
                console.log(e)//此时e就是事件对象
            }
        }
    })
</script>

v-on:事件名 可以 简写成 @事件名

<div class="box" @contextmenu="menu"></div>
<script>
    new Vue({
        el:"#app",
        methods:{
            menu(event){
                console.log(event)//此时event就是事件对象
            }
        }
    })
</script>

4.属性绑定

v-bind:属性名，可以简写成 :属性名

属性名可以是系统内置的属性（id、class等），也可以是自定义属性

当需要让页面中的某个标签的属性发生变化时，要使用属性绑定指令，如果不需要让属性进行改变，则不需要使用属性绑定。

(1)普通属性

示例代码：

<div id="app">
    <img v-bind:src="imgsrc" alt="没有找到任何图片"/>
    <button @click="changeImg">切换</button>
</div>
<script>
new Vue({
    el:"#app",
    data:{
    	imgsrc:"图片地址1"
    },
    methods: {
        changeImg(){
        	this.imgsrc = "图片地址2"
        }
    }
})
</script>
(2)动态样式绑定

①style

  • 对象

    <div id="box">
<!-- <div style="width:200px;height:200px;background-color:blue;"></div> -->
    <div :style="styleColor"></div>
    <button @click="changeColor('blue')">蓝色</button>
    <button @click="changeColor('red')">红色</button>
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            styleColor:{
            	backgroundColor:'blue'
            }
        },
        methods: {
            changeColor(color){
                this.styleColor = {
                	backgroundColor:color
                }
            }
        },
    })
</script>

  • 变量

<div :style="{backgroundColor:bgColor}"></div>
<button @click="changeColor('blue')">蓝色</button>
<button @click="changeColor('red')">红色</button>
<script>
    new Vue({
        el:"#box",
        data:{
        	bgColor:'red'
        },
        methods: {
            changeColor(color){
            	this.bgColor = color;
            }
        }
    })
</script>
  • 数组
<div :style="[styleColor,styleFont]">vue动态样式绑定</div>
<script>
    new Vue({
        el:"#box",
        data:{
            styleColor:{
            	backgroundColor:'blue'
            },
            styleFont:{
                color:"#fff",
                fontSize:"30px"
            }
        }
    });
</script>

②class

  • 对象
<div :class="{red:true,yellow:true}"></div>

{ 类名:表达式或者布尔值 }

当表达式的结果或者布尔值的值为true时，表示使用指定的类名，否则不使用指定的类名

  • 变量
<div :class="className"></div>
<button @click="className='red'">红色</button>
<button @click="className='yellow'">黄色</button>
<script>
    new Vue({
    el:"#box",
    data:{
    	className:'red'
    }
</script>
  • 数组
<div :class="['red','fontA']">vue动态样式绑定-class</div>

数组中默认会把元素解析成变量，而不是class类名，所以需要给类名添加引号

5.列表渲染

当页面上有很多内容要按照一定的规律进行展示时，可以使用v-for指令来实现原生js的for循环遍历效果。

语法格式：

<标签名 v-for="item of 数据源"></标签名>

item就是遍历的元素内容

<标签名 v-for="(item,index) of 数据源"></标签名>

两个参数时，第一个参数是遍历的元素内容，第二个参数是内容的下标

for in 可以传递三个参数，第二个参数是键，第三个参数是位置。

相关标签： vue

上一篇： 用JSP操作Cookie_MySQL

下一篇： FM ALV 可编辑下拉框

推荐阅读