VueJS实例
要开始使用VueJS,我们需要创建Vue的实例,该实例称为根Vue实例.
语法
var app = new Vue({ // 选项 })
让我们看一个例子,以了解什么需要成为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"} //直接创建实例 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"}; //直接创建实例 var vm = new Vue({ data: _obj }); console.log(vm.fname); console.log(vm.$data); console.log(vm.$data.fname); //在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);
Props:组件的类型是字符串或对象的数组。它采用基于数组或基于对象的语法。据说它们是用于接受来自父组件的数据的属性。
例子1
Vue.component('props-demo-simple', { props: ['size', 'myMessage'] })
例子2
Vue.component('props-demo-advanced', { props: { //只需输入check height: Number, //类型检查以及其他验证 age: { type: Number, default: 0, required: true, validator: function (value) { return value >= 0 } } } })
propsData:用于单元测试。
Type:字符串数组。例如,{[key:string]:any}。在创建Vue实例期间需要传递它。例子
var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } })
Computed:类型:{[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: { //只获取,只需要一个函数 aSum: function () { return this.a + 2; }, //同时获取和设置 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>
计算有两个功能aSumandaSquare.
函数aSum刚返回this.a+2。功能再次平方两个功能getandset.
变量vm是Vue的一个实例,它调用aSquare和aSum。同样,vm.aSquare = 3从aSquare调用set函数,而vm.aSquare则调用get函数。
Methods:方法将包含在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(),财产的价值a在中更新asquare功能。 a的值从1更改为25,并且在以下浏览器控制台中也可以看到相同的值。