$vue的模板语法，指令$

‌Aurora

已于 2024-08-18 21:57:06 修改

阅读量976

点赞数 13

文章标签： python

于 2024-08-18 21:53:30 首次发布

本文链接：https://blog.csdn.net/2402_82657845/article/details/141306195

版权

【一】前端发展史

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

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

详细的发展史网址：https://zhuanlan.zhihu.com/p/337276087?utm_source=wechat_session&utm_medium=social&utm_oi=41967790587904

【二】`vue`的介绍

有vue2 和vue3 ：vue2已经不维护了
官网和文档：https://cn.vuejs.org/

# vue用于构建用户界面的js的一个框架
# vue介绍：渐进式 JavaScript 框架 易学易用，性能出色，适用场景丰富的 Web 前端框架
	- 使用vue，可以作为项目的一部分使用，也可以全部项目使用
    - 单页项目（SPA）：signal page application
    	- 整个vue项目，只有一个html页面
# 什么是vue：
	- Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任
    
# vue是一个渐进式框架
# 什么是渐进式框架：
	- 将整个软件系统划分为一系列较小的、可独立开发和测试的组件，逐步构建和扩展整个系统，以满足不断变化的需求
        
# 版本选择：
	- vue2：选择的人选择（因为已经不维护了）
    - vue3：很多的格式在用

# 单文件组件（Single-File Components:SFC）
	- 一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件  xx.vue
    - Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里
    
# API风格：
	- 组合式API：vue3 使用这个
    - 配置项API：vu2 使用这个--但是vue3也兼容配置项API
    
# M-V-VM架构：
	- MTV架构风格：Django，本质也是MVC
    	- M :model,模型表，执行的orm
        - T：template 也就是V，模板层，用户界面
        - V：视图层 django的V+路由=c层
        
    - MVC架构风格：后端开发的架构风格
    	- Model：数据层--》orm--》表模型
        - V：view视图层，模板，用户界面
        - C:controller控制层：控制逻辑，判断，循环
     - MVVM：vue的架构模式
    	  M：model数据层 js控制
          v：View视图层     用户看到的页面
        	js的dom操作---》实现 M和V的交互---》原生js操作dom很麻烦
            jquery--》方便js操作dom--》很多年前，jquery非常火
         vm：view-model层  介于 view和 Model之间 vue编写的一层---》实现 只要数据发生变化，页面就跟着变，只要页面发生变化，js数据页变
        响应式，以后不用操作dom了，只需要动js的变量即可
    - MVP：移动端开发
    
   
# 渐进式，构建用户界面的js框架，单文件组件SFC，单页面应用：SPA,API,风格:组合式，选项式，MVVM

【三】vue的初次体验(vue2,vue3)

【1】vue开发，选择编辑器

- vscode：免费
- webstorm：jetbrains公司专门用来开发前端的
- 不正经前端开发：goland，pycharm，IDEA开发vue

【2】`jetbrains`全家桶

