Vue.js 起步

2021/4/2 Vue

# Vue.js实例

每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下:

# 语法
var vm = new Vue({
  // 选项
}
1
2
3
# 实例

HTML

<div id="App">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
1
2
3
4
5

JS

var vm = new Vue({
        el: '#App',
        data: {
            site: "送报少年",
            url: "okarin.cn"
        },
        methods: {
            details: function() {
                return  this.site + " - EL PSY CONGROO!";
            }
        }
    })
1
2
3
4
5
6
7
8
9
10
11
12

运行结果

site : 送报少年
url : okarin.cn
送报少年 - EL PSY CONGROO!!
1
2
3

可以看到在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。在上面实例中 id 为 App,在 div 元素中:

<div id="App">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
1
2
3
4
5

其中data 用于定义属性,实例中有两个属性分别为:site、url

methods 用于定义的函数,可以通过 return 来返回函数值。

用于输出对象属性和函数返回值。

Last Updated: 2021/12/19上午12:27:30