要开始使用VueJS,无涯教程需要创建Vue实例,称为Root Vue实例。
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 。
<div id = "vue_det"></div>
现在,要做的任何事情都会影响div元素,并且不会影响它之外的任何内容。
接下来,定义了数据对象。它具有值的firstname,lastname和address,例如,
<div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> </div>
接下来有一些方法,其中定义了一个函数mydetails和一个返回值。它在div中分配为
<h1>{{mydetails()}}</h1>
因此,在{{}}内部调用了mydetails函数, Vue实例中返回的值将打印在{{}}中。
让无涯教程看一下传递给Vue的选项。
#data - 这种类型的数据可以是对象或函数。
<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);
以下是浏览器中显示的详细信息。
Props - Props的类型是字符串或对象的数组。
示例 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 - 用于单元测试。
Type - 字符串数组,例如,{[key:string]:any}。
var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } })
computed - type:{[key:string]:Function | {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>
Computed 具有两个函数 aSum 和 aSquare 。
函数aSum仅返回 this.a + 2 ,函数aSquare再次提供两个函数 get 和 set 。
变量vm是Vue的一个实例,它调用aSquare和aSum。同样,vm.aSquare=3从aSquare调用set函数,而vm.aSquare则调用get函数,如下图所示。
Methods - 方法将包含在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,并且在以下浏览器控制台中也可以看到相同的值。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
Python实战 · 从0到1搭建直播视频平台 -〔Barry〕