13Vue编写组件的三种方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<app-I-L-S></app-I-L-S>
<app-Templete></app-Templete>
<app-Template></app-Template>
<app-Name></app-Name>
</div>

<template id="appNameT">
<h1>这是直接元素定义为组件</h1>
</template>

<script>

const msg="Hello Vue Hello ES6";

//1.使用extend创建组件
//按照Java的开发思想，创建时采用驼峰命名法，使用的时候每个单词必须用-隔开
var appILS=Vue.extend({
template:'<h3>这是用extend创建的组件</h3>'
})

Vue.component('appILS',appILS);

//2.不使用extend创建组件
Vue.component('appTemplete',{
template: "<h3>这是不使用extend创建的组件</h3>"
})

//使用ES6新语法 ，完成元素拼接
//ES6中如果使用变量直接${msg}的方式
Vue.component("appTemplate",{
template: `<div>
<h1>这里采用多行的方式将元素进行组件化使用ES6的\`\`语法信息为：${msg}</h1>
</div>
`
})

Vue.component("appName",{
template:'#appNameT'
})
var vm=new Vue({
el : '#app',
data:{ //data用来存放每个页面的数据
msg:"Hello Vue Hello ES6"
}
})
</script>
</body>
</html>

所需依赖：

1.npm i vue

源码：http://files.cnblogs.com/files/sansui/13Vue%E7%BC%96%E5%86%99%E7%BB%84%E4%BB%B6%E7%9A%84%E4%B8%89%E7%A7%8D%E6%96%B9%E6%B3%95.zip

posted @ 2020-03-15 03:26 洋三岁阅读(471) 评论(0) 收藏举报

刷新页面返回顶部

洋三岁

Yang San Sui

13Vue编写组件的三种方法

公告