精华内容
下载资源
问答
  • Vue template用法

    2021-03-30 11:52:48
    文章目录一、在HTML5中二、在JavaScript中三、在Vue中写在vue构造器里写在template标签里写在script标签里(官方推荐) 一、在HTML5中 template标签:其内容隐藏在客户端之外 该内容在加载页面是不会呈现,不会渲染...

    一、在HTML5中

    • template标签:其内容隐藏在客户端之外
    • 该内容在加载页面是不会呈现,不会渲染出任何信息
    • 相当于自带属性:template {display: none;}
    <body>
        <template>
        	<!-- 该标签内容是不可见的 -->
            内容模板元素
        </template>
    </body>
    
    • 在css中设置属性可见
    <style>
        template{
            display: block;
            width: 100px;
            height: 100px;
            background: antiquewhite;
        }
    </style>
    <body>
        <template>
        <!-- 该标签内容依旧是不可见的 -->
            内容模板元素
        </template>
    </body>
    

    在这里插入图片描述
    在这里插入图片描述

    二、在JavaScript中

    • content属性:返回template元素的模板内容(一个 DocumentFragment)
    • template对象.content语法:可以调用getElementByIdquerySelectorquerySelectorAll方法来获取里面的子节点。其他方法不行。
    • innerHTML属性:可以获取template标签中的html
    • innerText属性:可以设置template标签中的内容(可见的)
    <body>
        <template id="tem">
            内容模板元素
            <h1 id="hh">模板元素</h1>
        </template>
    </body>
    <script>
        var tem = document.getElementById('tem');
        console.log('tem:',tem);
        console.log('tem.content:',tem.content);
        
        // var hh = tem.getElementById('hh'); 获取不到,报错
        //在template标签内部内容,必须要用.content属性才可以访问到
        var hh = tem.content.getElementById('hh');
        console.log('hh:',hh);
    
        console.log('tem.innerHTML:',tem.innerHTML);
        console.log('tem.innerText:',tem.innerText);
    </script>
    

    在这里插入图片描述

    三、在Vue中

    写在vue构造器里

    <body>
        <div id="app">
    
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            template:`<h1>我是模板</h1>`
        })
    </script>
    

    在这里插入图片描述

    写在template标签里

    <body>
        <div id="app">
            <template id="tem">
                <h1>我是模板</h1>
            </template>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            template:"#tem"
        })
    </script>    
    

    在这里插入图片描述

    写在script标签里(官方推荐)

    • type属性设置为x-template
    <body>
        <div id="app">
    
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="x-template" id="tem">
        <h1>我是模板</h1>
    </script>
    <script>
        var app = new Vue({
            el:"#app",
            template:"#tem"
        })
    </script>
    

    在这里插入图片描述

    展开全文
  • 文章目录 问题背景 总结: 问题背景 在公司写了个网页,网站运营搞起来了流量还不错... script> 那一刻我觉得直接把这段代码粘到Vue 组件 template中不就ok了,于是创建了一个Vue组件 Advertising: <template> <div> ...

    文章目录

    问题背景

    在公司写了个网页,网站运营搞起来了流量还不错,于是老板叫我们在网站中各个位置中插入广告位,谷歌提供的广告位大概长这样:

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=xxx"
         crossorigin="anonymous"></script>
    <!-- HomeTop_square -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="xxx"
         data-ad-slot="xxx"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    
    

    那一刻我觉得直接把这段代码粘到Vue 组件 template中不就ok了,于是创建了一个Vue组件 Advertising:

    <template>
      <div>
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=xxx"
                crossorigin="anonymous"></script>
        <!-- HomeTop_square -->
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="xxx"
             data-ad-slot="xxx"
             data-ad-format="auto"
             data-full-width-responsive="true"></ins>
        <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
    </template>
    

    没想到嘴角刚翘起来没多久控制台就报了个错:

    Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
    

    大概就是说,不允许在template中使用script标签,script的内容将不会被解析; 于是我换了种思路,尝试通过v-html 指令去注入整段html内容。。。

    结果自然是也不行, script的逻辑不会被执行

    再次尝试使用innerHtml去注入

    结果自然是也不行, script的逻辑不会被执行

    再次尝试使用appendChild去注入dom

    结果自然是也不行, script的逻辑不会被执行

    后来百度了好久发现一个开源组件 vue-append ,已经封装好了一个客插入带有script标签的html段,详细使用方法官网已经有了,我就不必赘述,我就简单演示一下我的使用方法吧。

    • npm引入
    npm install vue-append --save
    
    • 在vue-cli构建的项目的main.js配置文件进行配置
    import VueAppend from 'vue-append'
    Vue.use(VueAppend)
    
    • 创建广告位组件, 使用v-append直接注入带有script 的 html段
    <template>
      <div v-append="adhtml"></div>
    </template>
    
    <script>
    export default {
      name: "Advertising",
      props: {
        adhtml: String
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    • 在调用Advertising组件的父组件中给Advertising组件赋值文字开头的那段代码的即可测试。

    总结:

    开源就是爽…

    展开全文
  • vue template explorer

    2021-03-28 22:30:02
    Vue2的路径:template-explorer.vuejs.org/# Vue3的路径:vue-next-template-explorer.netlify.app/#

    Vue2的路径:template-explorer.vuejs.org/#

    Vue3的路径:vue-next-template-explorer.netlify.app/#

    展开全文
  • 如果你试图创建一个没有根结点的 Vue template,像这样:Node 1Node 2不出意外的话你会得到一个编译错误或者运行时错误,因为 template 必须只有一个根元素。通常你可以在外面套一个div容器来解决。这个容器元素没有...

    作者简介:

    李中凯

    八年多工作经验 前端负责人,

    擅长JavaScript/Vue。

    如果你试图创建一个没有根结点的 Vue template,像这样:

    Node 1
    Node 2

    不出意外的话你会得到一个编译错误或者运行时错误,因为 template 必须只有一个根元素。

    通常你可以在外面套一个div容器来解决。这个容器元素没有显示上的作用,只是为了满足模板编译的单个根节点的要求。

    Node 1
    Node 2

    通常情况下,像这样加一个套也没什么大不了的,但有时候确实需要多根结点的模板。本文我们就来看看这种情况,并提供一些可能的解决办法绕过这个限制。

    渲染数组

    在某些情况下,可能需要用组件渲染子节点数组,以包含在某个父组件中。

    例如,有些 CSS 特性要求特定的元素层级结构才能正确工作,比如 CSS grid 或 flex。在父子元素之间加一个容器是不可行的。

    还有一个问题是,向组件添加包裹元素可能会导致渲染出无效的HTML。例如,要构造一个 table,表格行

    的子元素只能是。

    简而言之,单个根结点的要求意味着用组件返回子元素的这种设计模式在 Vue 中行不通。

    Fragments

    单个根结点的限制在 React 中同样是个问题,但是它在 16 版本中给出了一个解决方案,叫做fragments。用法是将多个根结点的模板包裹在一个特殊的React.Fragment 元素中:

    class Columns extends React.Component {

    render() {

    return (

    HelloWorld

    );

    }

    }

    这样就能渲染出不带包裹元素的子元素。甚至还有个简写的语法<>:

    class Columns extends React.Component {

    render() {

    return (

    <>

    HelloWorld

    >

    );

    }

    }

    Vue 中的 Fragments

    Vue 中有类似的 fragments 吗?恐怕短期内不会有。其中的原因是虚拟 DOM 的比较算法依赖于单根节点的组件。根据 Vue 贡献者 Linus Borg 的说法:“允许 fragments 需要大幅改动比较算法……不仅需要它能正常工作,还要求它有较高的性能……这是一项相当繁重的任务……React 直到完全重写了渲染层才消除了这种限制。”

    此路不通,只能另辟蹊径了。

    带有 render 函数的函数式组件

    不过,函数式组件没有这种单根结点的限制,这是因为它不需要像有状态的组件那样用到虚拟 DOM 的比较算法。这就是说你的组件只需要返回静态的 HTML(不太可能,说实话),这样就可以有多个根结点了。

    还要注意一点:你需要使用 render 函数,因为 vue-loader 目前不支持多根节点特性(相关讨论)。

    TableRows.js

    export default {

    functional: true,

    render: h => [

    h('tr', [

    h('td', 'foo'),

    h('td', 'bar'),

    ]),

    h('tr', [

    h('td', 'lorem'),

    h('td', 'ipsum'),

    ])

    ];

    });

    main.js

    import TableRows from "TableRows";

    new Vue({

    el: '#app',

    template: `

    components: {

    TableRows

    }

    });

    用指令处理

    有个简单的办法绕过单根节点限制。需要用到自定义指令,用于操作 DOM。做法就是手动将子元素从包裹容器移动到父元素,然后删掉这个包裹容器。

    之前

    中间步骤

    之后

    这种做法需要一些技巧和工作量,因此推荐使用一个不错的插件 vue-fragments来完成,作者是 Julien Barbay。

    vue-fragments

    vue-fragments 可以作为插件安装到 Vue 项目中:

    import { Plugin } from "vue-fragments";

    Vue.use(Plugin);

    该插件注册了一个全局的VFragment组件,可以用作组件模板的包裹容器,跟 React fragments 的语法类似:

    Fragment 1
    Fragment 2

    我也不清楚这个插件对于所有用例的健壮性如何,但从目前的尝试来看,用起来还不错!

    作者简介:

    李中凯

    八年多工作经验 前端负责人,

    擅长JavaScript/Vue。

    本文已经获得李中凯老师授权转发,其他人若有兴趣转载,请直接联系作者授权。

    更多的学习资料,请看这里:

    展开全文
  • 故用到了vue中的filters过滤器对template模板中的时间直接进行过滤格式化。 这里以Vue格式化日期为例。 后台返回格式化前的日期: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BmaOhlmC...
  • vue项目运行,出警告,...type=template&id=6e849107&scoped=true& Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error)
  • Errors compiling template:Component template should contain exactly one root 在vue里面,template只能有一个直系子元素,在template里面的最外层套一个div即可。
  • 参考文献 :...vue creaeted app00 , 安装依赖 ; image.png django-admin startproject app , 把app目录复制到app00 , 创建apps文...
  • 第一种(字符串模板写法):直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html... Obviously, adapt this to your specific needs.Assumes you have a */new Vue({el: '#q-app',data...
  • vue-template-compiler是编译vue模板的包,传入模板返回AST抽象语法树。 const compiler = require('vue-template-compiler') const val = compiler.compile('<span class="active" :total="count">666</...
  • Vue 模板 template

    2021-06-18 02:39:59
    模板 template一、 Vue完整版,写在HTML里{{n}}+1new Vue({el:'#xxx',data: {n:0},methods: {add(){}}})二、 Vue完整版,写在选项里new Vue({template:`{{n}}+1`,data:{n:0},methods: {add(){this.n +=1}}}).$mount...
  • 简单的直接使用template:new Vue({el: '#app',template: ``,data:function() {return {value1: 0,value2: 'a',option1: [{ text: '全部商品', value: 0 },{ text: '新款商品', value: 1 },{ text: '活动商品', value...
  • 一、html5中的template标签html中的template标签中的内容在页面中不会显示。...我是template我是自定义表现abc二、template标签操作的属性和方法content属性:在js中template标签对应的dom对象存在content属性,对...
  • 场景:在template部分写的js,vetur提示的ts的类型校验失败 原因:toolClass是在main.js里面定义的全局方法,在本页的export并没有,于是报错 但是本项目使用的js,并没有办法扩展类型,所以只能关闭这个校验了 在...
  • vuetemplate的理解

    2021-08-22 20:33:20
    使用template不影响页面结构,只能结合v-if使用。
  • vue template模板

    2021-01-28 11:13:11
  • Document </div> <!-- 模板分离 方法一、 --> <script type="text/x-template" id="cpn5"> <div> <h1>标题5</h1> ...
  • vuetemplate的三种写法

    千次阅读 2021-03-07 07:22:15
    第一种(使用模板字符串)早期字符串拼接年代new Vue({el: "#app",template: ' {{message}} ',data: {message: '字符串拼接'}})第二种(使用script元素)HTML5标准之前的写法{{message}}new Vue({el: "#app"...
  • 自定义vue模板template

    2021-01-30 18:59:58
    输入vue直接按tab,就出来自定义的模板 我的自定义代码 <div id="app"> {{message}} </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', ...
  • Vuetemplate渲染过程

    2021-01-12 20:56:33
    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板,不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤把模板编译为render函数实例进行挂载, 根据根节点render函数的调用,递归...
  • template中使用@路径 vue

    2021-09-21 11:55:17
  • vueTemplate三种写法

    2021-03-24 22:29:39
    二、Template标签模板:在body中写template标签,然后通过id在构造器中绑定 三、script标签模板:在script标签中写,值得注意的是,此时的type=“x-template” ,也是通过id在构造器中绑定,可以通过src来引用外部...
  • 通过查看vue源码,可以知道Vue源码中使用了虚拟DOM(Virtual Dom),虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数 最终返回一个VNode(VNode就是Vue的虚拟DOM节点) 。本文通过对Vue源码中的AST...
  • 1、vuejs 是单页面应用,应用内的跳转,可以用router-link标签 我的: <router-link :to="'/'" >没有帐户?...</router-link> ...router-link tag='span' to="#" @click.native="handleEditPassword">...
  • Vue--template标签--自动补齐

    千次阅读 2021-03-06 13:54:16
    Vuetemplate里面的模板字符串输入标签自动补齐 一、打开 VScode 中设置 或点击左下角齿轮(设置图标)点击设置。 二、首先在输入框输入 settings.json 然后点击在settings.json编辑。 三、在你原有代码中添加下列...
  • Vue如何动态修改template?

    千次阅读 2021-01-12 01:21:00
    我是在一个子组件中实现的,你可以动态的添加该子组件:下面的content是markdown格式的数据,../common/markdown文件是自己写好的基于marked的解析函数,它会将Markdown格式析为Vue格式的字符串:![图片文字](url)// ...
  • ...//vue中的template没有html自动补全,提示,需要按以下两个顺序配置 "emmet.syntaxProfiles": { "vue-html":"html", "vue":"html" }, "files.associations": { "*.vue":"vue" }, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 257,758
精华内容 103,103
关键字:

vuetemplate

vue 订阅