Vue渲染组件的两种方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>72-Vue-组件渲染方式</title><script src="js/vue.js"></script>
</head>
<body>
<!--
1.Vue渲染组件的两种方式
1.1先定义注册组件, 然后在Vue实例中当做标签来使用
1.2先定义注册组件, 然后通过Vue实例的render方法来渲染2.两种渲染方法的区别
1.1当做标签来渲染, 不会覆盖Vue实例控制区域
1.2通过render方法来渲染, 会覆盖Vue实例控制区域
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!--    <one></one>-->
</div>
<template id="one"><div><p>我是组件222</p></div>
</template>
<script>Vue.component("one", {template: "#one"});// 这里就是MVVM中的View Modellet vue = new Vue({el: '#app',render: function(createElement){let html = createElement("one");return html;},// 专门用于监听数据变化的watch: {},// 这里就是MVVM中的Modeldata: {},// 专门用于存储监听事件回调函数methods: {},// 专门用于定义计算属性的computed: {},// 专门用于定义局部组件的components: {}});
</script>
</body>
</html>

Vue渲染组件的两种方式相关推荐

vue 在线编辑excel表格（原生和使用组件的两种方式）
vue 在线编辑excel表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template><div>& ...
java jframe添加面板_JFrame添加组件的两种方式
对JFrame添加组件有两种方式:1) 用getContentPane()方法获得JFrame的内容面板,再对其加入组件:frame.getContentPane().add(childCompont ...
vue实现分页的两种方式
vue实现分页的两种方式 (1)方法一:使用slice方法一次调用后端接口返回所有数据tableData,然后使用tableData.slice((currentPage-1)*pageSize,c ...
vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
Qt Qml动态创建对象/组件的两种方式
Qml动态创建对象有两种方式: a.使用Loader b.使用javaScript 1.Loader加载机制: 加载过程: 通过source,来加载qml文件. 通过sourceComponent,来 ...
vue组件定义、组件的切换、组件的通信、渲染组件的几种方式（标签、路由、render）...
vue中全局的概念是什么?---就是全局定义的功能,所有实例化的vm都可以使用, 全局定义的是挂在构造函数Vue上面的,所以实例化出的对象都可以使用这个功能 1.什么是组件?---从UI的角度把页面 ...
Vue创建组件的三种方式
1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"><!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到 ...
OpenLayers 6 代码绘制/draw交互组件绘制两种方式绘制椭圆过程详解
引言 OpenLayers可以通过代码绘制多种几何形状,也可以通过draw类型的交互组件绘制几何形状,官方实例提供了类如圆.折线.矩形.星形等方法.除此之外,椭圆这种图形其实也是非常常见的几何图形,但 ...
vue自定义组件的几种方式
1.全局组件定义方式示例: Vue.component("hello-component", {props: ["message"],template: &q ...

Vue渲染组件的两种方式

Vue渲染组件的两种方式相关推荐

最新文章

热门文章