VUE基本使用
第一个vue项目#
# 一个页面中使用vue，vue的代码引入（跟引入jq一模一样）
# 编辑器的选择
-vscode
-webstorm ----》pycharm上开发前端
-sublime text
<!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>
// vm对象，管理了html中得div，在div中写vue的模板语法，指令
var vm = new Vue({
el: '#app',
data: {
name: 'lqz',
age:19
},
})
</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">
<p>名字：{{name}}</p>
<p>年龄：{{age}}</p>
<p>数组：{{list1}}</p>---->{{list1[1]}}
<p>对象：{{obj1}}</p>---》{{obj1.name}}--->{{obj1['age']}}
<p>标签：{{link1}}</p>
<p>{{10+99}}</p>
<p>三目运算符：{{score>90?"优秀":"垃圾"}}</p>
</div>
</body>
<script>
// vm对象，管理了html中得div，在div中写vue的模板语法，指令
var vm = new Vue({
el: '#app',
data: {
name: 'lqz', // 字符串
age: 18, // 数值
list1: [1,2,3,4], // 数组
obj1: {name: 'Darker', age: 19}, // 对象
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
score:99
},
})
</script>
</html>
文本指令#
// 指令----》写在标签上 以 v-开头的 属性 叫vue的指令
-v-text ：把字符串原封不动显示在标签上
-v-html ：把标签字符串渲染后，显示在标签里
-v-show ：显示与不显示 ：style="display: none;"
-v-if ：显示与不显示，直接标签的删除
// 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">
<div v-text="link1">
</div>
<p v-html="link1"></p>
<img v-show="show" src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" height="100px"
width="100px">
<hr>
<img v-if="show2" src="./img/jj.jpg" alt="" height="100px" width="100px">
</div>
</body>
<script>
// vm对象，管理了html中得div，在div中写vue的模板语法，指令
var vm = new Vue({
el: '#app',
data: {
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
show: true,
show2: true,
},
})
</script>
</html>
事件指令#
# 按钮，标签的事件---》单击事件，双击事件----》单击事件(点击)
#正常写法： v-on:click='函数'
#简写成： @click='函数' ---》这种多
属性指令#
# 标签有属性----》使用变量动态的替换属性
# v-bind:属性名='属性值'
#简写成 :属性名='属性值' --->这种多
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！