首页 > 其他分享 >Vue.js 模板语法

Vue.js 模板语法

时间:2023-03-15 18:45:25浏览次数:59  
标签:school Vue name js 语法 模板

视频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue模板语法有2大类:
					1.插值语法:
							功能:用于解析标签体内容。
							写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
					2.指令语法:
							功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。
							举例:v-bind:href="xxx" 或  简写为 :href="xxx",xxx同样要写js表达式,
									 且可以直接读取到data中的所有属性。
							备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子。

		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好,{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
			}
		})
	</script>
</html>

标签:school,Vue,name,js,语法,模板
From: https://www.cnblogs.com/chuixulvcao/p/17219599.html

相关文章

  • js 高频面试题详解
    一:js中的变量提升例1a=2;vara;console.log(a);答:2解析:它会将当前作用域的所有变量的声明提升到程序的顶部,上述代码等价为:vara;a=2console.log(a);//......
  • vue + djangorestframework實現文件下載功能
    1.安裝模塊及配置及配置先安裝django-cors-headers包pip3installdjangorestframeworkdjango-cors-headers 在setting文件中註冊appINSTALLED_APPS=['djang......
  • vue入门篇之Vue.js 组件
    Vue.js组件是该框架最强大的功能之一,能够扩展HTML元素并封装可重用的代码。通过组件系统,我们可以使用独立可复用的小组件来构建大型应用,几乎任何类型的应用的界面都可以......
  • 爬虫介绍、requests模块发送get请求、get请求携带参数、携带请求头、携带cookie、发送
    目录今日内容1爬虫介绍2requests模块发送get请求3get请求携带参数4携带请求头5携带cookie6发送post请求7响应Response8获取二进制数据9解析json#期终架构 -后......
  • vuex的应用
    需求:系统顶部添加项目下拉框,顶部下拉框选项改变时其他模块下拉框同时改变。1.开始进入系统的时候获取项目列表页面调用接口//获取项目列表store.dispatch("getProj......
  • js复制文字的方法
    functioncopyText(text){vartextValue=document.createElement('textarea');textValue.setAttribute('readonly','readonly');//设置只读属性防止手机上弹出软键......
  • requirejs:让人迷惑的路径解析
    转:requirejs:让人迷惑的路径解析(~~不错) 接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步。而......
  • 初始Vue
    Vue简介介绍与描述Vue是一套用来动态构建用户界面的渐进式JavaScript框架-构建用户界面:把数据通过某种办法变成用户界面-渐进式:Vue可以自底向上逐层地应用,简单应用只......
  • vue3+vite+vant文件上传
    1:文件上传下载1//上传文件2constafterRead=()=>{3for(letfileoffileList.value){4//1:加载状......
  • MVVM模式和第一个Vue程序
    Vue:MVVM模式和第一个Vue程序什么是MVVM​ MVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silv......