vue学习笔记

今日内容概要

  • 前端发展介绍
  • Vue的快速使用
  • 插值语法
  • 指令系统之文本指令
  • 指令系统之事件指令
  • 指令系统之属性指令

今日内容详细

前端发展介绍

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

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：一套编码 编到10个平台

9.Vue: 2.x 3.x ts: typescript less

10.在不久的将来 ，前端框架可能会一统天下

详细的发展史：

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

主流：vue，react，uni-app

Vue的快速使用

1） 介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的【渐进式】框架（vue是一个js框架），【渐进式】可以一点一点地使用它，只用一部分，也可以整个工程都使用它。

关于版本：

1.X：使用得较少

2.X：普遍使用

3.X：未来趋势

# 开发vue，有一款编辑器
vscode：微软 轻量级编辑器，免费
vim：装插件，搞得花里胡哨，开发代码
Jetbrains：IDEA(java)，Pycharm，Goland，phpStrom，webstorm  收费 吃内存(java开发)
AndroidStadio：免费，谷歌买了Jetbrains授权+ADT
    sun：java---》后来被甲骨文收购了--->oracle jdk   openjdk  毕昇jdk

Pycharm + 插件  开发vue 使用起来跟webstorm
    把vue的源代码下载到本地

2）M-V-VM思想

    MTV :django
    MVC :后端框架一般基于这种架构
    MVVM:前端框架 vue
    MVP：移动端

M: model 数据层，js的变量

V:view 页面展示，视图层 html+css的页面

VM：vue写的介于m和v之间的一层

img

双向数据绑定：只要改了M层的数据(js的变量)，view层页面跟着变化

后端web经典架构：mvc和mtv，详情：https://www.cnblogs.com/luckinlee/p/11622213.html

3）组件化开发、单页面开发

组件化开发

类似于DTL中的include，每一个组件的内容都可以被替换和复用

img

单页面开发

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

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

Vue使用

1）vue的引入

一个页面中使用vue，vue的代码引入（跟引入jq一模一样）。

① CDN的方式引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

② 下载后导入

其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js 然后复制下来，创建一个js文件再粘贴进去

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

2） 简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>名字:{{name}}</p>
        <p>年龄:{{age}}</p>
    </div>
</body>
<script>
    // 引入vue后，会有Vue的构造函数,传入 配置项 对象
    // 页面中id为app的div就被vue托管了，在div中就可以写vue的语法，指令
    let vm = new Vue({
        el:"#app",
        data:{
            name: 'wjl',
            age: 18
        }
    })
</script>
</html>

插值语法

插值语法：可以放 字符串，数字，数组，对象，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>名字:{{name}}</p>
        <p>年龄:{{age}}</p>
        <p>数组:{{hobby}}</p>
        <p>第一个爱好:{{hobby[0]}}</p>
        <p>对象:{{wife}}</p>
        <p>wife的名字:{{wife['name']}}</p>
        <p>wife的年龄:{{wife.age}}</p>
        <p>标签:{{a}}</p>
        <h1>vue插值渲染简单表达式</h1>
        <p>{{10 > 9 ? '大于' : '小于'}}</p> 三目运算符----》三元表达式
        <p>{{age+1}}</p>
    </div>
</body>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            name: 'wjl',
            age: 18,
            hobby:['唱', '跳', 'rap', '篮球'],
            wife:{name:'刘亦菲', age:36},
            a:'<a href="http://www.baidu.com">点我</a>'
        }
    })
</script>
</html>

html页面预览：

image

指令系统之文本指令

文本指令：写在标签上，以v-开头的属性，叫vue的指令。

文本指令：

指令 释义
v-html 如果是标签字符串，会把标签渲染到标签内
v-text 把变量渲染到标签中，如果之前有数据，覆盖掉
v-show 放1个布尔值: 为真标签就显示；为假标签就不显示；但是它是通过style的display控制的：style="display: none;"
v-if 放1个布尔值：为真标签就显示；为假标签就不显示；但是它是通过dom的增加和删除

v-show与 v-if的区别：

