vue2 基础（五）

淩亂°似流年 2022-05-27 12:45 226阅读 0赞

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；

这里只是用更为直观的方式让你了解一下vue；

\---------------------------------------------------------------------------------------------------------------

之前我们看了一些简单的一些概念性的东西，本篇我们看一下模板；

先来看一个之前写过的代码：

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8">

< title>vue2基础</ title>

< script src= "vue.js"></ script>

</ head>

< body>

< div id= "main">

< span>\{ \{message\}\}</ span>

</ div>

< script>

*let* abc =\{

message: "我们来学习模板吧"

\}

new Vue(\{

el: "\#main",

data:abc

\});

</ script>

</ body>

</ html>

上面的内容很简单，没什么复杂的内容，那么模板是什么呢？

< div id= "main">

< span>\{ \{message\}\}</ span>

</ div>

这个就是vue的模板，其实就是html,  这只是其中一种方式；

第二种方式：

我们来看看代码：

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8">

< title>vue2基础</ title>

< script src= "vue.js"></ script>

</ head>

< body>

< div id= "main">

< span>\{ \{message\}\}</ span>

</ div>

< script>

*let* abc =\{

message: "我们来学习模板吧"

\}

*var* str = "<div>我是模板</div>"

new Vue(\{

el: "\#main",

data:abc,

template:str

\});

</ script>

</ body>

</ html>

上面显示的结果是我们的 str 部分代替了原本存在的<div>部分,

我们再来看看Vue（）里面的  template  ,这个就是模板的意思，

除了上面的方式，还有我们可以通过 render() 来创造我们的模板；

这种方式不太容易说明，比上面的方式复杂，先知道有这么一种方式就可以了，

以后再细说；

总结：（1）什么是模板

（2）模板的几种表现形式

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue学习(五)基础入门-基础知识(15)-Vue-Router

路由 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1

矫情吗；*/ 2023年06月15日 07:30/ 0 赞/ 69 阅读

相关 vue学习(五)基础入门-基础知识(4)

v-bind ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

痛定思痛。/ 2023年06月12日 05:22/ 0 赞/ 34 阅读

相关 vue学习(五)基础入门-基础知识(3)

Mustache语法（双大括号语法） <body> <div id ="app"> <h1>{ {firstN

╰+攻爆jí腚メ/ 2023年06月11日 13:28/ 0 赞/ 35 阅读

相关 vue学习(五)基础入门-基础知识(2)

vue生命周期 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

ゝ一世哀愁。/ 2023年06月11日 13:28/ 0 赞/ 47 阅读

相关 vue学习(五)基础入门-基础知识(7)

v-for ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

﹏ヽ暗。殇╰゛Y/ 2023年05月29日 05:13/ 0 赞/ 34 阅读

相关 vue学习(五)基础入门-基础知识(6)

事件监听 v-on ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2023年05月29日 05:01/ 0 赞/ 11 阅读

相关 vue2 基础（六）

本篇我们了解一下 v-model , v-if , v-for 这三个指令；当你了解这个指令怎么用的，是干嘛的，就可以了，更多，更具体的信息

- 日理万妓/ 2022年05月27日 12:45/ 0 赞/ 224 阅读

相关 vue2 基础（五）

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；这里只是用更为直观的方式让你了解一下vue； \----------------

淩亂°似流年/ 2022年05月27日 12:45/ 0 赞/ 227 阅读

相关 Vue2.5基础

1.1 创建第一个Vue实例官方网站：https://cn.vuejs.org 学习 --> 安装刚开始学习Vue，使用最简单的安装方式，直接用<script>

水深无声/ 2022年01月07日 09:31/ 0 赞/ 273 阅读

相关 vue基础2

2.1 模板语法 > mustache 语法中是支持写js的 1. 用法：内容：必须加 \{ \{ js语法 \}\} 属性

女爷i/ 2021年10月01日 08:00/ 0 赞/ 360 阅读