vue之前端目前形式、介绍和快速使用、模板语法、指令及class与style

最新推荐文章于 2022-09-22 14:52:39 发布

一切随心走_水瓶

最新推荐文章于 2022-09-22 14:52:39 发布

阅读量336

点赞数

本文链接：https://blog.csdn.net/wcg920212/article/details/111180029

版权

python 专栏收录该内容

107 篇文章 7 订阅

订阅专栏

文章目录

1、前端目前形式

1、html5,css3,js(es5,es6): 写一个一个的页面 ---> 返回给后端（php，python，go，java）---> 后端嵌入模板语法 ---> 后端渲染完 ---> 返回给前端 ---> 在浏览器中查看
2、ajax出现 ---> 后台发异步请求，例如django中render+ajax混合
3、单用ajax（加载数据，dom渲染页面）: 前后端分离的雏形
4、angularjs: js框架，前端工程化，前端也是一个工程，一个项目
5、react，vue: 当下最火的两个前端框架（vue国人，react外国）
6、移动开发（安卓，ios） + web（web，微信小程序，支付宝小程序）+ 桌面开发（windows桌面）: 前端 ---> 大前端
7、一套代码在各个平台运行（前端）: 谷歌flutter（Dart: 跟java很像）: ios，安卓，桌面
8、在vue框架的基础上 nui-app ：https://uniapp.dcloud.io/   一套代码编到10个平台，这不是梦想
9、在不久的将来，一统天下
10、内卷化

2、vue介绍和快速使用

2.1、渐进式JavaScript

通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目

2.2、 Vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue
被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
版本：1.x 、2.x（用的最多） 3.x（beta版本）
补充：解释型语言，需要解释器，js解释器集成到浏览器中了，console就等同于在cmd中敲python3进入交互式环境，命令行操作是类似的
nodejs：把chrome的v8引擎（解释器），安装到操作系统之上

2.3、Vue特点

易用
通过 HTML、CSS、JavaScript构建应用

灵活
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化

2.4、MVVM

MVVM: Model-View-ViewModel
	model: 数据（后端给的，js接收到）
    ViewModel: 中转  （双向数据绑定: js中变量变了，html中数据也跟着变）
    view: 视图（html+css）

2.5、三大主流框架

三大主流框架之一: Angular React Vue
先进的前端设计模式: MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

2.6、快速使用

开发版本：vue.js：https://vuejs.org/js/vue.js
生产版本：vue.min.js：https://vuejs.org/js/vue.min.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="box">
    {{ name }}
</div>
<script src="./js/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            name: 'allen',
        },
    })
</script>
</body>
</html>

3、模板语法

3.1、插值

1、文本 {{}}
2、纯html
3、表达式
注意: 直接把Vue对象赋值给变量，修改变量值，可以直接修改页面内容
	vm.$data.name
	vm.name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="box">
    <p>{{ name }}</p>                             <!--输出: allen-->
    <p>{{ ll[0] }}</p>                            <!--输出: jack-->
    <p>{{ obj.name }}</p>                         <!--输出: allen-->
    <p>{{ 10+20+30 }}</p>                         <!--输出: 60-->
    <p>{{ url }}</p>                              <!--输出: <a href="http://www.baidu.com">点击跳转</a>-->
    <p>{{ 10>20 ? 'yes' : 'no' }}</p>             <!--输出: no-->
</div>
<script src="./js/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            name: 'allen',
            ll: ['jack', 'lily', 'tom'],
            obj: {name: 'allen', age: 20},
            url: '<a href="http://www.baidu.com">点击跳转</a>'
        },
    })
</script>
</body>
</html>

4、指令

4.1、文本相关指令

1、标签属性为 v-xx的形式，是vue的指令
2、常用指令
	v-html: 让html渲染成页面
    v-text: 标签内容显示js变量对应的值
    v-show: 放一个布尔值，为真，标签就显示，为假标签就不显示
    v-if: 放一个布尔值，为真，标签就显示，为假标签就不显示
3、 v-show和v-if区别: v-show标签还在，仅仅是不显示了(display: none)，v-if之间操作的dom把标签删除和加入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="box">
    <h2>v-html</h2>
    <p v-html="url"></p>                                        <!--输出: 点击跳转(带url链接)-->
    <h2>v-text</h2>
    <p>{{ name }}</p>                                           <!--方式一输出: allen-->
    <p v-text="name"></p>                                       <!--方式二输出: allen-->

    <h2>v-show</h2>
    <p v-show="is_show">显示内容</p>                             <!--输出: 显示内容-->

    <h2>点击按钮切换显示的内容</h2>
    <p v-show="is_show">显示内容</p>                             <!--输出: 显示内容-->
    <button @click="clickHandle">切换显示文本内容</button>        <!--点击按钮切换控制文本显示与隐藏-->

    <h2>v-if</h2>
    <p v-if="is_show">显示文本内容</p>                           <!--输出: 显示文本内容-->
