vue学习笔记（一）

vue学习笔记（一）

1.开始一个vue的实例

• 通过script标签引入vue文件

或者：

• 在html中创建一个VUE实例

• 浏览器渲染效果

hello.png

2.new Vue()的几点总结：

• 关于"el":

  • el是模版挂载的位置

  • el : '#app', //vue会自动查找相匹配的元素，将要渲染的模版挂载在该元素下

• 关于"template":

  • 如果实例化的时候，传入template，则在渲染的时候优先使用template中的模版进行挂载并渲染

  • template中的模版将会替换el中的挂载对象，并渲染在页面中

  • template的模版只允许有一个顶级根结点

  • template的渲染顺序：template => Vdom => html

• 关于data

  • 在data中声明的数据在Vue实例中都可以通过"{{ }}"进行读取

3.template 和 render()

template和render()都是用于渲染模版的，但两者有一定差异

• template的渲染顺序：template => Vdom => html

  render()的渲染顺序：Vdom => html

  相比之下，render()的渲染效率更高，只通过两个步骤对试图进行渲染

• 相比于template，render()更接近Vue的底层实现，渲染速度更快，提供的方法也更为复杂，更为灵活

4.render()的使用

• 实例化一个Vue()对象

  var app = new Vue({
    el : '#app',
    render : function(creatElement){
      return creatElement()
    },
    data : {
      message : 'hello world'
    }
  })
  

• createElement参数

  // @returns {VNode}
  createElement(
    // {String | Object | Function}
    // 一个 HTML 标签名、组件选项对象，或者
    // resolve 了上述任何一种的一个 async 函数。必填项。
    'div',
  
    // {Object}
    // 一个与模板中 attribute 对应的数据对象。可选。
    {
      arrts:{ id : "app"}//可传入标签的一些属性
    },
  
    // {String | Array}
    // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
    // 也可以使用字符串来生成“文本虚拟节点”。可选。
    [
      '先写一些文字',
      createElement('h1', '一则头条'),
      createElement(MyComponent, {
        props: {
          someProp: 'foobar'
        }
      })
    ]
  )