vue模板语法上集

最新推荐文章于 2024-07-07 18:00:46 发布
最新推荐文章于 2024-07-07 18:00:46 发布
阅读量179 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53601862/article/details/121050942
版权

目录

一.插值

二.指令

三.动态参数

四.过滤器

五.计算属性&监听属性

一.插值

      1.文本
                { {msg}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>文本</p>
			<h3>{
  {msg}}</h3>
			<!--<p>html串</p>
			<div v-html="htmlstr">-->

			</div>
			<!-- <p>vue中的属性</p>
			所有原生态的属性，要利用vue的变量，都需要在对应的属性前加v-bind
			<a v-bind:href="hrefstr">百度</a>
			<input v-bind:value="valuestr" />
			<p>表达式</p>
			{
  {str.substring(0,4).toUpperCase()}}
			张三:{
  {nubmer+1}}
			{
  {ok?'yes':'on'}}
			<span :id="'goods_id_'+id">xx</span> -->
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界  ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					msg: '哈利波特',
					// htmlstr: '<h3 style="color:red;"> 这是一个html片段</h3>',
					// hrefstr:'http://www.baidu.com',
					// valuestr:'222',
					// str:'java是最牛的语言',
					// nubmer:59,
					// ok:false,
					// id:0
				};
			}

		})
	</script>
</html>

运行：

2.html
          使用v-html指令用于输出html代码       

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<!-- <p>文本</p>
			<h3>{
  {msg}}</h3> -->
			<p>html串</p>
			<div v-html="htmlstr">

			</div>
			<!-- <p>vue中的属性</p>
			所有原生态的属性，要利用vue的变量，都需要在对应的属性前加v-bind
			<a v-bind:href="hrefstr">百度</a>
			<input v-bind:value="valuestr" />
			<p>表达式</p>
			{
  {str.substring(0,4).toUpperCase()}}
			张三:{
  {nubmer+1}}
			{
  {ok?'yes':'on'}}
			<span :id="'goods_id_'+id">xx</span> -->
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界  ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					// msg: '哈利波特',
					htmlstr: '<h3 style="color:red;"> 这是一个html片段</h3>',
					// hrefstr:'http://www.baidu.com',
					// valuestr:'222',
					// str:'java是最牛的语言',
					// nubmer:59,
					// ok:false,
					// id:0
				};
			}

		})
	</script>
</html>

运行：

3.属性
          HTML属性中的值应使用v-bind指令，也可以进行缩写：(:)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<!-- <p>文本</p>
			<h3>{
  {msg}}</h3> -->
			<!-- <p>html串</p>
			<div v-html="htmlstr"> -->

			
			  <p>vue中的属性</p>
			<!-- 所有原生态的属性，要利用vue的变量，都需要在对应的属性前加v-bind -->
			<a v-bind:href="hrefstr">百度</a>
			<input :value="valuestr" />
			<!-- <p>表达式</p>
			{
  {str.substring(0,4).toUpperCase()}}
			张三:{
  {nubmer+1}}
			{
  {ok?'yes':'on'}}
			<span :id="'goods_id_'+id">xx</span> -->
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界  ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					// msg: '哈利波特',
					// htmlstr: '<h3 style="color:red;"> 这是一个html片段</h3>',
					hrefstr:'http://www.baidu.com',
					valuestr:'22233',
					// str:'java是最牛的语言',
					// nubmer:59,
					// ok:false,
					// id:0
				};
			}

		})
	</script>
</html>

运行：

1、点击百度可以跳转百度主页；

2、在data中定义一个valuestr赋值，之后用一个文本框

4.表达式
             Vue提供了完全的JavaScript表达式支持

{ {str.substring(0,4).toUpperCase()}} 

相当于截取，转换大小写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<!-- <p>文本</p>
			<h3>{
  {msg}}</h3> -->
			<!-- <p>html串</p>
			<div v-html="htmlstr"> -->

			
			<!--  <p>vue中的属性</p> -->
			<!-- 所有原生态的属性，要利用vue的变量，都需要在对应的属性前加v-bind -->
			<!-- <a v-bind:href="hrefstr">百度</a>
			<input :value="valuestr" /> -->
			 <p>表达式</p>
			{
  {str.substring(0,4).toUpperCase()}} 
			<!--张三:{
  {nubmer+1}}
			{
  {ok?'yes':'on'}}
			<span :id="'goods_id_'+id">xx</span> -->
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界  ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					// msg: '哈利波特',
					// htmlstr: '<h3 style="color:red;"> 这是一个html片段</h3>',
					// hrefstr:'http://www.baidu.com',
					// valuestr:'22233',
					str:'java是最牛的语言',
					// nubmer:
