VUE简介/插值/属性/文本/函数指令/if/for操作
VUE简介/插值/属性/文本/函数指令
前端发展史
1.前后端一体的，HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
2.Ajax的出现 -> 后台发送异步请求，Render+Ajax混合，单用Ajax（加载数据，DOM渲染页面）
3.React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
4.移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> `大前端
5.一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
6.在Vue框架的基础性上 uni-app：一套编码 编到10个平台
vue介绍和使用
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
易用
- 通过 HTML、CSS、JavaScript构建应用
灵活
- 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效
- 20kB min+gzip 运行大小
- 超快虚拟 DOM
- 最省心的优化
MVVM框架
Model：vue对象的data属性里面的数据，这里的数据要显示到页面中View：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
低耦合：视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变
可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View重用这端视图的逻辑（以此减少代码冗余）
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
可测试：界面元素是比较难以测试的，而现在的测试可以针对ViewModel来编写
组件化开发：类似于DTL中的include，每一个组件的内容都可以被替换和复用
单页面开发：只需要1个页面，结合组件化开发来替换页面中的内容，页面的切换只是组件的替换，页面还是只有1个index.html
MVVM演示
创建一个html文件
引入vue代码 https://cdn.jsdelivr.net/npm/vue/dist/vue.js
# 可在官网直接下载源代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
姓名：{{name}}
<input type="text" v-model="name">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
//设定监听文件
data: {
name: 'moon'
}
})
</script>
data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
姓名：{{name}}
爱好：{{hobby[0]}}
<!--针对数组可以索引取值，从0开始-->
妻子姓名：{{wife.name}}
<!--插值语法可以直接通过.的方式获取值-->
妻子年龄：{{wife.age}}
运算：{{10*5+3*2}}
<!--插值语法可以直接进行计算-->
三目运算符：{{age<18?'未成年':'成年了'}}
条件？ 成立 不成立
目前age变量为17，小于18成立 输出未成年
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'moon',
age:17,
hobby:['唱','跳','rap'],
wife:{name:'刘亦菲',age:38},}
})
</script>
</html>
文本指令
是vue独有的一些方法，都是v-开头的，还有必须搭配vue定义的变量名
1.必须放在标签内，2,v-xx=必须是变量或者是表达式
1. v-html 将标签内数据渲染为链接
<P v-html="a_url"></P>
# 将a_url变量的内容转为html的a标签，如果不使用这个方法是默认渲染为字符串
var vm = new Vue({
el: '#app',
data: {
a_url: '<a href="http://www.baidu.com">点我看美女</a>',
}
})
2.v-show 控制标签是否展示 便签还是会渲染只是把属性值设置了隐藏
<h2 v-show="show">v-show</h2>
# 给标签加上show方法，可以控制标签是否显示 判断变量的值true为显示，false为隐藏
var vm = new Vue({
el: '#app',
data: {
show:true,
# 也可以使用0或者1
}
})
3.V-if 控制标签是否展示 如果成立则展示
# 与v-show的区别 添加不成立v-if直接就不会执行标签会被删除，v-show便签都会执行只是改变了标签的属性，
<div v-if="show_if">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.doubanio.com%2Fview"alt="" width="300px" height="300px">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.doubanio.com%2Fvi" alt="" width="300px" height="300px">
</div>
也可以控制div标签，控制整个div的显示是否
var vm = new Vue({
el: '#app',
data: {
show_if:1,
}
})
属性指令
可以把标签内的属性也填写为变量名，变量的值改变，属性也随之改变
语法：属性='变量名'
# 语法
v-bind:属性名="变量名"
可以简写只需一个：号 <a :href="url"></a>
var vm = new Vue({
el: '#app',
data: {
url:"http://www.4399.com"
}
})
# 如果需要对标签内的属性进行变量控制 需要用到属性指令语法 :标签
事件指令
用的最多的是单击事件，聚焦事件
# 语法
v-on:click='handClick'
# click单击动作
# 函数需要在vue-data里面
# 必须写在methods配置项中
var vm = new Vue({
el: '#app',
data: {
photo: 'img11/001.jpg',
width_photo:'280px',
height_photo:'400px',
show:false,
},
methods:{
# 必须写在这里面 函数名
'handClick':function () {
this.show = !this.show
}
}
})
eg：点击图片随机切换美女图片
<button class="btn btn-success" @click="handClick">开始挑选技师</button>
# @click="handClick" 绑定单击事件
var vm = new Vue({
el: '#app',
data: {
photo_url: 'img11/001.jpg',
width_photo: '280px',
height_photo: '400px',
show: true,
photo_list: ['img11/001.jpg', 'img11/002.jpg', 'img11/003.jpg', 'img11/004.jpg', 'img11/005.jpg']
# 创建一个图片路径列表
},
methods: {
'handClick': function () {
# 创建一个单击事件
var a111 = Math.floor(Math.random() * (this.photo_list.length))
# 生成一个随机整数，向下取整，根据图片路径列表长度，从0开始
this.photo_url = this.photo_list[a111]
# 替换图片路径 根据 图片列表随机路径
}
}
})
可以简写为 ：
methods: {
handClick() {
# 直接编写函数即可 不需要K：V的形式，
var a111 = Math.floor(Math.random() * (this.photo_list.length))
# 生成一个随机整数，向下取整，根据图片路径列表长度，从0开始
this.photo_url = this.photo_list[a111]
# 替换图片路径 根据 图片列表随机路径
}
class和style
# 本身他俩都是属性指令，但是他们比较特殊，应用更广泛
# class：推荐用数组
:class='变量'
变量可以是字符串，数组，对象
eg:<p :class="class_attr">测试class</p>
# 可以直接配置一个变量，但是这个变量我们设置的为数组，
class_attr:['font_size','class_color']
# 好处，数组可以支持很多操作
# 数组尾部追加：class_attr.push('rad') 可以直接添加属性
# 移除：class_attr.pop('rad')
class_attr:{font_size:true,class_color:false}
# 也可以这样配置，控制添加的属性是否生效
# style：推荐用对象
:style='变量'
变量可以是字符串，数组，对象
# 数组的方法：很多，自己学
if条件渲染
# v-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
# v-else-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
# v-else 放在标签上，上面条件都不成立，显示这个标签
<body>
<div id="app01">
<h2>查看成绩</h2>
<div v-if="soure>=90">优秀</div>
# 那个条件成立符号，渲染那个
<div v-else-if="soure>=80">良好</div>
<div v-else-if="soure>=60">及格</div>
<div v-else>不及格</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app01',
data:{
soure:80
}
})
</script>
for循环渲染
for循环那个标签，就在哪个标签上面写
v-for="item in good_list"
# 固定语法 item in 变量
<div v-show="show">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">1</th>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '#app01',
data: {
show: false,
good_list:[{id:1,name:'钢笔',price:199},{id:2,name:'钢笔',price:199},{id:3,name:'钢笔',price:199}]
},
分类:
前端/Vue教程
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了