前言
上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。
一、插值
1.1、文本
1.2、html
1.3、属性
1.4、class、style绑定
1.5、表达式
在Vue的模板语法中，插值是一种常用的方式来动态地将数据渲染到视图中。Vue使用双大括号{{}}作为插值的语法标记。
最简单的用法是在模板中直接插入数据值，例如：
{{ message }}
上面的代码将把Vue实例中的
message属性的值插入到元素中。
插值还支持JavaScript表达式，你可以在插值中使用表达式来执行计算或调用函数，例如：
{{ message.toUpperCase() }}
上面的代码将把
message属性的值转换为大写后插入到元素中。
另外，插值还可以用在HTML属性中，例如：
{{ linkText }}上面的代码使用
v-bind指令将url属性的值绑定到元素的href属性上，并将linkText属性的值插入到元素中显示的文本内容中。需要注意的是，在插值中不能使用括号或赋值语句，因为插值只接受单个表达式。
总结起来，Vue的模板语法中的插值提供了一种简洁而灵活的方式来将数据动态地渲染到视图中可以直接插入数据值，也可以使用JavaScript表达式进行计算和函数调用。此外，插值还可以用在HTML属性中。
案例：
完整代码：
插值
{{msg}}
{{msg}}
演示适用html样式
演示vue 中的属性值
演示Class与style绑值
二者合为一体
演示表达式
{{str.substr((0,5))}}
月薪：{{number-2000}}
{{ok ? '好' : '不好'}}
商品id
// 绑定边界
new Vue({
el: '#app',
data() {
return {
msg: '七里香的名字很美',
htmlstr: '雨水',
val: '输入的值',
str: '人生苦短，我用Java',
number: 19999,
ok: false,
id: 'goods_',
colorblue: 'color: blue;',
f200: 'f200'
}
}
})
二、指令
核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style=”display:none”
v-for：类似JS的遍历，
遍历数组: v-for=”item in items”, items是数组，item为数组中的数组元素
遍历对象: v-for=”(value,key,index) in stu”, value属性值,key属性名，index下标
v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
v-for/v-model一起绑定[多选]复选框和单选框
v-bind插值：v-bind指令用于在HTML属性中插入动态的数据。可以简写为:。![]()
上述代码中，
:src将会把imageSrc变量的值作为src属性的值进行插值。
v-on插值：v-on指令用于在HTML事件处理程序中插入动态的方法。可以简写为@。上述代码中，
@click将会将handleClick方法插入到click事件处理程序中。
v-html插值：v-html指令用于将数据作为原始HTML插入到元素中。上述代码中，
htmlString变量的值将会被作为原始HTML插入到元素之中。
v-text插值：v-text指令用于替代双大括号插值，将指定的数据直接作为文本内容插入到元素中。上述代码中，
message变量的值将会作为元素的文本内容。
注意重点：面试考题！！！
区别v-if与v-show？
v-if：v-if指令根据条件表达式的值来控制元素的存在与否。当条件为true时，元素会被添加到DOM中；当条件为false时，元素会被从DOM中移除。它是惰性的，在条件变为true时才会进行渲染，可以避免不必要的DOM操作。当
isShown为true时，元素会被渲染到视图中；当isShown为false时，
v-show：v-show指令根据条件表达式的值来控制元素的显示或隐藏，但不会对DOM结构进行改变。当条件为true时，元素会以CSS的方式进行展示；当条件为false时，元素会以CSS的方式隐藏。即使在条件为false时，元素仍然存在于DOM中，只是在视觉上被隐藏了。当
isShown为true时，元素会以可见的方式展示；当isShown为false时，display: none隐藏，但仍然在DOM中存在。区别总结：
v-if：根据条件决定元素是否存在于DOM中，惰性渲染。v-show：根据条件决定元素的显示与隐藏，通过CSS控制。一般而言，如果需要在条件变化频繁的情况下切换元素的显示与隐藏，或者初始渲染时元素可能不会被显示的情况下，推荐使用
v-show。而如果需要在条件改变时有更高的渲染开销，或避免初始化时不必要的渲染，使用v-if更为合适。
案例：
代码：
指令 new Vue({ el: '#app', data() { return { degree: 78, ok: false, hobby: [{ id: "1", name: "乒乓球" }, { id: "2", name: "滑板" }, { id: "3", name: "跑步" } ], }; } })演示v-if 使用
请输入成绩：1-100等级E等级D等级C等级B等级A输入成绩不合法演示v-show 与 v-if区别
showif演示v-for
{{h.name}}{{h.name}}三、过滤器
过滤器
全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容});
局部过滤器
new Vue({
filters:{'filterName':function(value){}}});
vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
{{ name | capitalize }}
注1：过滤器函数接受表达式的值作为第一个参数
注2：过滤器可以串联
{{ message | filterA | filterB }}
注3：过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
注4：js定义一个类
function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法
Stu.update(a,b){};//添加一个新的类方法
四、计算属性、过滤器
计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
computed:{}
$(function() {
setTimeout(function () {
var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode');
if (mathcodeList.length > 0) {
for (let i = 0; i < mathcodeList.length; i++) {
if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) {
var alt = mathcodeList[i].alt;
alt = '\(' + alt + '\)';
var curSpan = $('');
curSpan.text(alt);
$(mathcodeList[i]).before(curSpan);
$(mathcodeList[i]).remove();
}
}
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
}, 1000)
});阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作
〔Lisa〕
关注
关注
1
点赞
踩
1
收藏
觉得还不错?
一键收藏
打赏
3
评论
复制链接
vue基础知识学习文档 完整版PDF04-28本文将介绍Vue的基础知识，包括Vue实例、组件、指令、计算属性、生命周期钩子等。我们将深入了解Vue的核心概念和语法，以及如何使用Vue构建动态和响应式的Web应用程序。此外，我们还将探讨Vue的优点和适用场景，以及...Vue 2.x教程之基础API11-27本文主要介绍的是关于Vue 2.x之基础API的相关内容，主要内容如下 模板语法（文本插值、属性绑定、JS表达式、过滤器、指令） Vue实例（viewModal(属性+函数)、生命周期） 计算属性和监听器 (computed(get,set) 与 ...3条评论
您还未登录，请先
登录
后发表或查看评论vueDemo.zip04-21四小时搞定vue基础语法。该文件讲解了vue的常用模板语法的基本使用情况，拥有配套练习demo进行复习，加深印象，可以版主你快速掌握Vue基础知识面试题及答案03-21带有详细答案的Vue基础面试，包括生命周期函数，模板语法，组建通信，数据双向绑定及路由等。适合新手熟悉基础概念及面试准备
JavaScript之Vue.js【入门基础】11-26本篇将简单介绍一下Vue.js，并在Node.js环境下搭建一个简单的Demo。 一、简介 我个人理解，Vue.js是一套前端视图层的框架，它只关心视图展示和数据绑定，它的一些语法与Angular 1非常相似，如果有Angular 1相关的...React-实现循环轮播qq_40891322的博客09-14
262
问题：写字体轮播的时候，不使用swiper库，使用top定位，让字体过渡上下移动，发现写成的效果就是每次播到最后一个元素后，只能突然展示第一个元素，失去了那种上下移的动过渡效果。Vue知识系列（4）每天10个小知识点张羽的博客09-13
284
✏️ 评论，你的意见是我进步的财富！4.1.5-检查网页内容是否存在信息泄露qq_44232452的博客09-13
128
程序员在他们的源代码中包含详细的注释和元数据是很常见的，甚至建议这样做。但是，HTML 代码中包含的注释和元数据可能会泄露潜在攻击者不应获得的内部信息。应进行注释和元数据审查，以确定是否有任何信息被泄露。此外，某些应用程序可能会泄漏重定向响应正文中的信息。对于现代 Web 应用程序，在前端使用客户端 JavaScript 正变得越来越流行。流行的前端构造技术使用客户端JavaScript，如ReactJS，AngularJS或Vue。前端设计模式和设计原则之设计原则weixin_45678402的博客09-11
299
前端设计模式和设计原则之设计原则Web Storage是什么？Web Storage详解CZ-001的博客09-18
29
Web Storage中包含两个关键的对象，分别是localStorage对象和sessionStorage对象，它们都是Web Storage的实例，所以都能使用Web Storage接口提供的方法和属性。Web Storage类似于Cookie,但相比Cookie可以减少网络流量，因为Web Storage存储的数据不会发送给服务器，而Cookie存储的数据会由浏览器通过HTTP请求自动发送给服务器。将数据存储在WebStorage可以减少数据在浏览器和服务器间不必要地来回传递。Vue3为什么推荐使用ref而不是reactive前端开发工程师博客09-18
33
reactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代option api的data的替代,可以存放任何数据类型,而reactive声明的数据类型只能是对象;先抛出结论,再详细说原因:非必要不用reactive!(官方文档也有对应的推荐)官方原文:建议使用ref()作为声明响应式状态的主要 API。【校招VIP】前端JS语言考点之px rem等单位shuize123的博客09-15
77
rem vm等问题是前端面试里的高频题型。但是不少同学并不能很清楚的说明为什么在有px单位之后，还需要rem单位？往往会往不对的自适应方向回答。
作为基础性问题，只要回答不出来，面试就通过不了，需要真正理解，而不是死记硬背......浅析vue中computed,method,watch,watchEffect的区别潇湘子的博客09-15
71
【代码】浅析vue中computed,method,watch, watchEffect区别。[js电子榨菜]事件传递机制 event propogateweixin_62697030的博客09-12
143
电子榨菜Vue3表单weixin_46592197的博客09-11
130
/ 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 中。// 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 中。'比亚迪官网rnhttps://www.bydglobal.com/cn/index.html'// 定义Vue3的HelloVueApp应用。js-数字格式化千分位qq_40007317的博客09-13
98
数字格式化千分位1234567890 转 1,234,567,890vue列表跳转详情，记录列表滚动不变weixin_39054337的博客09-14
107
【代码】vue列表跳转详情，记录列表滚动不变。vue3 - setup之defineEmitsyasinawolaopo的博客09-13
131
vue3 setup语法糖的defineEmits基本使用【前端项目】博客系统(页面设计)大二小白C++进阶之路09-12
388
一个简单的前端页面项目——博客系统vscode自动生成vue模板插件最新发布09-19vscode自动生成vue模板插件是一种在Visual Studio Code编辑器中使用的工具，它能够帮助开发人员快速生成Vue组件的初始代码。这种插件的主要功能是根据开发者输入的组件名称，在当前工作目录下自动生成Vue组件的基础模板。它可以生成包含Vue组件所需的基本结构和语法的文件，包括Vue文件、HTML模板和CSS样式。
使用这个插件，开发者只需要在编辑器的文件资源管理器中右键点击所需的目录或文件夹，然后选择生成Vue组件模板的选项。然后，插件将在目标文件夹中创建一个以组件名称命名的文件，并在文件中自动生成Vue的基础代码。
生成的Vue模板文件包含了基本的结构，包括Vue组件的模板部分、样式部分和逻辑部分。开发人员可以根据自己的需要进行修改和扩展，以满足具体的业务需求。
使用这个插件可以有效地提高开发效率，减少手动书写Vue组件模板的时间和工作量。服务器托管网它可以帮助开发人员快速创建标准化的Vue组件，提供了一个良好的起点，使开发人员能够更快地开始实际的业务代码编写。
总而言之，vscode自动生成vue模板插件是一种便利的工具，能够帮助开发人员快速生成Vue组件的初始代码，提高开发效率。它是Vue开发中的一个有用的辅助工具。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助提交
window.csdn.csdnFooter.options = {
el: '.blog-footer-bottom',
type: 2
}
〔Lisa〕
CSDN认证博客专家
CSDN认证企业博客
码龄1年
暂无认证
- 59
- 原创
- 809
- 周排名
- 2万+
- 总排名
- 1万+
- 访问
- 等级
私信关注
(adsbygoogle = window.adsbygoogle || []).push({});
![]()
热门文章
Win11系统如何安装Oracle数据库（超级详细）
1142Layui之用户管理实例（对数据的增删改查）
1039关于eclipse导入部署具有增删改查的项目
866Mybatis （3）-----分页的运用
833关于会议OA需求分析与开发功能设计
745分类专栏
Java
3篇
初学
3篇
最新评论
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐提交
最新文章
- Vue系列之入门篇
- 2019版本idea启动tomcat8.5版本控制台中文乱码
- SpringMVC自定义注解
202309月
12篇08月
13篇07月
15篇06月
15篇04月
1篇03月
4篇(adsbygoogle = window.adsbygoogle || []).push({});
![]()
目录
$("a.flexible-btn").click(function(){
$(this).parents('div.aside-box').removeClass('flexible-box');
$(this).parents("p.text-center").remove();
})
(adsbygoogle = window.adsbygoogle || []).push({});
![]()
目录
分类专栏
Java
3篇
初学
3篇
目录
var timert = setInterval(function() {
sideToolbar = $(".csdn-side-toolbar");
if (sideToolbar.length > 0) {
sideToolbar.css('cssText', 'bottom:64px !important;')
clearInterval(timert);
}
}, 200);评论3
被折叠的条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包请填写红包祝福语或标题
个
红包个数最小为10个
元
红包金额最低5元
当前余额3.43元
前往充值 >需支付：10.00元
![]()
打赏作者
〔Lisa〕
你的鼓励将是我创作的最大动力
1
2
4
6
10
20扫码支付：1
获取中
扫码支付您的余额不足，请更换扫码支付或充值
打赏作者
实付元使用余额支付
点击重新获取扫码支付
钱包余额
0
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。
余额充值
![]()
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
Java方文山:
看好你！
〔Lisa〕:
大佬，这都知道今天晚上必须加班好哈
Java方文山:
好好好，没写完就发是吧
云小君:
博主讲述的很详细，通俗易懂，并用实例证明可实用性和可操作性都很高，感谢博主分享，期待下一篇优质好文！
艳艳耶:
学习，Vue具有易学易用、灵活性强、性能优越、可维护性高等优点，使得它成为构建现代化Web应用的理想选择。作为软件工程师，我经常使用Vue来开发前端应用，并且不断学习和探索Vue的最新技术和最佳实践，以提供高质量的用户界面