Vue的初级入门使用教程

最新推荐文章于 2023-03-01 16:02:58 发布

qq_40777074

最新推荐文章于 2023-03-01 16:02:58 发布

阅读量210

点赞数

分类专栏： Vue Vue.js html 文章标签： vue html javascript 开发工具 vue.js

本文链接：https://blog.csdn.net/qq_40777074/article/details/106882280

版权

Vue.js 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

写前端页面的时候,可以使用前端工具,这里推荐用hbuilder,直接下载了就可以用!实时查看效果的!贼爽!

Vue.js官网教程（放心，是中文的，嘿嘿）
https://cn.vuejs.org/v2/guide/

第一步：
下面的两个vue.js文件引入,开发的时候引入开发的,开发完成之后换成生产模式的!(只需要引入一个)

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

第二步:
在html中添加元素节点(内容用 {{ message}} 替代,这个待会从js中取值)

<div id="app">
  {{ message }}
</div>

第三步
添加js获取数据,#app代表id=app的元素,

<script>
	var app = new Vue({
		  el: '#app',	//选择器选择元素节点
		  data: {
		    message: 'Hello Vue!'
		  }
	})
</script>

下面是总的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>超级小王子</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
  			{{ message }}
		</div>
		<script>
			var app = new Vue({
				  el: '#app',	//选择器选择元素节点
				  data: {
				    message: 'Hello Vue!'
				  }
			})
		</script>
	</body>
</html>

输出结果为:

Hello Vue!

el挂载点中的数据可以再挂载点元素的内的子元素中使用!也可以在一个元素中挂载多条数据,每条数据用逗号分开!

	<body>
		<div id="app">
  			{{ message }}
  			<h1>{{users.name}} {{users.age}}</h1>
  			<a>{{list[0]}}</a>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				  el: '#app',	//选择器选择元素节点
				  data: {
				    message: 'Hello Vue!',
				    users:{name:'heima',age:11},
				    list:["北京","南京","东京","西京"]
				  }
			})
		</script>
	</body>

输出结果为

Hello Vue!
heima 11
北京

还有一种显示方法!,在标签中添加v-text属性,意思是将次元素中的内容替换为指定的内容

	<body>
		<div id="app">
  			<h2 v-text="message">这儿的内容会被替换成message的内容</h2>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				  el: '#app',	//选择器选择元素节点
				  data: {
				    message: 'Hello Vue!'
				  }
			})
		</script>
	</body>

输出结果为:

Hello Vue!

和双大括号的区别是: {{ }}会把原先的内容保留,值改变{{}}内的内容,而v-text则是全部替换

v-text 和v-html的区别:
v-text是将本节点内容转换为文本
v-html是将本节点内容转换为html页面

	<body>
		<div id="app">
  			<h2 v-text="message">这儿是v-text测试</h2>
  			<h2 v-html="message">这儿是v-html测试</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				  el: '#app',	//选择器选择元素节点
				  data: {
				    message: "<a href='http://www.baidu.com'>跳转到百度</a>"
				  }
			})
		</script>
	</body>

结果

<a href='http://www.baidu.com'>跳转到百度</a>

跳转到百度

v-on事件绑定
v-on:click=“doIt” 点击事件
@click=“doIt” 是简写的点击事件
@dblclick=“doIt” 是简写的双击事件
绑定的方法写在methods中
注意data:{} 和 methods:{}中间一定要加逗号分割,不然会报错!

	<body>
		<div id="app">
  			<h2 v-text="message">这儿的内容会被替换成message的内容</h2>
  			<h2 v-html="message">这儿的内容会被替换成message的内容</h2>
  			
  			<input type="button" value="事件绑定" v-on:click="doIt"/>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				  el: '#app',	//选择器选择元素节点
				  data: {
				    message: "<a href='http://www.baidu.com'>跳转到百度</a>"
				  },
				  
				  methods: {
				  	doIt:function(){
				  		alert("111");
				  	}
				  }
			})
		</script>
	</body>

点击下面的按钮,就会触发事件,(因为是测试,所以弹窗看一下触发了就可以了)
在这里插入图片描述

v-on:click 也能获取当前对象中的值

	<body>
		<div id="app">
  			<h2 v-text="message">这儿的内容会被替换成message的内容</h2>
  			<h2 v-html="message">这儿的内容会被替换成message的内容</h2>
  			
  			<input type="button" value="事件绑定" v-on:click="doIt"/>
  			<input type="button" value="事件绑定" @click="doIt"/>
  			<input type="button" value="事件绑定" @dblclick="doIt"/>
  			<p @dblclick="egg">{{foot}}</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				  el: '#app',	//选择器选择元素节点
				  data: {
				    message: "<a href='http://www.baidu.com'>跳转到百度</a>",
				    foot:"西兰花炒蛋"
				  },
				  methods: {
				  	doIt:function(){
				  		alert("111");
				  	},
				  	egg:function(){
				  		this.foot+="好好吃!"
				  	}
				  }
			})
		</script>
	</body>

每次双击触发事件都会使其增长一次! this关键词代表 #app 这个元素!
在这里插入图片描述

qq_40777074

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的初级入门使用教程

Vue.js官网教程（放心，是中文的，嘿嘿）https://cn.vuejs.org/v2/guide/第一步：下面的两个vue.js文件引入,开发的时候引入开发的,开发完成之后换成生产模式的!(只需要引入一个)<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --&gt
复制链接

扫一扫