vue入门学习

「火车驶向云️外」

于 2021-06-02 19:49:05 发布

阅读量91

点赞数 1

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_43589990/article/details/117480964

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

一,入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<!-- 1.语法规则: vue中必须定义根目录标签 -->
		<div id="app">
		<!-- 利用插值表达式 获取数据 -->
			{{a}}
		</div>
		<script src="../vurDemo/js/vue.js"></script>
		<script>
			/**
			* ES6 新规范
			*  1.定义变量 var    弊端: 没有作用域的概念  
			*   如果变量名称重复则可能会引发问题.
			*  2.定义变量 let    有作用域的概念
			*  3.常量  const     全局唯一 不可更改
			*/
			const app = new Vue({
				//标识VUE对象的作用范围
				el: "#app",
				data: {
					a: "vue第一个案例"
				}
			})
		</script>
	</body>
</html>

二,v-text

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-test</title>
	</head>
	<body>
		<div id="app">
			<!-- 2. v-text 数据展现 vue的指令
			v-text 当数据没有解析成功时,页面没有任何的数据,
			是v-cloak的升级版本,多用
			-->
		  <h3 v-text="a"></h3>
		  	<!-- 3.v-html 将数据按照html形式进行解析 
		  	有时页面中的部分数据可能来源于其他的服务器. 远程
		  	服务器返回的是html代码片段,如果需要将代码片段渲染为
		  	页面形式,则使用该命令.
		  	-->
		  <h3 v-html="html"></h3>
		  	<!-- 4.v-pre
		  	说明:
		  	跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
		  	-->
		  <h4 v-pre>{{这段文字不被编译加载，直接显示最原始的数据}}</h4>
		</div>
		<script src="../vurDemo/js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					a: "vue第一个案例",
					html: "<h3>这里测试html</h3>"
				}
			})
		</script>
	</body>
</html>