vue的基础语法学习

最新推荐文章于 2024-08-02 17:54:22 发布

christ study java

最新推荐文章于 2024-08-02 17:54:22 发布

阅读量146

点赞数

文章标签： vue.js javascript 学习

本文链接：https://blog.csdn.net/weixin_45037073/article/details/123341652

版权

最近接触到了前端，就学了一点，记录下来

vue是JavaScript的框架，简化了dom的操作，响应式数据驱动的（model和vue的双向绑定）。

常用的vue指令有：

v-text:设置文本值，会替换掉标签内的值（下面例子中的jony会不见）
v-on：绑定事件，v-on:click=“方法名”，绑定了点击事件，可以简写成@click=”方法名“，方法的内部通过this访问data的数据。
v-show：根据数据的真假判断标签内容是否展示内容
v-if：效果和v-show一样，但它操作是dom元素（资源消耗大，适合改变频率较小的），而v-show操作的是样式。
v-bind：为元素绑定属性，改变操作属性，可简写成 :属性名
v-for
v-model

简单的例子

<!DOCTYPE html>
<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>第一篇文章</title>
	</head>
	
	<body>
	<div id="app">
		<h1 v-text="sayhello+'!'">jony</h1>
		<h1>{{saygood+'！'}}alex</h1>
		<img v-show="isShow" src="图片地址">
		<input type="button" value="changeShow" @click="changeIsShow">
	</div>
	
	<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
			sayhello:"hello",
			saygood:"good",
			isShow:true
			},
			method:{
			changeIsShow:function(){
			this.isShow = !this.isShow;
			}
		})
	<script>

	</body>
</div>

vue指令写在html标签中，绑定了标签，可以对这个标签做一些操作。
vue的实例写在script标签中，el是挂载（操作哪个区域），data是数据，method是方法。

christ study java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的基础语法学习

最近接触到了前端，就学了一点，记录下来vue是JavaScript的框架，简化了dom的操作，响应式数据驱动的（model和vue的双向绑定）。常用的vue指令有：v-text:设置文本值，会替换掉标签内的值（下面例子中的jony会不见）v-on：绑定事件，v-on:click=“方法名”，绑定了点击事件，可以简写成@click=”方法名“，方法的内部通过this访问data的数据。v-show：根据数据的真假判断标签内容是否展示内容v-if：效果和v-show一样，但它操作是dom元素（资
复制链接

扫一扫