vue初学入门教程（VUE简单入门基础教程）
vue初学入门教程（VUE简单入门基础教程）<h1>{{mydetails()}}</h1>因此，在{{}}内部调用了mydetails函数。Vue实例中返回的值将打印在{{}}中。检查输出以供参考。接下来，我们有一些方法，其中我们定义了一个函数mydetails和一个返回值。它在div中分配为接下来，我们定义了数据对象。它具有值的名字，姓氏和地址。div内部分配了相同的内容。例如，<div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> </div>Firstname：{{firstname}}的值将在插值内替换，即{{}}，用数据对象（即Ria）中分配的值替换。姓氏也是如此。
要开始使用VueJS，我们需要创建Vue实例，该实例称为根Vue Instance。
句法
var app = new Vue({
// options
})
让我们看一个示例，以了解什么需要成为Vue构造函数的一部分。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{mydetails()}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>
vue_instance.js
var vm = new Vue({
el: '#vue_det'
data: {
firstname : "Ria"
lastname : "Singh"
address : "Mumbai"
}
methods: {
mydetails : function() {
return "I am " this.firstname " " this.lastname;
}
}
})
对于Vue，有一个名为el的参数。它采用DOM元素的ID。在上面的示例中，我们具有ID #vue_det。它是.html中存在的div元素的ID。
<div id = "vue_det"></div>
现在，我们要做的任何事情都会影响div元素，而不会影响它之外的任何内容。
接下来，我们定义了数据对象。它具有值的名字，姓氏和地址。
div内部分配了相同的内容。例如，
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>
Firstname：{{firstname}}的值将在插值内替换，即{{}}，用数据对象（即Ria）中分配的值替换。姓氏也是如此。
接下来，我们有一些方法，其中我们定义了一个函数mydetails和一个返回值。它在div中分配为
<h1>{{mydetails()}}</h1>
因此，在{{}}内部调用了mydetails函数。Vue实例中返回的值将打印在{{}}中。检查输出以供参考。
输出
现在，我们需要将选项传递给Vue构造函数，该构造函数主要是数据，模板，要挂载的元素，方法，回调等。
让我们看一下传递给Vue的选项。
#data-这种类型的数据可以是对象或函数。Vue将其属性转换为吸气剂/设定剂以使其具有反应性。
让我们看一下如何在选项中传递数据。
例
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj" lname: "Singh"}
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
</script>
</body>
</html>
输出量
console.log（vm.fname）; //打印Raj
console.log（vm。$ data）; 如上所示打印整个对象
console.log（vm。$ data.fname）; //打印Raj
如果存在组件，则必须从函数中引用数据对象，如以下代码所示。
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj" lname: "Singh"};
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
// must use function when in Vue.extend()
var Component = Vue.extend({
data: function () {
return _obj
}
});
var myComponentInstance = new Component();
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
</script>
</body>
</html>
对于组件，数据是一个函数，与Vue.extend一起使用，如上所示。数据是一个函数。例如，
data: function () {
return _obj
}
要引用组件中的数据，我们需要创建它的一个实例。例如，
var myComponentInstance = new Component();
要从数据中获取详细信息，我们需要执行与上面父组件相同的操作。例如。
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
以下是浏览器中显示的详细信息。
道具 - 道具的类型是字符串或对象的数组。它采用基于数组或基于对象的语法。据说它们是用于接受来自父组件的数据的属性。
例子1
Vue.component('props-demo-simple' {
props: ['size' 'myMessage']
})
例子2
Vue.component('props-demo-advanced' {
props: {
// just type check
height: Number
// type check plus other validations
age: {
type: Number
default: 0
required: true
validator: function (value) {
return value >= 0
}
}
}
})
propsData-用于单元测试。
类型 -字符串数组。例如，{[key：string]：any}。在创建Vue实例时需要传递它。
例
var Comp = Vue.extend({
props: ['msg']
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})
已计算 -类型：{[key：string]：功能| {get：Function，set：Function}}
例
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 2 }
computed: {
// get only just need a function
aSum: function () {
return this.a 2;
}
// both get and set
aSquare: {
get: function () {
return this.a*this.a;
}
set: function (v) {
this.a = v*2;
}
}
}
})
console.log(vm.aSquare); // -> 4
vm.aSquare = 3;
console.log(vm.a); // -> 6
console.log(vm.aSum); // -> 8
</script>
</body>
</html>
计算具有两个函数aSum和aSquare。
函数aSum仅返回this.a 2。函数aSquare再次获得和设置两个函数。
变量vm是Vue的一个实例，它称为aSquare和aSum。同样，vm.aSquare = 3从aSquare调用set函数，而vm.aSquare则调用get函数。我们可以在浏览器中检查输出，如下图所示。
方法 -方法将包含在Vue实例中，如以下代码所示。我们可以使用Vue对象访问该函数。
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 5 }
methods: {
asquare: function () {
this.a *= this.a;
}
}
})
vm.asquare();
console.log(vm.a); // 25
</script>
</body>
</html>
方法是Vue构造函数的一部分。让我们使用Vue对象vm.asquare（）调用该方法，在asquare函数中更新属性a的值。a的值从1更改为25，并且在以下浏览器控制台中也可以看到相同的值。
