分类:
vue.js
官网:https://cn.vuejs.org/v2/guide/
vue.js学习日记第五章: http://www.tnblog.net/18323015640/article/details/2453
在开始学习vue组件之前,我们先简单了解一种新的语法:ES6
ES6是什么呢?它是JavaScript的一种新语法
ES=ECMA=SCMAScript
SCMAScript 是一个组织,也是一种规范,JavaScript就是基于这个规范来实现的,有兴趣的可以去了解一下,对使用vue还是很有帮助的
附上学习地址:http://es6.ruanyifeng.com/
我们今天写的组件就可以用到es6中的一种写法:反引号: ` `
// 引用组件,取名为ultag标签(注意,这里的名字不能出现大写字母,否则在调用的时候会不成功) Vue.component("ultag", { // 组件里面有一个模板的属性,可以直接在里面写JavaScript标签,写好了直接调用ulTag就可以了,传统的单引号写法不能换行 //template: '<ul><li>{{ name }} good morning!</li></ul>', // 这是ES6反引号的写法,支持换行,这里我们用一个ul>li标签来调用name属性和changeName的方法 template: `<ul><li> <p>{{ name }} good morning!</p> <button v-on:click="changeName">changeName</button> </li></ul>`, // 在组件中,data要以function的形式使用 data: function () { return { // 定义一个属性name,在vue对象中属性是用在标签中的,那么在组件中,我们可以直接使用属性 name: "everyone" } }, // 组件中方法的使用方式与vue对象中使用方式相同,这里定义一个改变name属性值的方法 methods: { changeName: function () { this.name = "everybody"; } } }); // 创建两个vue的对象,对象中只需要包括元素ID,data及methods等属性我们都在组件中实现 new Vue({ el: "#vue-app-one" }); new Vue({ el: "#vue-app-two" });
<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8" /> <title>vue.js</title> <!--引用vue的cdn--> <script src="https://unpkg.com/vue"></script> <!--引用自定义的css文件--> <link rel="stylesheet" href="style.css"> </head> <body> <div id="vue-app-one"> <!--调用组件中写好的标签,这样可以避免我们在HTML文件中写很多的标签--> <ultag></ultag> </div> <div id="vue-app-two"> <ultag></ultag> </div> <!--引用编写vue代码的js--> <script src="component.js"></script> </body> </html>
点击changeName按钮之后,可以看到我们写的组件调用成功了:
评价
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术