【2022-10-24】前端Vue框架(一)

前端发展介绍

1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看

2.Ajax的出现 -> 后台发送异步请求，Render+Ajax混合

3.单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形

4.Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）

5.React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）

6.移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端

7.一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端

8.在Vue框架的基础性上写出了uni-app：一套编码编到14个平台

9.主流框架：vue，react ，uni-app
    JavaScript
    typescript

详细的发展史：

https://zhuanlan.zhihu.com/p/337276087?utm_source=wechat_session&utm_medium=social&utm_oi=41967790587904

Vue入门介绍

# Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架

# 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用

# Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合


# 渐进式框架

    可以一点一点地使用它，只用一部分，也可以整个项目都使用它

# 官方网站
    官网：https://cn.vuejs.org/
    文档：https://cn.vuejs.org/v2/guide/

Vue的特点

易用
	通过 HTML、CSS、JavaScript构建应用
灵活
	不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效
	20kB min+gzip 运行大小
	超快虚拟 DOM
	最省心的优化

M-V-VM介绍

# MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

# Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中
# View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
# ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）

M-V-VM特性

# 低耦合：视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变
# 可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View重用这端视图的逻辑（以此减少代码冗余）
# 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
# 可测试：界面元素是比较难以测试的，而现在的测试可以针对ViewModel来编写

M-V-VM逻辑

组件化开发

类似于DTL中的include，每一个组件的内容都可以被替换和复用，有自己独立的html，css，js

单页面开发

只需要1个页面，结合组件化开发来替换页面中的内容

页面的切换只是组件的替换，页面还是只有1个index.html

Vue基本使用

# 安装方式

1. CDN的方式直接引入
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 下载后保存为js文件，然后导入，其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去
	<script src="js/vue.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>Vue快速使用</h1>
    <p>username: {{name}}</p>
    <p>age: {{age}}</p>
</div>
</body>
    
<script>
    // 引入vue后，会有vue的构造函数
    // 这里需要传参数，传的是一个对象，在js中字典是对象，列表是数组
    // 页面中id为app的div就被vue托管了，在div中就可以写vue的语法，指令
    new Vue({
        el: "#app",   //  通过id找到对应的div并进行管理
        data: {        //  传入数据，data也是一个对象，因为可以有很多数据，所以采用的是对象(字典)的形式
            name: 'jason',
            age: '18',
        }
    })

</script>
</html>

Vue模板语法

# 被vue托管的标签中可以写 {{}}，里边可以写：变量，js简单的表达式，函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>Vue插值语法</h1>
    <p>username: {{name}}</p>
    <p>age: {{age}}</p>
    <p>hobby: {{hobby}}</p>
    <p>第1个爱好: {{hobby[1]}}</p>
    <p>wife: {{wife}}</p>
    <p>wife_name: {{wife['name']}}</p>
    <p>wife_age: {{wife.age}}</p>
    <p>标签: {{a}}</p>


</div>
</body>
<script>
    // 引入vue后，会有vue的构造函数
    // 这里需要传参数，传的是一个对象，在js中字典是对象，列表是数组
    // 页面中id为app的div就被vue托管了，在div中就可以写vue的语法，指令
    var vm = new Vue({
        el: "#app",   //  通过id找到对应的div并进行管理
        data: {        //  传入数据，data也是一个对象，因为可以有很多数据，所以采用的是对象(字典)的形式
            name: 'jason',
            age: 18,
            hobby: ['running','play_Games','jumps'],
            wife: {name: '刘亦菲', age: 18},
            a: '<a href="http://www.baidu.com">点我去百度</a>'
        }
    })

</script>
</html>

指令系统之文本指令

指令	释义
v-html	让HTML渲染成页面
v-text	标签内容显示js变量对应的值
v-show	放1个布尔值：为真标签就显示；为假标签就不显示
v-if	放1个布尔值：为真标签就显示；为假标签就不显示

# 写在任意标签上 以v-xx开头的，都是vue的指令
# 文本指令
v-text：把变量渲染到标签中，如果之前有数据，覆盖掉
v-html:如果是标签字符串，会把标签渲染到标签内
v-show：控制标签的显示与隐藏，但是它是通过style的display控制的：style="display: none;"
v-if：控制标签的显示与隐藏，但是它是通过dom的增加和删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">

    <h1>文本指令 v-text</h1>
    <p v-text="name">jason</p>
    <h1>文本指令 v-html</h1>
    <span v-html="a"></span>
    <h1>v-show</h1>
    <img v-show='b' src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" width="300px" height="300px">

    <h1>v-if</h1>
    <div v-if="b1">
        <a href="">点击查看武林秘籍</a>
        <h3>美女</h3>
    </div>

