Vue2 模板template的四种写法总结

如下所示：

<div id="app">
 <h1>我是直接写在构造器里的模板1</h1>
</div> 

<template id="demo3">
 <h1 style="color:red">我是选项模板3</h1>
</template> 

<script type="x-template" id="demo4">
 <h1 style="color:red">我是script标签模板4</h1>
</script> 

<script>
 var vm=new Vue({
  el:"#app",
  data:{
   message:1
  }, 

  //第2种模板 写在构造器里
  //template:`<h1 style="color:red">我是选项模板2</h1>` 

  //第3种模板 写在<template>标签里
  //template:'#demo3' 

  //第4种模板 写在<script type="x-template">标签里
  template:'#demo4'
 })
</script>

推荐第4种。

以上这篇Vue2 模板template的四种写法总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue-cli脚手架引入图片的几种方法总结
  • vue注册组件的几种方式总结
  • Vue组件开发技巧总结
  • vue-cli常用设置总结
  • Vue底层实现原理总结
  • vue-router项目实战总结篇
  • vue项目实战总结篇
  • VUE重点问题总结
赞 (0)

相关推荐

  • vue注册组件的几种方式总结

    1.全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2.局部注册 var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 将只在父模板可用 'my-component': Child } }) 3.扩展实例 // 定义一个混合对象 var myMi

  • Vue底层实现原理总结

    前言 最近在研究 剖析Vue原理&实现双向绑定MVVM 这篇文章,一边学习一边总结一下自己的思考. Vue是一个典型的MVVM框架,模型(Model)只是普通的JavaScript对象,修改它则视图(View)会自动更新.这种设计让状态管理变得非常简单而直观.那么Vue是如何把模型和视图建立起关联的呢? 实现原理概述 这是前言提到的文章里的代码,一段典型的体现了Vue特点的代码: <div id="mvvm-app"> <input type="te

  • vue项目实战总结篇

    这篇文章把小编前段时间做的vue项目,做个完整的总结,具体内容请参考本文. 这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署. 废话不多说了.干货直接上. 一. 必须node环境, 这次就不写node环境的安装了.过两天我会写个node环境的安装随笔. 二. node环境配好后.开整vue. 1. 安装vue脚手架. npm install -g vue-cli 2. 用脚手架搭项目(只是一行命令) vue init webpack-simple (项目名字) 或 vue init w

  • Vue组件开发技巧总结

    前言 临近毕业,写了个简单个人博客,项目地址是点我访问项目地址(顺便求star),本篇是系列总结第一篇.接下来会一步一步模仿一个低配版的Element 的对话框和弹框组件. 正文 Vue 单文件组件开发 当使用vue-cli初始化一个项目的时候,会发现src/components文件夹下有一个HelloWorld.vue文件,这便是单文件组件的基本开发模式. // 注册 Vue.component('my-component', { template: '<div>A custom compo

  • vue-cli脚手架引入图片的几种方法总结

    我个人常用的方法,一直在摸索更好的方法,如果各位大佬有什么建议,可以给我评论留言哦 1.import方法 第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径) 第二步:在data对象中定义一个属性edits,值对应edit 第三步:在template中 给标签绑定属性 最后刷新界面看效果就可以了! 2.static方法 第一步:图片放在static文件夹,在data对象的一个里定义属性pro_img,属性值是图片与.vue的相对路径 第二步

  • vue-cli常用设置总结

    基于vue-cli做了好几个项目了,想把一些自己的常用设置写出来,磨了好久,一看vue-cli3.0都快出来了,不能再磨了.. 路径相关 css内引用的资源 build -> utils.js // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { //less // Extract CSS when that option i

  • vue-router项目实战总结篇

    今天来谈谈vue项目{vue,vue-router,component}三大神将之一的vue-router.作为我们前后端分离很重要的实践之一,router帮我们完成了SPA应用间的页面跳转. 并且,配合axios这样的第三方库,我们可以实现配合后台接口的拦截器功能. 对于一个小型项目而言,router这个文件夹里面就包含了一个router.js就足够了, 但是,当我们的页面比较多的时候,我们就需要分出两个文件出来:一个定义我们的路由和组件,另一个实例化组件,并将路由挂载到vue的实例上. 基本

  • VUE重点问题总结

    1.组件三种挂载方式 自动挂载 var app3 = new Vue({ el: '#app-3', data: { seen: true } }) 手动挂载 // 可以实现延迟按需挂载 <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <script> var obj= {name: '张三'} var vm = new

  • Vue2 模板template的四种写法总结

    如下所示: <div id="app"> <h1>我是直接写在构造器里的模板1</h1> </div> <template id="demo3"> <h1 style="color:red">我是选项模板3</h1> </template> <script type="x-template" id="demo4&qu

  • vue中template的三种写法示例

    第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <!DOCTYPE html> <html> <!-- WARNING! Make sure that you match all Quasar related tags to the same version! (Below it's "@1.7.4") --> <head> &

  • Android中点击事件的四种写法详解

    Android中点击事件的四种写法详解

    Android中点击事件的四种写法 使用内部类实现点击事件 使用匿名内部类实现点击事件 让MainActivity实现View.OnClickListener接口 通过布局文件中控件的属性 第一种方法:使用内部类 基本步骤如下: 1. 新建一个MyOnClickListener类并实现View.OnClickListener接口 2. 重写View.OnClickListener接口中的OnClick(View view)方法 3. 给Button绑定一个监听器,并监听一个点击事件 示例代码如下

  • Android中activity跳转按钮事件的四种写法

    具体实现代码: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 方法1. 采用实现OnClickListener接口的类 ((Button) findViewById(R.i

  • Laravel 实现Controller向blade前台模板赋值的四种方式小结

    如下所示: <?php namespace App\Http\Controllers; use Illuminate\Http\Request; class TestController extends Controller { public function show(){ return view('show',['name'=>'asdfasdfasdfa']); //方法一 是把数组里的键值对赋值过去了,blade模板里用键名来取,如{{$name}} {{$gender}} //方法二

  • JS中for循环的四种写法示例(入门级)

    目录 1. 传统for循环 2. for of 循环 3. for in 循环 4. forEach方法 附完整实例: 总结 1. 传统for循环 for (init; cond; inc) { // body } 与C++或Java类似,for关键字后用小括号描述循环设置,在小括号中用两个分号;将循环设置隔断为三个部分,分别为: init初始化语句(指令),在整个循环开始前执行 cond条件(逻辑表达式),表示循环继续的条件 inc自增语句(指令),在每次循环体结束以后执行 整个循环的执行步骤

  • VUE中template的三种写法

    一.直接写在构造器中 <!-- 第一种写法:直接写在构造器里 --> <div id ="app1"> </div> <script> var vm1 = new Vue({ el: '#app1', data: {}, methods: {}, template:`<h3>在构造器中的文字</h3>` }); </script> 二.写在HTML自带的<template>标签中 <!

  • JAVA SWT事件四种写法实例解析

    一:匿名内部类写法 在一个组件下加入以下语句 text.addMouseListener(new MouseAdapter(){ public void mouseDoubleClich(MouseEVent e){ MessageDialog.openInformation(null,"","helloworld"): }}) 这种方式是在事件内部直接实现处理代码,优点是简单方便,但也存在缺点 ①:事件处理代码会分散的出现在各个部分,维护起来不方便: ②:如果代码

  • JS实现全屏的四种写法

    JS或jQuery实现全屏 JS写法一 .html <div class="container" <button id="full-screen">全屏</button> <button id="exit-fullscreen">退出</button> </div> .css /* Basic element styles */ html { color: #000; backgr

  • Android onClick按钮单击事件的四种常用写法

    这里使用四种onClick单击事件,来实现电话拔号器的DEMO. XML文件 <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="phone" android:ems="10" android:id="@+id/et_number" android:l

随机推荐