初识vue.js模板语法

举报
别团等shy哥发育 发表于 2023/02/04 11:56:19 2023/02/04
【摘要】 @toc 1、简介  Vue.js使用了基于HTML的模板语法,允许开发者声明式地将呈现的DOM绑定至底层组件实例的数据。所有的Vue.js模板都是有效的HTML,可以被符合规范的浏览器和HTML解析器解析。  在底层,Vue将模板编译为虚拟DOM呈现函数,结合响应式系统,当应用程序状态发生变化时,Vue可以智能地计算出需要重新渲染和应用最小数量DOM操作的组件。 2、实例代码:<!DOCT...

@toc

1、简介

  Vue.js使用了基于HTML的模板语法,允许开发者声明式地将呈现的DOM绑定至底层组件实例的数据。所有的Vue.js模板都是有效的HTML,可以被符合规范的浏览器和HTML解析器解析。
  在底层,Vue将模板编译为虚拟DOM呈现函数,结合响应式系统,当应用程序状态发生变化时,Vue可以智能地计算出需要重新渲染和应用最小数量DOM操作的组件。

2、实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js的模板语法</title>
</head>
<body>
    <!--View-->
		<div id="app">
			<!--简单的文本插值-->
			<p>{{message}}</p>
			<!--使用 JavaScript 表达式-->
			<p>{{message.toUpperCase()}}</p>
			<!--HTML代码将以普通文本的方式输出-->
			<p>{{spanHtml}}</p>
			<!--输出HTML代码-->
			<p v-html="spanHtml"></p>
			<!--使用v-bind指令对HTML元素的属性进行绑定-->
			<a v-bind:href="url">新浪网</a><br>
			<a :[attribute]="url">新浪网</a>
			<p>
				<!-- <button v-on:click="sayHello">问候</button> -->
				<button @click="sayHello">问候</button>
			</p>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const App = Vue.createApp({
			  data(){
			    return {
			        message: "Hello Vue.js",
			  	    url: "http://www.sina.com.cn/",
			  	    spanHtml: `
			  	       <span style='color: red'>
			  	            HTML元素,以红色字体显示
			  	       </span>`,
					attribute:'href'
			    }
			  },
			  methods:{
				  sayHello(){
					  alert("你好!")
				  }
			  }
			});
			 const vm=App.mount('#app');
		</script>
</body>
</html>

3、解释

  在一个Vue.js框架的页面应用程序中,需要创建一个应用程序实例,(createApp()),这个实例将提供应用程序上下文,应用程序实例装载的整个组件树将共享相同的上下文。
  Vue3.0引入createApp()是为了解决Vue2.x全局配置带来的一些问题。createApp()是全局API,它接受一个根组件选项对象作为参数,该对象可以包含数据、方法、组件生命周期钩子等,然后返回应用程序实例自身。
  在组件选项对象中的data选项是一个函数,Vue在创建组件实例时会调用该函数。data()函数返回一个数据对象,Vue会将这个对象包装到它的响应式系统中,即转换为一个代理对象,此代理使Vue能够在访问或修改属性时执行依赖跟踪和更改通知,从而自动重新渲染DOM。数据对象的每个属性都被视为一个依赖项。
  创建了应用程序实例之后,可以调用实例的mount()方法,指定一个DOM元素,在该DOM元素上装载应用程序实例的根组件,这样这个DOM元素中的所有数据都会被Vue框架所监控,从而实现数据双向绑定。

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。