vue简单应用
1Vue介绍
2.x 咱们学习，企业里常用
3.x 最新的
-Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式
-双向数据绑定
-单页面开发：vue工程，整个项目，其实就只有一个index.html页面
-组件化开发： xx.vue
-vscode：go，python... 免费，微软出的
-jetbrains系列：收费，Pycharm，goland，phpstorm，idea，webstorm
-androidstadio：谷歌买了jetbrains版权，自己定制的ide
-其他
-sublinetext
-hbuilder
-eclipse
-myeclipse
-vim yyds 插件 美化
-开发前端使用pycharm，装vue插件
2 Vue快速使用
<!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}}，我的年龄是：{{age}}
</div>
</body>
<script>
var vm =new Vue({
el:'#app',
data:{
name:'lqz',
age:19
}
})
</script>
</html>
3 模板语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值语法</title>
<script src="./js/vue.js"></script>
</head>
<body>
<h1>插值语法</h1>
<div id="app">
<h1>我的名字是:{{name}}</h1>
<h2>我的年龄是：{{age}}</h2>
<h3>我的爱好是：{{hobby}}</h3>
<h4>显示对象：{{obj}}</h4>
<p>{{url}}</p> 默认情况，原封不动显示，如果能直接渲染成标签，说明存在漏洞 xss攻击
</div>
</body>
<script>
var vm =new Vue({
el:'#app',
data:{
name:'lqz',
age:19,
hobby:['篮球','足球','乒乓球'],
obj:{wife:'迪丽热巴',addr:'上海'},
url:'<a href="http://www.baidu.com"></a>'
}
})
</script>
</html>
4 文本指令
v-html:把标签字符串显示成标签
v-text：等同于插值
v-show：显示不显示，不是真正删除
v-if：显示不显示，是真正的删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本指令</title>
<script src="./js/vue.js"></script>
</head>
<body>
<h1>文本指令</h1>
<div id="app">
<h3>就想显示成标签</h3>
<p>{{url}} </p>
指令写在标签内，指令对应的变量，直接写就可以了，不需要再用 {{}} 包裹了
<br>
v-html：把字符串，渲染成标签
<div v-html="url"></div>
<br>
v-text：把变量内容，渲染到标签中
<p><span>{{hello}}</span></p>
<p><span v-text="hello"></span></p>
<br>
v-show:一个标签是否显示,用变量可以，用true或false也可以， 其实是display: none;并不是真正的把dom删除了
<div v-show="b">
我是一个div
<p>我的div</p>
<p>我的div</p>
<p>我的div</p>
</div>
<br>
v-if:真正的删除，效率低
<div v-if="b1">
我是第二个个div
<p>我是第二个个div</p>
<p>我是第二个个div</p>
<p>我是第二个个div</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
hello: 'hello world',
b:true,
b1:true,
url: '<a href="http://www.baidu.com">点我看美女</a>'
}
})
</script>
</html>
5 事件指令
v-on:clicl=''
@click=''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<script src="./js/vue.js"></script>
</head>
<body>
<h1>事件指令</h1>
<div id="app">
v-on表示事件指令，click表示单击,老语法，不用了
<p><button v-on:click="handleClick">按钮</button></p>
<br>
新语法，以后都用这种： @click='函数名'
<p><button @click="handleClick2">按钮二</button></p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleClick() {
alert('我被点了')
},
handleClick2() {
alert("按钮2被点击了")
}
}
})
</script>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！