index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这是我们的View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script>
</html>
效果图： 
v-bind.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<div id="app">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="#" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 10
}
})
</script>
</html>
效果图：
v-else.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h3 v-if="age >= 25">Age: {{ age }}</h3>
<h3 v-else>Name: {{ name }}</h3>
<h3>---------------------分割线---------------------</h3>
<h3 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h3>
<h3 v-else>Sex: {{ sex }}</h3>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
age: 28,
name: 'keepfool',
sex: 'Male'
}
})
</script>
</html>
效果图：
v-for.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
}
})
</script>
</html>
效果图：
v-if.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h3>Hello, Vue.js!</h3>
<h3 v-if="yes">Yes!</h3>
<h3 v-if="no">No!</h3>
<h3 v-if="age >= 25">Age: {{ age }}</h3>
<h3 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h3>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>
效果图：
v-on.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p><input type="text" v-model="message"></p>
<p>
<!--click事件直接绑定一个方法-->
<button v-on:click="greet">Greet</button>
</p>
<p>
<!--click事件使用内联语句-->
<button v-on:click="say('Hi')">Hi</button>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function() {
// // 方法内 `this` 指向 vm
alert(this.message)
},
say: function(msg) {
alert(msg)
}
}
})
</script>
</html>
效果图：
v-on.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h3>Hello, Vue.js!</h3>
<h3 v-show="yes">Yes!</h3>
<h3 v-show="no">No!</h3>
<h3 v-show="age >= 25">Age: {{ age }}</h3>
<h3 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h3>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>
效果图：
相关推荐
本教程“test_vue教程_DEMO_vue教程入门_vue_”旨在为初学者提供一个全面的Vue入门指南。 1. **Vue.js简介** Vue.js由尤雨溪开发，它引入了声明式的数据绑定和组件化，使得HTML、JavaScript和CSS的组织更加有序，...
**Termux入门指南** Termux是一款强大的Android终端模拟器，允许你在手机上执行Linux命令行操作，无需Root权限。这个工具对于开发者、安全研究人员以及对Linux感兴趣的用户来说，是一个非常实用的应用。它提供了...
vue框架移动端开发入门指南vue框架移动端开发入门指南
Vue 快速入门指南 本资源摘要信息主要介绍 Vue 框架的入门指南，从网页的发展历程到 Vue 框架的出现，讲解了前端开发的演变过程。 一、静态网页的产生 从 HTML 到 JavaScript 的出现，网页从静态到动态的转变。...
vue权威指南带书签，全方位讲解Vue.js,从入门到精通的权威指南
以上内容是对“Vue入门之数量加减运算操作示例”一文的知识点总结。本文以实例演示了如何在Vue.js中实现列表数据的动态展示、事件监听以及基于这些数据的数值计算。通过理解这些基本操作，初学者可以开始探索Vue框架...
Vue.js的官方文档提供了详尽的指南和API参考，帮助开发者有效地集成Vue.js到各种项目中。Vue.js的另一个优势是拥有非常丰富的生态系统，例如Vue CLI这个官方脚手架工具，可以让开发者非常方便地搭建项目基础架构，...
这篇快速入门指南将帮助你理解如何将TypeScript与Vue.js结合使用，创建更健壮的前端应用。 首先，让我们了解为什么要在Vue项目中使用TypeScript。TypeScript的主要优势在于其类型系统，它可以防止在编译阶段出现...
在“vue.js入门Demo（一）”中，我们将会探讨一系列基础概念和功能，帮助初学者快速上手Vue.js开发。 首先，我们从`01_HelloWorld`开始，这是每个学习新框架时的必经步骤。在这个文件中，你会看到如何创建一个简单...
Vue.js 入门指南 本指南将引导您了解 Vue.js 的基本概念、特性和优点，并指导您如何准备 Vue 开发环境和配置 Vue 项目目录结构。 什么是 Vue.js Vue.js 是一款渐进式框架，用于构建用户界面。它是一种 MVVM 库，...
尽管手册中声明的信息可能会随时更新，且对使用该手册而产生的任何误差或损害不承担责任，但是作为一本手册，它仍然为SystemVue的使用者提供了实用的入门指南。 用户手册作为软件产品的辅助资料，对于用户来说是...
开发者需评估项目需求，决定是否直接升级或逐步迁移，并根据官方文档进行迁移指南。 6. **最佳实践** - 生产环境中，推荐使用明确版本号的CDN链接或npm安装，以避免未预期的破坏。 - 使用Vue CLI创建项目，以获取...
最好的vue.js入门书籍，没有之一，不用看所谓的视频，这一本书就够了
Vue.js入门指南：从基础到进阶，掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
Vue.js，作为一款轻量级的前端JavaScript框架，由尤...总之，《Vue.js快速入门》是一本适合初学者的指南，它通过清晰的解释和实例，帮助读者快速理解和掌握Vue.js的核心特性和实战技巧，为今后的Web开发打下坚实基础。
Vue.js权威指南，从Vue.js基础入门到项目实践，适合Vue.js新手入门。
#### 四、SystemVue安装与入门指南 1. **软件安装**：获取官方提供的安装包后，按照安装向导的指引完成安装过程。注意检查系统的最低配置要求。 2. **快速入门**：对于初次接触SystemVue的新手用户来说，建议从...
本教程“Vue 项目构建与开发入门”旨在帮助初学者熟悉Vue项目的搭建和开发流程，通过掘金小册的形式，以Markdown文档分享了多个关键知识点。 首先，我们从“构建基础篇 2：webpack 在 CLI 3 中的应用.md”开始，...
VuePress快速入门指南 这是Packt发行的的代码库。 利用Vue.js的力量构建快速的静态网站 这本书是关于什么的？ 什么是静态网站生成器，为什么需要它们，它们比一般的博客或写作或内容工具更好吗？ 当您学习如何...