快速入门Vue.js
2021-07-04 00:06
标签:实例 app mvvm 替换 example log 钩子 输出 快速入门 了解一门编程语言,Hello World是我们的罗马之路。 这段代码在画面上输出"Hello World!"。 使用Vue的过程就是定义MVVM各个组成部分的过程的过程。 在创建Vue实例时,需要传入一个选项对象,选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。 在这个示例中,选项对象的el属性指向View, 快速入门Vue.js 标签:实例 app mvvm 替换 example log 钩子 输出 快速入门 原文地址:http://www.cnblogs.com/ls1949/p/7122911.htmlDOCTYPE html>
html>
head>
meta charset="UTF-8">
title>title>
head>
body>
div id="app">
{{ 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>
el: ‘#app‘
表示该Vue实例将挂载到
这个元素;data属性指向Model,data: exampleData
表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法,最基础的形式是文本插值,使用一对大括号语法,在运行时{{ message }}
会被数据对象的message属性替换,所以页面上会输出"Hello World!"。