v-show：标签还在，只是不显示了（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">
        <h3>文本指令 v-text</h3>
        <p v-text="name">lqz</p>
        <h3>文本指令 v-html</h3>
        <p v-html="a"></p>
        <h3>v-show</h3>
        <img src="https://img2.woyaogexing.com/2022/10/23/af963193e9fb67ee!400x400.jpg" alt="" v-show="b" width="300px" height="300px">
        <h3>v-if</h3>
        <div v-if="b1">
            <a href="">点我</a>
            <h3>美女</h3>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            name: 'wjl',
            a:'<a href="http://www.baidu.com">点我</a>',
            b:true,
            b1:true,
        }
    })
</script>
</html>

html页面预览：

image

指令系统之事件指令

指令 释义
v-on 触发事件（不推荐）
@ 触发事件（推荐）
@[event] 触发event事件（可以是其他任意事件） 
v-on:事件名='函数'  简写成  @事件名='函数'

# 补充：es6 对象写法
var name = 'lqz'
var age = 19
# var obj={name:name,age:age}
var obj = {name, age, handleClick() {}}

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>事件指令</h3>
        <button v-on:click="handleShow">点我显示消失</button>
        <div v-if='show'>
        <img src="https://img2.woyaogexing.com/2022/10/22/95afdd5cd39d556d!400x400.jpg" alt="" width="300px"
             height="300px">
        </div>
        <h3>事件指令函数带参数</h3>
        <button @click="handleClick">函数需要参数，但是没传，默认会把event事件传入</button>
        <br>
        <button @click="handleClick1('wjl')">函数需要参数，但是传值了</button>
        <br>
        <button @click="handleClick2('wjl')">函数需要3参数，但是传了1个</button>
        <br>
        <button @click="handleClick3($event,'wjl')">函数需要2参数，一个事件，一个字符串</button>
    </div>
</body>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            show:true,
        },
        methods: {
            // handleShow: function () {
            //     // this 就是vm对象 vm.show
            //     this.show = !this.show
            // },
            //es6的语法，对象写法,以后都这样写
            handleShow() {
                // this 就是vm对象 vm.show
                this.show = !this.show
            },
            // 需要一个参数，但是没有传，会把事件传入
            handleClick(a) {
                console.log(a)
                alert('帅哥')
            },
            // 需要1个，传了一个，但是需要传数字，字符串，布尔，或变量
            handleClick1(name) {
                console.log(name)
            },
            // 需要3个参数，传了一个，没问题，后面俩都是 undefined
            handleClick2(a, b, c) {
                console.log(a)
                console.log(b)
                console.log(c)
            },
            handleClick3(event,name){
                console.log(event)
                console.log(name)
            }
        }
    })

    // es5中
    // var obj={'name':'lqz','age':19}
    // var obj={name:'lqz',age:19}
    // es6中
    var name = 'lqz'
    var age = 19
    // var obj={name:name,age:age}
    var obj = {
        name, age, handleClick() {
        }
    }
</script>
</html>

html页面预览：

image

指令系统之属性指令

标签有属性：使用变量动态的替换属性

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">
    <h3>属性指令</h3>
    <button @click="handleClick">点我看美女</button>
    <br>
    <img v-bind:src="url" alt="" width="100px" height="100px">
    <hr>

    <button @click="handleChange">点我换美女</button>
    <br>
    <img :src="img_url" alt="" width="100px" height="100px">
    <hr>

    <img :src="img_url2" alt="" width="100px" height="100px">
    <hr>

    <div :id="id_div">
        我是div
    </div>
</div>
</body>
<script>
    let 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_url2: 'https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.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'],
            id_div:'xxx'
        },
        methods: {
            handleClick() {
                this.url = 'https://p.qqan.com/up/2022-8/202283919254843.jpg'

            },
            handleChange() {
                // floor:只取整数部分
                //Math.random() 生成0--1直接的数字，小数
                let i = Math.floor(Math.random() * this.imgList.length)
                this.img_url = this.imgList[i]
                }
            },
        mounted() {
            // 页面加载完，开启一个定时器，每隔3s干函数内容，函数里面在变化变量
            setInterval(() => {
                let i = Math.floor(Math.random() * this.imgList.length)
                this.img_url2 = this.imgList[i]
            }, 1000)
        },
    })
</script>
</html>

html页面预览：

image

posted @   空白o  阅读(16)  评论(0)  编辑  收藏  举报
相关博文：
· vue学习笔记
· vue学习笔记
· vue之简介
· vue简介，插值语法，vue指令系统
· 【2022.10.24】Vue基础学习（1）
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示