[JetBrains: 软件开发者和团队的必备工具](https://www.jetbrains.com.cn/)

- IDEA--》为java开发者定制的
- 继续开发出了全家桶：pycharm，goland，clion，phpstorm，webstorm
- pycanrm--》装vue插件(安装这个插件你就会有提示信息，不然你写vue的话没有提示信息)--》跟webstorm一样了

【3】`vue2`初体验

（1）引入

我们打开vue2网址：https://v2.cn.vuejs.org/

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
或者
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

（2）使用

创建一个python文件
在文件中创建html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 本地引入 -->
    <script src="./js2/vue.js"></script>
<!--    这两个其实是一样的，一个是本地导入一个是链接-->
    <!-- cdn引入 -->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
</head>
<body>
<div id="app">

<h1>{{name}}</h1>


</div>
</body>
<script>
    var vm=new Vue({
        // 这个意识是：div标签被Vue管理起来了
        el:"#app",
        // 在里面定义变量
        data:{
            name:"jack"
        }
    })
</script>
</html>

我们在开发者模式更改name的时候页面也会跟着变

vm._data.name = "tom"
// 页面上的jack就会变成tom

【4】`vue3`初体验

（1）引入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

（2）使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 本地引入 -->
    <script src="./js3/vue.js"></script>
<!--    两者是一样的-->
    <!-- cdn引入 -->
<!--    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>-->
</head>
<body>
<div id="app">

<h1>{{name}}</h1>


</div>
</body>
<script>
    const { createApp, ref} = Vue

    createApp({
        setup(){
            const  name = ref("jack")
            return {
                name
            }
        }
    }).mount("#app")

</script>
</html>

【四】模板语法

【1】插值语法

语法

# 三目运算符：{{age>=18?"成年":"未成年"}}
	- 当age成立的时候页面就会显示成年，反之显示未成年
    <p>三目运算符：{{age>=18?"成年":"未成年"}}</p>
# 插值语法中可以放变量，简单运算，三目运算，函数（）
# 标签字符串，无法被渲染成标签

【2】使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>插值语法</h1>
    <p>渲染字符串：{{name}}</p>
    <p>渲染数字：{{age}}</p>
    <p>渲染数组：{{list1}}---》{{list1[1]}}</p>
    <p>渲染对象：{{obj1}}---》{{obj1.name}}</p>
    <p>渲染标签字符串：{{link1}}</p>
    <p>简单js语法：{{9+9}}</p>
    <p>简单js语法：{{age+9}}</p>
    <p>简单js语法：{{name+'_NB'}}</p>
    <p>三目运算符：{{age>=18?"成年":"未成年"}}</p>

</div>
</body>
<script>
    var vm=new Vue({
        // 这个意识是：div标签被Vue管理起来了
        el:"#app",
        // 在里面定义变量
        data:{
            name:"jack",
            age: 18, // 数值
            list1:[1,2,3,4,5,6],  // 数组
            obj1:{name:"Jack", phone:110}, //对象
            link1:'<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>
</html>

在这里插入图片描述

【五】指令

【1】文本指令

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

vue指令：放在标签上，以v-开头的，都是vue的指令，每个指令都有自己特殊的用途

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

    <h1>文本指令</h1>	
    <h2 v-text="name"></h2>
    <h2 v-html="link_one"></h2>
    <p>
        <img src="./img/1.png" alt="" v-show="bool_one" height="300px" width="300px">
    </p>
    <p>
        <img src="./img/2.png" alt="" v-if="bool_two" height="300px" width="300px">
    </p>
</div>
</body>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            name:"jack",
            link_one:'<a href="https://www.csdn.net/">访问csdn</a>',
            // 当bool_one为false后，图片就会消失，隐藏
            bool_one:true,
            // 当bool_two为false后，图片就会被删除，删除
            bool_two:true
        }
    })
</script>

</html>

在开发者模式中输入一下内容，就可以控制信息和图片

方式一
<!-- vm._data.bool_one=false -->

方式二
<!-- vm.bool_one=false -->

【2】事件指令

点击事件
- 我们使用：@click=“”
- 很少使用：v-on:click=“”
- 两个都是点击事件，意思是一样的

指令	释义
v-on	触发事件（不推荐）
@	触发事件（推荐）
@[event]	触发event事件（可以是其他任意事件）

点击按钮，图片隐藏，再次点击图片显示

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

    <h1>点击事件</h1>
    <p>
        <img src="./img/1.png" alt="" v-show="bool_one" height="300px" width="300px">
    </p>
    <!--  <button v-on:click="handelClick">点击图片隐藏，再次点击取消隐藏</button>-->
    <!--  你可以将v-on:缩写成@-->
    <button @click="handelClick">点击图片隐藏或显示</button>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // 当bool_one为false后，图片就会消失，隐藏
            bool_one: true,
        },
        methods: {
            // 匿名函数
            handelClick: function () {
                // 把data中的bool_one取相反值
                this.bool_one = !this.bool_one
            }
        }
    })
</script>

</html>

点击事件参数
- 参数多传，多的参数会被忽略
- 参数传少，undefined
- 参数不传：event

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

    <h1>点击事件</h1>
    <p>
        <img src="./img/1.png" alt="" v-show="bool_one" height="300px" width="300px">
    </p>
    <!--  <button v-on:click="handelClick">点击图片隐藏，再次点击取消隐藏</button>-->
    <!--  你可以将v-on:缩写成@-->
    <button @click="handelClick">点击图片隐藏或显示</button>

    <h1>点击事件--函数传参数</h1>
<!--    点击这个按钮，在控制台就会输出信息，因为你在js中做了，相加-->
<!--    <button @click="handelNumber(10,20)">点击相加</button>-->

<!--    正常相加 -->
<!--    <button @click="handelNumber(10,age)">点击相加</button>-->

<!--    传值传多了，多的值就会被忽略-->
<!--    <button @click="handelNumber(10,20,age)">点击相加</button>-->

<!--    你传值传少了，开发者模式打印的就是undefined，但是数字加空就会得到NaN-->
    <button @click="handelNumber(age)">点击相加</button>

<!--  就会点击对象，我们不传参数一般会写event  -->
    <button @click="handelNumberOne">如果不传值</button>
<!--   如果这里我们传了，event，就会被覆盖掉，变成你传的数-->
<!--    $手动知名event，这样打印的就是event对象了-->
<button @click="handelNumberOne($event,10)">如果不传值</button>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // 当bool_one为false后，图片就会消失，隐藏
            bool_one: true,
            age:22,
        },
        methods: {
            handelClick: function () {
                // 把data中的bool_one取相反值
                this.bool_one = !this.bool_one
            },
            handelNumber: function (a, b) {
                console.log(a + b)
            },
            handelNumberOne: function(event,a){
                console.log(event)
                console.log(a)
            }
        }
    })
</script>

</html>

【3】属性指令

属性指令

# name,id,src,hear.....等属性

指令	释义
v-bind	直接写js的变量或语法（不推荐）
:	直接写js的变量或语法（推荐）

使用

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

    <h1>属性事件</h1>
<!--    <p>-->
<!--        <img v-bind:src="img" v-bind:height="height" v-bind:width="width">-->
<!--    </p>-->
    
<!--   这两个方法是一样的下面的方法简单-->
    
    <p>
        <img :src="img" :height="height" :width="width">
    </p>
    <button @click="handelClick">点击切换图片</button>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // 当bool_one为false后，图片就会消失，隐藏
            bool_one: true,
            age:22,
            // 也可以放url地址
            img:"./img/1.png",
            height:"300px",
            width:"300px"
        },
        methods:{
            handelClick:function(){
                this.img="./img/2.png"
            }
        }
    })
</script>

</html>