初识vue.js模板语法

别团等shy哥发育

发布于 2023-02-25 16:03:29

2.7K0

发布于 2023-02-25 16:03:29

初识vue.js模板语法

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框架所监控，从而实现数据双向绑定。