Vue.js 实例
Vue.js 是一种流行的前端JavaScript框架,以其简洁、灵活和高效的特点而受到开发者的喜爱。本文将通过一系列实例,深入探讨Vue.js的核心概念和应用,帮助读者更好地理解和掌握这一强大的工具。
1. Vue.js 基础
1.1 Vue实例的创建
Vue实例是Vue.js应用的核心。创建Vue实例的基本步骤如下:
var vm = new Vue({
el: '#app',
{
message: 'Hello Vue!'
}
});
在这个例子中,我们创建了一个新的Vue实例,并将其挂载到id为app
的DOM元素上。data
属性定义了Vue实例的数据对象,可以在模板中通过{
{ message }}
插值表达式来访问。
1.2 模板语法
Vue.js使用基于HTML的模板语法,允许开发者声明式地绑定数据到DOM上。以下是一些基本示例:
<!-- 文本插值 -->
<span>{
{ message }}</span>
<!-- 属性绑定 -->
<div v-bind:id="dynamicId"></div>
<!-- 条件渲染 -->
<p v-if="seen">Now you see me</p>
<!-- 列表渲染 -->
<ul>
<li v-for="item in items">{
{ it