本文深入探讨Vue.js中如何通过构造函数创建实例，解析不同选项的作用，包括挂载元素(el)、模板(template)、数据(data)及方法(methods)，并提供实例代码，帮助读者理解Vue.js的核心概念。
@实例和选项
#Vue.js都是通过构造函数Vue({option})创建一个Vue的实例。
#一个Vue实例相当于一个MVVM模式中的ViewModel。
#实例化的时候，可以传入一个选项对象，包含数据、模板、挂载元素、方法、生命周期钩子等选项。
@模板
#影响模板或DOM的选项
##el
###类型字符串，DOM元素或函数。作用是为实例提供挂载元素。
##template
###类型字符串，默认会将template的值替换挂载元素(即el值对应的元素)
#例:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>123</p>
</div>
<script id="tpl" type="x-template">
<div class="tpl">
<p>This is a tpl from script tag</p>
</div>
</script>
<script type="text/javascript">
var vm = new Vue({
el : '#app',
template:'#tpl'
});
</script>
</body>
</html>
@数据
#Vue.js可以通过data属性定义数据，如果传入data的是一个对象，Vue实例会代理起data对象里的所有属性。
#例子：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>{{a}}</p>
<p>{{b}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#app',
data:{
a:1,
b:null
}
});
vm.$data.b=2;
</script>
</body>
</html>
@方法
#可以通过选项属性methods对象来定义方法
#例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<button v-on:click="alert" />alert<button>
</div>
<script>
var vm = new Vue({
el : '#app',
data : {a : 1},
methods:{
alert:function(){
alert(this. a);
}
}
});
</script>
</body>
</html>
扫一扫
512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
