- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <div id="app">
- {{msg}}
- </div>
- <script src="vue.js">
- </script>
- <script>
- // 如果仅仅是实例化 vue 对象, 既有 el 又有 template, 如果 template 中定义模板内容
- // 那么 template 模板的优先级大于 el
- // 首先是有一个 App 根组件, 下面有三个子组件: header, aside, content
- // 第一步: 声子 Vue 中组件的首字母要大写, 跟标签区分
- // 组件中的 data 必须是个函数, 一定要有返回值
- let App = { // 跟的是一个对象 这个对象里 就是除了下面的 Vue 中, el 以外的所有属性
- data() {
- return {
- text: "我是子组件"
- }
- },
- // 第四步: 给子组件里写内容. 当前模板里的标签, 只用当前数据属性跟下面的根组件 Vue 没有关系
- // 在 < h2>{{text}}</h2 > 中的 {{text}} 部分可以放头部组件, 内容组件和侧边栏组件 ************
- template: ` < div id = "a" > <h2 > {
- {
- text
- }
- } < /h2>
- </div > `,
- // 给子组件定义方法 比如说 a 标签的超链接
- methods: {},
- }
- new Vue({
- el: "#app",
- // 绑定的是上面的 id="app"
- data() {
- return {
- msg: "alex"
- }
- },
- // 与生命周期有关
- // 用模板字符串
- // 定义模板
- // 第三步: 用子 把 < App />写下面就是 用子 但是里面的内容需要写到上面子组件里 App 里
- // template 可以不用写 但是要挂载到 el 上去
- template: ` < div class = "app" > <App > <App / ></div>
- `,
- components: {
- / / 第二步: 挂子父组件Vue里不仅是可以挂载一个App,
- 还可以挂载其他组件App // 如果 key 和 value 一样, 可以只写 App 替代 App:App
- }
- })
- </script>
- </body>
- </HTML>
局部组件的使用更改 以及全局组件的使用
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <div id="app">
- <App>
- </App>
- </div>
- <script src="vue.js">
- </script>
- <script>
- // 如果仅仅是实例化 vue 对象, 既有 el 又有 template, 如果 template 中定义模板内容
- // 那么 template 模板的优先级大于 el
- // 全局组件 *** 第一个参数是组件的名字, 第二个参数是 options
- // 全局组件声明之后, 可以再任意的组件里使用, 放到别的组件之后, 就成了别的组件的子组件了
- // 使用内置组件 slot 进行分发 让让别的组件中的 Vbtn 按钮显示不同的名称 ******
- Vue.component("Vbtn", {
- data() {
- return {}
- },
- template: ` < button > <slot > 按钮 < /slot></button > `,
- })
- // 首先是有一个 App 根组件, 下面有三个子组件: header, aside, content
- // 子组件 2
- // 第一步: 生子 2 挂子往 App 里挂, 不需要挂 Vue 里
- let Vheader = { // 对象
- data() {
- return {}
- },
- //template 是一个组件模板, 一定要用一个根 (父) 元素包裹起来, 所以一定要有一个 div 闭合 ****
- template: ` < div > <h2 > 生子是在子组件中 < /h2>
- <h2 style="color:red">挂子和用子是在父组件中</h2 > <Vbtn > </Vbtn>
- </div > `,
- }
- // 第一步: 声子 Vue 中组件的首字母要大写, 跟标签区分
- // 组件中的 data 必须是个函数, 一定要有返回值
- let App = { // 跟的是一个对象 这个对象里 就是除了下面的 Vue 中, el 以外的所有属性
- data() {
- return {
- text: "我是子组件"
- }
- },
- // 第四步: 给子组件里写内容. 当前模板里的标签, 只用当前数据属性跟下面的根组件 Vue 没有关系
- // 在 < h2>{{text}}</h2 > 中的 {{text}} 部分可以放头部组件, 内容组件和侧边栏组件 ************
- // 第三步: 用子 2 <Vheader></Vheader>, 下一步去对应模板 Vheader 的 template 里写内容
- template: ` < div id = "a" > <h2 > {
- {
- text
- }
- } < /h2>
- <Vheader></Vheader > <Vbtn > 登录 < /Vbtn>
- <Vbtn > 注册</Vbtn > <Vbtn > 提交 < /Vbtn>
- </div > `,
- // 给子组件定义方法 比如说 a 标签的超链接
- methods: {},
- components: {
- // 第二步: 挂子 2
- Vheader
- },
- }
- new Vue({
- el: "#app",
- // 绑定根元素 是上面的 id="app"
- data() {
- return {
- msg: "alex"
- }
- },
- // 根组件中 可以把 template 删除 直接在 id = "app" 的 div 中使用
- // 子组件中的 template 不能删除, 因为子组件中的结构最终会渲染到 id="app" 的 div 里面 < App></App>
- components: {
- // 第二步: 挂子 父组件 Vue 里不仅是可以挂载一个 App, 还可以挂载其他组件
- App // 如果 key 和 value 一样, 可以只写 App 替代 App:App
- }
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-2868686.html