晨晓

vue.js 学习日记第六章-vue组件初步学习

电脑版发表于:2019/5/30 13:41

          官网: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按钮之后,可以看到我们写的组件调用成功了:  

关于TNBLOG
TNBLOG,技术分享
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