vue 注释template中组件的属性说明

2024-07-29 23:11:28

注释template中组件属性

想注释一个组件的属性，一直报错

[vue/no-parsing-error] Parsing error: unexpected-character-in-attribute-name

因为项目中引入了eslint-plugin-vue，对template有默认检测，因此就直接修改.eslintrc.js文件

 "unexpected-character-in-attribute-name": false,

发现也没啥用.

最后一番查找发现，这个插件是修改了VsCode的默认配置

你得打开Vscode的配置文件

Ctrl+Shift+P ，输入open workspace settings

再搜索 vetur.validation.template

把这玩意给设置成false就成(取消勾选项)

实例中的template讲解

代码

//别忘了引包
<body>
  <div id="app-1">
     {{msg}}
  </div>
  ================
  <div id="app-2">
     {{msg}}
  </div>
  =================
  <div id="app-3">
     {{msg}}
  </div>
  <script>
    //在vue.js中，可以使用template给元素添加模板，但是元素中只能有一个根元素，不能出现两个或两个以上的根同级元素。还可以在模板中绑定数据、表达式等。下面利用实例说明如何添加模板
    // 创建 Vue 实例，得到 ViewModel
    new Vue({
      el: '#app-1',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染'
      }
    });
    //结论:如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素);
    //注意:template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；
    new Vue({
      el: '#app-2',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染'
      },
      template:'<div>这是template属性模板渲染</div>'
    });
    //render
    new Vue({
      el: '#app-3',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染'
      },
      template:'<div>这是template属性模板渲染</div>',
      render: function(createElement){
        return createElement('div',
        // 参数2、这里相当于给标签加属性 例如：<div style='color:red,font-size: 14px'></div>
        {
　　　　　　 //给div绑定样式
　　　　　　 style:{
　　　　　　　　　width:'300px',
                height:'400px',
                color:'pink'
　　　　　　 },　
　　　　　　//给div绑定点击事件　　
            on: {
                click: () => {
                    console.log('点击事件')
                }
            }
        },
        // 参数3、参数中渲染的标签的子元素数组（可选）
        // [
        //    // 文本节点直接写就可以
        //    'text'
        // ]
        '这是render属性方式渲染。'
        );
      }
    });
  </script>
</body>

调试图片

原理说明图片

终极结论

el，template，render属性优先性

当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。

换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

vue组件讲解(is属性的用法)模板标签替换操作

vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,譬如ul里面要接上li的标签,引入is的属性后,你完全可以写成这样 <div class="language-html"> <ul> <li is="row"></li> </ul> </div> 这样会保证dom结构在浏览器的正常渲染,尽量避免在不正确的结构中直接使用组件 <script> Vue.com
详解template标签用法(含vue中的用法总结)

一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了display:none;属性.  <template><div>我是template</div
vue中template的三种写法示例

第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <!DOCTYPE html> <html>  <head> &
Vue如何实现组件的源码解析

官网上关于组件继承分为两大类,全局组件和局部组件.无论哪种方式,最核心的是创建组件,然后根据场景不同注册组件. 有一点要牢记,"Vue.js 组件其实都是被扩展的 Vue 实例"! 1. 全局组件 // 方式一 var MyComponent = Vue.extend({ name: 'my-component', template: '<div>A custom component!</div>' }); Vue.component('my-component
vue 注释template中组件的属性说明

目录注释template中组件属性实例中的template讲解调试图片原理说明图片终极结论注释template中组件属性想注释一个组件的属性,一直报错 [vue/no-parsing-error] Parsing error: unexpected-character-in-attribute-name 因为项目中引入了eslint-plugin-vue,对template有默认检测,因此就直接修改.eslintrc.js文件 "unexpected-character-in-at
解决Vue 给mapState中定义的属性赋值报错的问题

1. 实践环境 Vue 2.9.6 2. 问题描述 <script> import { mapState } from 'vuex'; export default { name: "displayCount", computed: { ...mapState({ ...略 count: state => state.a.count }) }, methods: { increaseCount () { this.count = this.count + 1 } }
Vue export default中的name属性有哪些作用

目录 Vue export default的name属性作用 1.组件自身的递归调用 2.当我们使用vue.js官方提供的调试工具调试 3.最后一种应该是使用比较多的情况 Vue如何获取组件name属性 Vue export default的name属性作用在划分模块和创建单页面组件时,常常写到name.嵌套路由中,index.vue极为常见. 那么在vue中,export default { name: ‘xxx’} 中的name到底有啥作用呢? 还是先回到官方的文档:官方链接官方文档已经
vue 事件获取当前组件的属性方式

目录 vue事件获取当前组件属性 click事件获取当前元素属性 Vue可以传递$event对象 Event对象的一些兼容性写法 vue事件获取当前组件属性 for循环把当前的item传递给绑定事件: <block v-for="(item, index) in data_list"> <div v-on:click='changeType(item)' class="ci "> <div class="cib" f
详解Vue改变数组中对象的属性不重新渲染View的解决方案

在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图. 受到javascript的限制,Vue不能检测到对象属性的添加或删除,因为vue在初始化实列时将属性转为getter/setter,所以属性必须在data对象上才能让vue转换它. 但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上:如下代码: Vue.set(obj, '_isHover', true);
vue组件中的样式属性scoped实例详解

Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di
详细聊聊vue中组件的props属性

目录问题一:那props具体是怎么使用呢?原理又是什么呢?往下看问题二:那如果我们想给年龄加1岁,怎么实现? 问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型? 问题四:可以限制类型,那是不是也可以限制是否必传呢? 问题五:props接收的属性值可以修改吗? 问题六:必须要修改props属性值,怎么办? 总结:配置项props 总结今天这篇文章,让你彻底学会props属性-- props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配
Vue 2.0学习笔记之Vue中的computed属性

Vue中的 computed 属性称为计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}
Vue中组件之间数据的传递的示例代码

Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: <div id="app"> <my-compo c="886"></my-compo> </div> 子组件中,用props声明这个值即可.并且在template里面可以直接使用{{c}}来获得这个属性,而不需要写为{{this
Vue v2.4中新增的$attrs及$listeners属性使用教程

前言多级组件嵌套需要传递数据时,通常使用的方法是通过vuex.如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,未免有点杀鸡用牛刀.Vue 2.4 版本提供了另一种方法,使用 v-bind="$attrs", 将父组件中不被认为 props特性绑定的属性传入子组件中,通常配合 interitAttrs 选项一起使用.之所以要提到这两个属性,是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁,业务清晰. 首先分析以下应用场景: A 组件与 B