vue的两大特性

vue有两大特性

指令—用来操作dom

组件—组件是html css js等的一个聚合体

  1. 组件化
    1.将一个具备完整功能的项目 的一部分进行多处使用
    2.加快项目的进度
    3.可以进行项目的复用
  2. 要想实现组件化,那么我们使用的这一部分必须是完整的,我们把这个完整的整体称之为组件
  3. 插件: index.html img css js
  4. 如果能将html img css js等多个部分放在一起 vue将这些文件称之为单文件组件(xx.vue)

基础的组件创建

  • Vue 是构造器函数
  • Vue.extend() 是 vue用来扩展 vue功能( 组件 )的
  • Vue决定不进行 实例化 Vue.extend(),vue借鉴了 react,react中组件是以标签的形式使用的,
  • vue 决定组件要以标签的形式呈现
  • 为了符合 html / html5的规则,所以组件的标签化使用必须注册,
  • 注册说白了就是用来解析这个标签化的组件未html能识别的标签
  • 组件使用前必须进行注册
  1. 全局注册
  
  1. 局部注册
  
  1. 注册的简写
  

需要掌握的

  1. vue是如何扩展组件的?
  2. vue为什么要以标签的形式使用组件
  3. 组件使用为什么要注册
  4. 组件的嵌套
  

组件的一些特殊使用规则【is 规则】

  /* 
    is规则
      ul>li  ol>li   table>tr>td      select>option

    如上直属父子级如果直接组件以标签化形式使用,那么就会出现bug

    解决: 使用is规则: 通过is属性来绑定一个组件
     

    案例: table
  */

  Vue.component('Hello',{
    template: '  4   2  3 '
  })

  new Vue({
    el: '#app'
  })

组件的template


  /* 
    template使用: 
        1. 实例范围内使用
          template中的内容被当做一个整体了,并且template标签是不会解析到html结构中的
        2. 实例范围外使用
          实例范围外template标签是不会被直接解析的

    组件要想使用template使用,我们采用第二种

    但是使用第二种template使用后,有个弊端,template标签结构会在html文件中显示

    解决: 使用webpack、gulp等工具编译,将来要用vue提供的单文件组件
   */

  Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })

你可能感兴趣的:(vue.js)