</div>


</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'lqz',
            a: '<a href="http://www.baidu.com">点我</a>',
            b:true,
            b1:true
        },
    })

</script>

</html>

指令系统之事件指令

# 放在标签上：v-on:事件名='函数'
# 事件名可以写：click,dbclick, input标签:change,blur,input
# 补充：es6对象写法
    var name = 'jason'
    var age = 19
    // var obj={name:name,age:age}
    var obj = {name, age, handleClick() {}}
    
# v-on:事件名='函数'  简写成  @事件名='函数'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">

    <h2>事件指令 v-on</h2>
    <button v-on:click="handlerShow">图片显示消失</button>
    <br>
    <div>
        <img v-show='show'
             src="https://img0.baidu.com/it/u=4098021431,1027335156&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1666717200&t=e206b37ecfcb819e2c9a51c35d346fd8"
             alt="" width="300px" height="300px">

    </div>
    <h1>事件指令带参数</h1>
    <button @click="handlerClick">不给函数传参，默认会把event事件传入</button>
    <br>
    <button @click="handlerClick1(666)">给函数传参，可以传数字、字符串、变量</button>
    <br>
    <button @click="handlerClick2('jason')">如果函数需要三个参数，只传一个不会报错，但是会显示未被定义(undefined)</button>
    <br>
    <button @click="handlerClick3($event, 'jason')">给函数传两个参数，一个是事件，一个字符串</button>

</div>


</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            show: true,

        },
        methods: {
            // handlerShow: function () {
            //  this.show = !this.show  // 取反，this就是vm对象
            //}
            handlerShow() {           // es6语法中对象的简写形式
                this.show = !this.show
            },
            handlerClick(a) {
                console.log(a)
            },
            handlerClick1(name) {
                console.log(name)
            },
            handlerClick2(name, age, hobby) {
                console.log(name)
                console.log(age)
                console.log(hobby)
            },
            handlerClick3(event, name) {
                console.log(event)
                console.log(name)
            },

        }
    })

</script>

</html>

指令系统之属性指令

# 写在标签上的 name，class,href,src,id.....属性
# v-bind:属性名='变量'
# 简写成：
	:属性名="变量"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">

    <h2>属性指令 v-bind</h2>
    <button @click="handlerClick">点击按钮有惊喜</button>
    <br>
    <img v-bind:src="url" alt="" height="300px" width="300px">
    <br>
    <button @click="handlerClick1">点击这里换一批</button>
    <br>
    <img v-bind:src="img_url" alt="" height="300px" width="300px">
    <br>
    <img v-bind:src="img_url1" alt="" height="300px" width="300px">
</div>


</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url: 'https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg',
            img_url: 'https://p.qqan.com/up/2022-8/202283919254843.jpg',
            img_url1: 'https://p.qqan.com/up/2022-8/202283919254843.jpg',
            imgList: ['https://img2.woyaogexing.com/2022/10/23/af963193e9fb67ee!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/22/95afdd5cd39d556d!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/21/f06c65142fe50c19!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/20/c0135f7e74050a74!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/20/5972f09505ac681d!400x400.jpg'],
        },
        methods: {
            handlerClick() {
                this.url = 'https://img2.baidu.com/it/u=2490939159,251868101&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1666717200&t=0e3c76dd119aac3659522a2e1556390a'

            },
            handlerClick1() {
                var i = Math.floor(Math.random() * this.imgList.length)  // floor只取整数  Math.random()生成0-1之间的数字
                console.log(i)
                this.img_url = this.imgList[i]
            }
        },
        mounted() {  // 页面加载完毕，开启定时器，每隔2秒中执行函数
            setInterval(() => {
                var i = Math.floor(Math.random() * this.imgList.length)  // floor只取整数  Math.random()生成0-1之间的数字
                this.img_url1 = this.imgList[i]
            }, 2000)
        }
    })

</script>

</html>

原文地址：http://www.cnblogs.com/dy12138/p/16822628.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性