vue2 基础 （五）

最新推荐文章于 2024-05-04 23:30:03 发布
最新推荐文章于 2024-05-04 23:30:03 发布
阅读量137 收藏
点赞数
分类专栏： vue 文章标签： vue2 vue 模板 template
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvper/article/details/79999264
版权

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去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）模板的几种表现形式



cvper
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础之指令与过滤器
fanlingfang的博客
11-06 612
ES6模块化 ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。 ES6模块化规范中定义: 每个js文件都是一个独立的模块 导入其它模块成员使用import 关键字 向外共享模块成员使用export关键字 p230 Promise async/await EventLoop 宏任务和微任务 API接口案例 前端工程化 实际的前端开发: 模块化(js的模块化、css的模块化、资源的模
vue基础(二)
weixin_43370373的博客
07-02 85
本地应用 1. 内容绑定,事件绑定 v-text v-html v-on 2. 显示切换,属性绑定 v-show v-if v-bind 3. 列表循环,表单元素绑定 v-for v-on补充 v-model v-text <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
热门推荐
m0_67844671的博客
09-27 2万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
【前端开发---Vue2】史上最详细的Vue2入门教程，从基础到进阶带你彻底掌握Vue(一)
最新发布
前端菜鸟的自我修养
05-04 2525
欢迎大家持续关注【史上最详细的Vue2入门教程】系列文章，后面会持续更新！第一篇我们先来学习vue的基本概念、插值表达式、开发者工具安装、vue响应式、常用指令等等。
Vue2：基础入门
CaptainDrake的博客
08-03 439
ue简介、vue的基本使用、vue的指令、修饰符、过滤器（废）、小黑的书架、记事本
vue(2)、快速入门
qq_61026557的博客
07-18 206
vue快速入门
vue2 基础入门
ClearloveYt的博客
07-03 2745
目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu
vue基础（二）
qq_49039603的博客
10-12 130
vue基础指令 1、 v-html 指令的作用 在设置元素的innerHTML 内容中有html结构会被解析为标签 v-text指令无论内容是什么,只会解析为文本 <div id="app"> <p v-html="content"></p> <p v-text="content"></p> <p v-pre>{{msg}}</p> <
vue2 2017重制版
08-07
Vue 2.0是该框架的一个重要版本，发布于2017年，它在Vue 1.x的基础上进行了许多优化和改进，旨在提供更好的性能、更强大的功能以及更稳定的API。本篇文章将深入探讨Vue 2.0中的关键知识点。 一、Vue实例和组件 Vue ...
vue.js2.chm中文手册下载
11-28
本篇将基于提供的"vue.js2.chm中文手册"，深入解析Vue.js 2.0的关键知识点。 一、基础介绍 Vue.js的核心理念是数据驱动视图，通过声明式的数据绑定，让开发者能够专注于应用逻辑，而不是DOM操作。它的核心组件包括...
Vue2.x开发实战
05-11
本实战指南将带你深入探索Vue2.x的精髓，从基础到高级，逐步构建起全面的Vue开发技能。 一、Vue2.x基础 1. 安装与设置：Vue可以通过CDN链接、npm或yarn进行安装，创建项目时推荐使用官方提供的CLI（命令行工具），...
Vue2.js新手极速入门教程PDF高清
07-01
Vue2.js新手极速入门教程PDF高清 Vue2.js新手极速入门教程PDF高清 Vue2.js新手极速入门教程PDF高清
vue2.x基础笔记（大部分）
05-23
vue2.x基础笔记（大部分）
vue基础知识学习文档
03-28
Vue基础知识学习文档 本文档旨在详细介绍 Vue 框架的基础知识点，涵盖了 Vue 模板语法、指令语法、数据绑定、计算属性、监视属性、事件、组件、插槽、Vuex、路由、响应式数据等多个方面。 一、模板语法 Vue 模板...
VUE2基础知识（详细版）
weixin_59418570的博客
05-28 1651
组件是实现应用中局部功能代码和资源的集合。v-xx开头，实质是js代码的语法糖。虚拟DOM -- VDOM -- 是一个js对象有些属性需要动态来绑定，比如：动态绑定a元素的href属性；动态绑定img元素的src属性。v-bind可以给任何属性赋值，是从数据到页面的单向数据流（从data指向视图）
Vue 2的入门
m0_51024444的博客
09-19 2483
Vue 2的学习
【Vue2从入门到精通】超简单的vue2开发环境安装
全栈弄潮儿
03-17 5091
Vue是一款非常流行的JavaScript框架，它可以帮助开发者轻松地构建交互式的Web应用程序。在本文中，我们将会讲解如何搭建Vue2的开发环境，让你可以快速开始开发自己的Vue应用程序。
VUE 2 ----＞快速入门
ClearloveYt的博客
07-22 953
vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。自定义指令的分类私有自定义指令全局自定义指令私有自定义指令在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：在使用自定义指令时，需要加上 v- 前缀// 定义名为 focus 的指令，指向一个配置对象focus: {// 当指令第一次被绑定到元素上的时候，会立即触发 mounted 函数。
Vue2快速入门
x2624252655的博客
10-28 157
后端所需要学习的Vue2快速入门,这里没有繁杂的知识点,有的只是干货
前端Bootstrap+Es6+vue学习笔记
06-10
表格：通过添加 class 和实现 JavaScript 初始化来设置不同样式和功能五 内置插件1.弹窗：通过添加 class 和实现 JavaScript 初始化来设置不同样式和功能2.下拉菜单：通过添加 class 和实现 JavaScript 初始化来设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值