1.《VUE入门篇之插值表达式》

最新推荐文章于 2022-06-08 20:58:42 发布

@逆风微笑代码狗

最新推荐文章于 2022-06-08 20:58:42 发布

阅读量248

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44864082/article/details/105186958

版权

写作声明：

大家好！我是执念(笔名)，是一名编程爱好者，今天是我第一次写博客，带着对未来的憧憬以及对编程的好奇之心，将会用博客记录本人的成长经历！而VUE框架则是我第一个要自学完成的目标，这一篇文章主要是一个VUE的简单使用，后面我将持续更新VUE的各种指令！希望我的博客能帮助大家的成长，如果有什么问题，欢迎各位编程爱好者的留言以及私信！

vue的简单使用（步骤）

1.使用vue首先第一步在HTML页面导入vue.js包！首先我们要下载vue.js

vue.js下载地址：https://vuejs.org/v2/guide/installation.html

进入下载地址后，点击下载 开发版本，

下载好后，我们开始进行简单VUE的使用

2.在HTML中导入vue.js

 <!--1.导入vue.js包 -->
	<script type="text/javascript" src="js/vue.js" ></script>

3.导入vue.js后就可以就行vue的代码编写了，下面是我写的一个简单的VUE的简单使用

<!--
	作者：刘桓
	时间：2020-03-29
	描述：VUE的简单使用
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue的简单使用</title>
	</head>
     <!--1.导入vue.js包 -->
	<script type="text/javascript" src="js/vue.js" ></script>
	<body>
		<!--定义HTML元素，便于显示效果-->
		<div id="div1">
			<h1>{{msg + msg1}}</h1>    <!--这里运用的市 插值表达式  是用来显示：data中msg,msg的内容-->
		</div>
		{{msg}}      <!--这里是错误写法，必须写在被渲染元素的内部-->
		<script>
			//实例化VUE对象 传入vue参数
			var vm=new Vue({  
				el:"#div1",    //el代表渲染的位置   div1代表渲染的元素id
				data:{
					msg:"hello world",      //msg代表渲染元素的内容
					msg1:"你好 世界！"
				}
			});
		</script>
	</body>
</html>

运行结果

这个简单的案例可能对初学VUE的人来说有点困难，接下来，我将会对各个元素进行详解

1.使用VUE第一步导入js包毫无疑问

2.接下来，我们要创建要渲染的标签，而我选择的标签就是代码中的div

3.然后我们要对div进行渲染

要渲染之前要先

var vr=new vue(){

这里面写渲染的内容

}

4.由代码可知渲染的内容中有两个关键字

el:"#div1", //el代表渲染的位置 div1代表渲染的元素id

data:{
                   msg:"hello world", //msg和msg1代表渲染元素的内容
                   msg1:"你好世界！"
               }

最后将要操作的变量以插值表达式的形式传入<h1>{{msg + msg1}}</h1> 中即可！

下一次更新VUE各种指令的运用！例如：v-text v-bind v-html 等等！

@逆风微笑代码狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.《VUE入门篇之插值表达式》

写作声明：大家好！我是执念(笔名)，是一名编程爱好者，今天是我第一次写博客，带着对未来的憧憬以及对编程的好奇之心，将会用博客记录本人的成长经历！而VUE框架则是我第一个要自学完成的目标，这一篇文章主要是一个VUE的简单使用，后面我将持续更新VUE的各种指令！希望我的博客能帮助大家的成长，如果有什么问题，欢迎各位编程爱好者的留言以及私信！vue的简单使用（步骤）1.使用vue首先第一步在...
复制链接

扫一扫