4.Vue2-构造器的用法_vue2构造器-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_70819559/article/details/134077529

题记

vue2构造器的用法

实例化vue

var vm = new Vue({
// 选项
})

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>实例</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>{{details()}}</h1>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vue_det',
			data: {
				site: "ng",
				url: "ng",
				alexa: "10000"
			},
			methods: {
				details: function() {
					return  this.site + " - 12138";
				}
			}
		})
	</script>
</body>
</html>

绑定id

<div id = "id名"></div>

输出数据

<div id="id名">
<h1>{{属性名}}</h1>
<h1>{{方法名()}}</h1>
</div>

改变属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>属性</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "ng", url: "ngxe", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 它们引用相同的对象！
    document.write(vm.site === data.site) // true
	document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "ng2"
    document.write(data.site + "<br>") // Runoob

    // ……反之亦然
    data.alexa = 1234
    document.write(vm.alexa) // 1234
    </script>
</body>
</html>

内置属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>实例</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>Alexa : {{alexa}}</h1>
	</div>
	<script type="text/javascript">
	// 我们的数据对象
	var data = { site: "ng", url: "ngxe", alexa: 10000}
	var vm = new Vue({
		el: '#vue_det',
		data: data
	})

	document.write(vm.$data === data) // true
	document.write("<br>")
	document.write(vm.$el === document.getElementById('vue_det')) // true
	</script>
</body>
</html>