• Vue学习--模板语法-插值

    Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

    在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

    如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

    文本插值
    通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
     

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<script type="text/javascript" src="./js/vue.js"></script>
    8. 	<body>
    9. 		<div id="app" v-once>
    10. 			{{msg}}
    11. 		</div>
    12. 	</body>
    13. 	<script type="text/javascript">
    14. 		var  vm = new Vue({
    15. 			el:"#app",
    16. 			data:{
    17. 				msg:"hi vue",
    18. 			}
    19. 		});
    20. 		
    21. 		vm.msg="change";
    22. 	</script>
    23. </html>
    24.

    展示，后边赋值chage并未渲染到模板页

     

    原始HTML

    双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    8. 	<body>
    9. 			<div id="app">
    10. 				<!-- 这段HTML标签不解析 -->
    11. 				<p>Using mustaches: {{ rawHtml }}</p>
    12. 				<!-- 这段渲染的HTML标签会被解析 -->
    13. 				<p>Using v-html directive: <span v-html="rawHtml"></span></p>
    14. 			</div>
    15. 		</body>
    16. 		<script type="text/javascript">
    17. 			var  vm = new Vue({
    18. 				el:"#app",
    19. 				data:{
    20. 					rawHtml:'<span style="color:red">this is should be red</span>'
    21. 				}
    22. 			});
    23. 		</script>
    24. 	
    25. </html>
    26.

    显示结果页面

    Attribute(属性)

    Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
    格式：
    v-bind:属性=“变量”

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    8. 		<body>
    9. 			<div id="app" v-once>
    10. 				<div v-bind:class="color">
    11. 					test...
    12. 				</div>
    13. 			</div>
    14. 		</body>
    15. 		<script type="text/javascript">
    16. 			var  vm = new Vue({
    17. 				el:"#app",
    18. 				data:{
    19. 					// color:'red',
    20. 					color:'blue'  //设置绑定属性名为color的变量值为blue
    21. 				}
    22. 			});
    23. 		</script>
    24. 		<style type="text/css">
    25. 			.red{color: red;}
    26. 			.blue{color: blue;font-size: 100px;}
    27. 		</style>
    28.  
    29. 	
    30. </html>
    31.

     显示结果页面

    使用JavaScript 表达式

    Vue.js 都提供了完全的 JavaScript 表达式支持。

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    8. 		<body>
    9. 			<div id="app" v-once>
    10. 				<!-- 进行加法运算 -->
    11. 				<p>{{number + 1}}</p>
    12. 				<!-- 三元运算  今天是你的生日吗 ? '是，祝你生日快乐' : '不是，同样祝你今天快乐'-->
    13. 				<p>{{ ok ? 'YES' : 'NO' }}</p>
    14. 				<!-- 函数运算的使用  split()将字符串以没有内容的形式拆分成字母数组，reverse()将数组翻转，join()将数组连接成字符串-->
    15. 				<p>{{ message.split('').reverse().join('') }}</p>
    16. 			</div>
    17. 		</body>
    18. 		<script type="text/javascript">
    19. 			var  vm = new Vue({
    20. 				el:"#app",
    21. 				data:{
    22. 					number:10, //数字运算
    23. 					ok:0, //三元运算
    24. 					message:'vue' //函数运算
    25. 				}
    26. 			});
    27. 		</script>
    28.  
    29. 	
    30. </html>
    31.

     显示页面

  • 相关阅读:
    Linux 并发与竞争（二）
    doker中的Jenkins容器配置github
    uvm_event和uvm_event_pool
    7.2K Star！把数据库的每一行都监控到的强大数据流平台
    this指针
    Linux nc,netcat端口扫描
    如何在Vuex中处理异步操作？
    泰勒展开式记忆方法
    Docker + Nacos + Spring Cloud Gateway 实现简单的动态路由配置修改和动态路由发现
    Java 工程师面试题汇总，全会月薪至少 3W
  • 原文地址：https://blog.csdn.net/MrWangisgoodboy/article/details/125600515