Vue 基础应用

VUE 实例

在我们使用 vue 之前我们需要事先得到 一个 vue 实例对象，我们需要传递一个对象用于描述你的 vue 实例。

const app = new Vue({
   });

DOM 相关

• el

  提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例

  const app = new Vue({
       
    el: "#app",
    // el: document.getElementById("app"),
  });
  

• template

  一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。你可以回忆一下之前学过的 innerHTML 的作用。

  const app = new Vue({
       
    el: "#app",
    template: "<span>hello world</span>",
  });
  

• render

  字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。如果实例化 Vue 中同时传递了 template 和 render 那么，template 会直接忽略【因为其实 template 也会走 render 的流程】。

  // render 函数中通过 createElement 创建虚拟节点（所谓虚拟节点就是使用js对象模拟DOM节点，然后在特定的方法中再解析成为真正的节点。这样做的好处是减少了重绘和回流），写法相对而言比较固定。
  
  //createElement 中需要传递三个参数。第一个是你需要渲染什么样的节点。第二个参数是该节点的描述，第三个是该节点的子节点数组。
  
  const app = new Vue({
       
    el: "#app",
    render: function(createElement) {
       
      return createElement(
        //  要渲染的标签名称
        "div",
        //  该标签的描述
        {
       
          // 可以写内置样式
          style: {
       
            color: "red",
            border: "1px solid black",
          },
          // 可以指定 class
          class: {
       
            cls1: true,
            cls2: false
          },
           // 普通的 HTML 特性
          attrs: {
       
            id: 'foo',
            name:"foo"
          },
          // 主要用于父子组件通讯
          props: {
       
          },
          // 事件监听
          on:{
       
            // 指定 作用域，同时传值
            click: handle.bind(window, 3),
          }
          // 仅用于组件，用于监听原生事件，对于使用 `vm.$emit` 触发的事件不敏感。
          nativeOn: {
       
            click: handle.bind(window, 3),
          },
          // 自定义指令
          directives: [],
          // 插槽名称
          slot:"",
          // 特殊属性
          key: '',
          ref: '',
        },
        // 该标签的子节点数组
        [
          "text", // 文本节点直接写就可以
          createElement(
            "div",
            {
       
              style: {
       
                color: "blue",
                border: "1px solid black",
              },
            },
            "hahah"
          ),
        ]
      );
    },
  });
  

给已有的对象数据添加新的属性

data: {
   
  title: "test",
  user: {
   },
}