</div>
<script src="./js/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            url: '<a href="http://www.baidu.com">点击跳转</a>',
            name: 'allen',
            is_show: true,
        },
        methods: {
            clickHandle() {
                // this指的是当前vue对象
                this.is_show = !this.is_show
            }
        }
    })
</script>
</body>
</html>

4.2、事件指令

<!-- v-on: 指令 简写 @ -->

<!-- 不传参事件绑定，但事件回调方法可以获取事件对象 -->
<p @click="fn"></p>
<!-- ()可以传入具体实参 -->
<p @click="fn()"></p>
<!-- ()情况下，事件对象应该显式传入 -->
<p @click="fn($event)"></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="box">
    <h2>v-on</h2>
    <button v-on:click="handleClick">v-on: 点击</button>                 <!--输出: v-on: 点击-->

    <!--使用频率高-->
    <h2>@click方法无括号</h2>
    <button @click="handleClick1">@click方法无括号</button>               <!--输出: @click方法无括号-->

    <!--如果方法加括号不传参数，和无括号没有区别-->
    <h2>@click方法加括号无参数</h2>
    <button @click="handleClick2()">@click方法加括号无参数</button>        <!--输出: @click方法加括号无参数-->

    <!--方法传递参数-->
    <h2>@click方法传递参数</h2>
    <button @click="handleClick3(100)">@click方法加参数</button>          <!--输出: 100-->

    <!--传入事件-->
    <h2>@click传入事件</h2>
    <button @click="handleClick4($event)">@click传入事件</button>         <!--输出: MouseEvent {isTrusted: true, screenX: 55, screenY: 531, clientX: 55, clientY: 460, …}-->
</div>

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

<script>
    var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
            handleClick() {
                console.log('v-on: 点击')
            },
            handleClick1() {
                console.log('@click方法无括号')
            },
            handleClick2() {
                console.log('@click方法加括号无参数')
            },
            handleClick3(x) {
                console.log(x)
            },
            handleClick4(event) {
                console.log(event)
            }
        },
    })
</script>
</body>
</html>

4.3、属性指令

1、给标签属性的value值绑定成js的变量
2、v-bind:class='js变量'  缩写成: class='js中变量'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .red {
            color: red;
        }

        .blue {
            color: blue;
        }
    </style>
</head>
<body>
<div id="box">
    <p :class="red">我是带字体颜色的字体</p>
    <h2>点击按钮切换颜色</h2>
    <button @click="changeColor">切换颜色</button>         <!--点击按钮后后会把红色字体换成蓝色字体-->

    <h2>图像展示</h2>
    <p><img :src="isActive ? imageUrl1 : imageUrl12"></p>
    <button @click="changeImage">切换图片</button>         <!--点击按钮后两张图片会来回切换-->
</div>

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

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            red: 'red',
            isActive: true,
            imageUrl1: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607945201081&di=f01a6aab39b80b2de08edffdb6ed1e81&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F92%2F04%2F01000000000000119090475560392.jpg',
            imageUrl12: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607945313916&di=96c7024f33f369b2051c5d7dd66f7061&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F13%2F67%2F01300000046334122442674274604.jpg',
        },
        methods: {
            changeColor() {
                this.red = 'blue'
            },
            changeImage() {
                this.isActive = !this.isActive
            },
        },
    })
</script>
</body>
</html>

5、class与style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .font {
            font-size: 30px;
        }
    </style>
</head>
<body>

<script src="js/vue.js"></script>
<div id="box">
    <h1>class 三种控制方式</h1>
    <p :class="isActive ? 'red' : 'green'">class三目写法</p>
    <p :class="class_obj">class对象写法</p>
    <p :class="class_arr">class数组写法</p>

    <h1>style 三种控制方式</h1>
    <p style="background:red">style三目写法</p>
    <p :style="'background:red'">style三目写法</p>
    <p :style="'background:' + 'red'">style三目写法</p>
    <p :style="'background:' + (isActive ? 'red' : 'green')">style三目写法</p>
    <p :style="style_obj">style对象写法</p>
    <p :style="style_arr">style数组写法</p>

</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            isActive: true,
            class_obj: {'green': true, 'font': true},
            class_arr: ['red', 'font'],

            style_obj: {background: 'gray', fontSize: '30px'},
            style_arr: [{background: 'orange'}, {fontSize: '25px'}],
        },
    })
</script>

</body>
</html>

效果如下：
在这里插入图片描述

一切随心走_水瓶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue之前端目前形式、介绍和快速使用、模板语法、指令及class与style

文章目录1、前端目前形式2、vue介绍和快速使用2.1、渐进式JavaScript2.2、 Vue介绍2.3、Vue特点2.4、MVVM2.5、三大主流框架2.6、快速使用3、模板语法3.1、插值4、指令4.1、文本相关指令4.2、事件指令4.3、属性指令5、class与style1、前端目前形式1、html5,css3,js(es5,es6): 写一个一个的页面 ---> 返回给后端（php，python，go，java）---> 后端嵌入模板语法 ---> 后端渲染完 ---&gt
复制链接

扫一扫