原

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

4480人阅读 2019/5/30 13:41 总访问：82608 评论：0 收藏：0 手机

分类: 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>