Vue学习之路(3)-Dom定义选项

最新推荐文章于 2023-11-03 14:49:34 发布

新手司机开飞机

最新推荐文章于 2023-11-03 14:49:34 发布

阅读量1.6k

点赞数

分类专栏：客户端 vue js 前端插件文章标签：前端 js vue

本文链接：https://blog.csdn.net/MEdwardM/article/details/79321226

版权

vue 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

前端插件

6 篇文章 0 订阅

订阅专栏

引言

测试基于vue初始化的脚手架,不加router等其他的,使用index.html,编辑的入口main.js,结合控制台和页面观察输出结果,学习选项的使用

el选项



//限制：只在由 new 创建的实例中遵守。

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

//在实例挂载之后，元素可以用 vm.$el 访问。
//如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

//提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。
//因此不推荐挂载 root 实例到 <html> 或者 <body> 上。

//如果 render 函数和 template 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板
//此时，必须使用 Runtime + Compiler 构建的 Vue 库。

//index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>02</title>
  </head>
  <body>
    <div id="app"></div>
    <div class="app-class"></div>
    <div id="dom"></div>
    <div id="mount"></div>
    <div id="mount-dom"></div>


    <!-- built files will be auto injected -->
  </body>
</html>

//main.js
import Vue from 'vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<div><h1>Hello World</h1></div>'
})

new Vue({
  el: '.app-class',
  template: '<div><h1>Hello World Class</h1></div>'
})

new Vue({
  el: document.getElementById("dom"),
  template: '<div><h1>Hello World Dom</h1></div>'
})
var vm = new Vue({
  template: '<div><h1>Hello World Mount</h1></div>'
})

vm.$mount('#mount')

var vm1 = new Vue({
  template: '<div><h1>Hello World Mount Dom</h1></div>'
})
vm1.$mount(document.getElementById("mount-dom"))


//对象分别挂载在对应的div下

template选项

//类型：xml string
//内容:必须是存在唯一根节点的xml模板,或者css选择器,否则会编译不过,因为模板编译时会从根节点开始

// 一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。


//如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template" id="testTemplate"> 包含模板。
//vue文件中template节点<template></template>

//如果 Vue 选项中包含渲染函数，该模板将被忽略。

//index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>02</title>
  </head>
  <body>
    <div id="app"></div>
    <div id="testTemplate"></div>
    <div id="testVue"></div>

    <!-- built files will be auto injected -->
    <script type="x-template" id="templateId">
      <div>
         <h1>Test Template</h1>
      </div>

    </script>
  </body>
</html>

//main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import TestVue from  './components/TestVue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<div><h1>Hello World</h1></div>'
})

new Vue({
  el: '#testTemplate',
  template :'#templateId'
})

new Vue({
  el: '#testVue',
  //局部导入组件
  components: { TestVue },
  //使用组件
  template:'<test-vue/>'
})

//TestVue.vue
<template>
  <div>
    <h1>Test Vue Template</h1>
  </div>
</template>

<script>
    export default {
        name: "test-vue"
    }
</script>

<style scoped>

</style>

render选项和renderError选项

render选项

//类型：(createElement: () => VNode) => VNode

//字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。
//该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

//如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

//Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

//常用于使用渲染模板组件,第二个参数可以配置渲染内容,渲染函数可以通过this指向当前Vue对象获取配置信息


//main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
//render 函数的具体用法
//createElement的第一个参数:(必须) - {String | Object | Function}
new Vue({
  el: '#app1',
  render:function (createElement) {
    return createElement('div','Hello World');//一个标签字符,可以是组件,第二个参数可以是文本多信息
  }
})
//<div>Hello World</div>

new Vue({
  el: '#app2',
  render:function (createElement) {
    return createElement({
        template: '<div><h2>Hello world</h2></div>'//组件选项对象
     });
  }
})
//<div><h2>Hello world</h2></div>
new Vue({
  el: '#app3',
  render:function (createElement) {
      var func = function() {
      return {template: '<div><h4>hello world</h4></div>'}
       };
     return createElement(func());//一个返回HTML标签字符或组件选项对象的函数
  }
})
//<div><h4>hello world</h4></div>

//第二个参数(可选) - {Object}
//此方法多用于组件配置,渲染

Vue.component('elem', {
  render: function(createElement) {
    var self = this;
    return createElement('div', {//一个包含模板相关属性的数据对象
      'class': {
        foo: true,
        bar: false
      },
      style: {
        color: 'red',
        fontSize: '14px'
      },
      attrs: {
        id: 'foo'
      },
      domProps: {
        innerHTML: 'Hello World'
      }
    });
  }
});
new Vue({
  el: '#app4',
  template: '<elem></elem>'
});

//<div id="foo" class="foo" style="color: red; font-size: 14px;">Hello World</div>

//第三个参数(可选) - {String | Array}

Vue.component('example', {
  render: function(createElement) {
    var self = this;
    // return createElement('div', '文本');//使用字符串生成文本节点
    return createElement('div', [//由createElement函数构建而成的数组
      createElement('h1', '主标'),//createElement函数返回VNode对象
      createElement('h2', '副标')
    ]);
  }
});
new Vue({
  el: '#app5',
  template:"<example></example>"
});

new Vue({
  el: '#app6',
  render: h => h('div','箭头函数')
})


//index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>02</title>
  </head>
  <body>
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>
    <div id="app4"></div>
    <div id="app5"><h1>我不会出现</h1></div>
    <div id="app6"></div>
    <div id="app7"></div>

    <!-- built files will be auto injected -->
  </body>
</html>



renderError选项

//类型：(createElement: () => VNode, error: Error) => VNode

//只在开发者环境下工作。

//当 render 函数遭遇错误时，提供另外一种渲染输出。其错误将会作为第二个参数传递到 renderError。这个功能配合 hot-reload 非常实用。

示例：
new Vue({
  //ES6语法 ,可以直接将同名参数不使用key:value
  render (h) {
    throw new Error('oops')
  },
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
}).$mount('#app7')