最低0.47元/天 解锁文章
be honoured.IT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
知识总结 Vue
qianjun111111的博客
02-24 449
1. Vue实例化 1.创建一个app （application应用） 2 定义数据data 3 把app实例挂在到#app节点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue/js/vue.js" type="text/javascript" charset="utf-8">&
Vue.js基础1
weixin_44289981的博客
05-17 256
Vue.js基础 一.Vue基础： 1.Vue基础代码结构与插值表达式： <body> <div id="app"> <p>{{message}}</p> </div> </body> <script> var app = new Vue({ el: '#app', data: { message:"学习Vue" } }) </script> 值得注意的是，当网络较慢时，网页还
Vue（二）——基本操作
rjlmylover_zyw的博客
09-11 1071
data里面的值发生变化时，input标签里面的值也会变化，同时因为v-model，当input标签里的值变化时，data里面的值也变。给里面的绑定了点击事件，当里面的被触发之后会让外层的也触发，我们不想让外层的触发，就要阻止冒泡。和插值表达式只能渲染纯文本内容，如果把包含HTML标签的字符串渲染为页面的HTML元素，用。如果默认不需要被展示，后期才又可能被展示，使用v-if。vue控制父元素下面的子元素，el就是他们的父元素。用来在不操作DOM的情况下，快速获取表单的数据。双向绑定指令针对表单。
vue基本语法使用
qq_43551769的博客
11-08 363
20191108 1、插件表达式：{{}} （1）例子： <p>{{msg}}</p> （2）作用： ​ 用于传递vue对象中定义的数据变量，双向绑定的，vue对象中的数据和页面中数据是跟随对方变化而变化的。 2、常见指令：v-cloak、v-bind、v-on、v-model、v-for、v-if、v-show （1）v-cloak ​ ①例子： <style...
Vue模板语法（一）
xiaoyi215的博客
09-17 342
Vue模板语法（一） 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} ...
vue模板语法下集
chenbowenleave的博客
09-19 111
vue模板语法下集 样式绑定 1.1 class绑定 使用方式：v-bind:class=“expression” expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style=“expression” expression的类型：字符串、数组、对象 2. 事件处理器 事件监听可以使用v-on 指令 ## 之前已学习 2.1 事件修饰符 Vu...
vue面试题 VUE面试题集
10-22
Vue.js 面试题集 以下是根据提供的文件信息生成的相关知识点： 1. Vue.js 是什么？ Vue.js 是一种流行的 JavaScript 前端框架，用于构建用户界面。它被设计为一种轻量级的框架，可以与现有的项目很好地集成。其...
vue面试题合集.zip
07-20
2. **模板语法**：Vue提供了简洁的模板语法，允许开发者使用指令（如`v-if`, `v-for`, `v-bind`, `v-on`等）和插值表达式来实现动态内容和事件处理。 3. **组件化**：Vue的强大之处在于其组件系统。组件是可复用的...
30道Vue面试题合集
04-18
Vue.js 的核心特性包括：响应式的数据绑定、组件化、模板语法、生命周期、路由管理等。响应式的数据绑定是指 Vue.js 可以自动更新视图的能力，当数据变化时，视图会自动更新。组件化是指将应用程序拆分为小的、独立...
html+vue+laravel管理后台模板前端框架Vito
06-19
Vito是一款全方位、高度灵活的管理后台模板前端框架，它专为开发人员设计，旨在提供一个高效的工具集，用于构建各种类型的网站后台系统和web管理软件。该框架结合了HTML、Vue.js和Laravel三种技术栈，使得无论你偏好...
Vue前端面试题合集含vue3
03-24
3. 模板语法：熟悉v-if/v-else、v-for、v-bind、v-on等指令，以及模板中的插值表达式。 4. 生命周期：掌握Vue实例和组件的生命周期钩子函数，如beforeCreate、created、mounted等。 5. 路由管理：使用Vue Router进行...
vue中的常用基础指令
weixin_50641294的博客
02-26 284
vue中的常用基础指令总结 1.v-text指令（内容渲染指令） <template> <div> <h1>这个文件主要说明v-text的使用</h1> <p>作用:设置标签的文本内容</p> <p>{{msg}}</p&g...
Vue 常见指令
qq_41304707的博客
11-16 174
v-on <body> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转字符串</button> </div> <script> var vm = new Vue({ el: '#app', data:{ message:'LOVE' }, methods:{
Vue基础语法（1）
Xmengyan的博客
08-29 161
一.插值操作 1.Mustache (双大括号) {{}} 例： <div id="app"> <p>{{message}}</pp> <p>{{message}} 易烊千玺!</p> <p>{{counter * 2p> </div>3 <script> const app = new Vue({ el: '#app', data: { message
Vue基础知识总结（二）
张媛的博客
05-29 153
8、vue插槽 8.1、案例1（了解插槽）: 父组件：mytest.vue <template> <div> <div>大家好我是父组件</div> </div> <myslot> <p>测试一下吧~内容在这里显示</p> </myslot> </template> <script> ...
Vue中的指令及使用方式
qq_44844370的博客
11-25 1316
### 1.什么是指令? 指令：生活中的指令通常指代带有方向和指导性的命令 计算机中的指令：描述的是带有数据功能性处理的一段可执行命令的集合 Vue 中的指令：实现特定功能的一种用法，一般以 v- 符号开头，如 v-text ### 2.具体指令 ##### ①. `v-text / v-html / v-once` **功能描述:** 网页视图中渲染展示变量中的数据 - `v-text`：指令当成标签的属性进行使用，输出数据的变量包含在属性值中，等价于插值表达式 - `v-html.
Vue的学习之class与style绑定
最新发布
人生苦短
07-07 262
本节对class与style的绑定内容就学习完毕了！
vue基础知识学习文档
03-28
本文档深入浅出地介绍了Vue.js的基础知识，包括模板语法、数据绑定、事件处理、计算属性、条件渲染、列表渲染以及组件化开发等内容。以下是对关键知识点的详细解读： 1. **Vue模板语法**：Vue的模板语法以HTML为...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值