Vue模板语法

最新推荐文章于 2023-03-30 16:59:52 发布
最新推荐文章于 2023-03-30 16:59:52 发布
阅读量58 收藏
点赞数
分类专栏： vue 文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43920778/article/details/115112036
版权

Vue模板语法

第一个VUE实例

<!DOCTYPE html>
<html>
<head>
	<title>第一个Vue程序</title>
	<script type="text/javascript" src="vue.js" charset="utf-8"></script>
</head>
<body>
	<!--第一个Vue程序-->
	<div id="app">
  		{{ message }}
	</div>
	<script type="text/javascript">
		var app = new Vue({
  		el: '#app',
  		data: {
   		 message: 'Hello Vue!'
  		}
	})
	</script>
	
</body>
</html>

Vue数据与方法

<!DOCTYPE html>
<html>
<head>
	<title>Vue数据与方法</title>
	<script type="text/javascript" src="vue.js" charset="utf-8"></script>
</head>
</head>
<body>
	<div id="app">
		{{a}}
	</div>
	<script type="text/javascript">
		// 我们的数据对象
		var data = { a: 1 }
		// 该对象被加入到一个 Vue 实例中
		var vm = new Vue({
			el:"#app",
		  	data: data
		})
		//获得这个实例上的property
		//返回源数据中对应的字段
		//data.a="hi...new..."
		//vm.a="test"
		//data.a=vm.a
		// $watch 是一个实例方法,观看值的变化
		
		vm.$watch('a', function (newValue, oldValue) {
		  // 这个回调将在 `vm.a` 改变后调用
		  console.log(newValue,oldValue);
		})
		vm.$data.a="new vue";
	</script>
	
</body>
</html>

Vue生命周期

<!DOCTYPE html>
<html>
<head>
	<title>Vue生命周期</title>
	<script type="text/javascript" src="vue.js" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		{{msg}}
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#app",
			data:{

				msg:"hi vue",
			},
			//在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用
			beforeCreate:function(){
				console.log('bdforeCreate');
			},
			/*在实例创建完成后立即被调用
			 * 在这一步，实例已完成以下的配置：数据观测（data observer)属性和方法的运算，watch/event事件回调
			 * 然而，挂载阶段还没开始，$el属性目前看不见
			 */
			created:function(){
				console.log("created");
			},
			//在挂载开始之前被调用：相关的渲染函数首次被调用
			beforeMount:function(){
				console.log("beforeMount");
			},
			//el被新创建的vm.$el替换，挂载成功
			mounted:function(){
				console.log("mouted");
			},
			//数据更新时使用
			beforeUpdate:function(){
				console.log("beforeUpdate");
			},
			//组件DOM已经更新，组件已经更新完毕
			updated:function(){
				console.log("updated");
			}
		
		});
		setTimeout(function(){
			vm.msg="change....";
		},3000);
	</script>
</body>
</html>

Vue模板语法-插值

<!DOCTYPE html>
<html>
<head>
	<title>Vue模板语法-插值</title>
	<script type="text/javascript" src="vue.js" charset="utf-8"></script>
</head>
<body>
	<!--v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新-->
	<!--双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html-->
	<!--v:bind:属性="赋值" v-bind为容器赋某个属性-->
	<div id="app">
		{{msg}}
		<p>Using mustaches: {{ rawHtml }}</p>
		<p>Using v-html directive: <span v-html="rawHtml"></span></p>
		<div v-bind:class="dynamicId">test...</div>
		{{ number + 1 }}

		{{ ok ? 'YES' : 'NO' }}

		{{ message.split('').reverse().join('') }}
	</div>
	
	<script type="text/javascript">
		var vm =new Vue({
			el:"#app",
			data:{
				msg:"hi vue",
				rawHtml:'<span style="color:red">this  is should be red</span>',
				dynamicId:'color',
				number:10,
				ok:true,
				message:'v u e'
			}
		});
		vm.msg="hi....";
	</script>
	<style type="text/css">
		.color{
			color: red;
			font-size:24px;
		}
	</style>
</body>
</html>

Vue 模板语法-指令

<!DOCTYPE html>
<html>
<head>
	<title>Vue 模板语法-指令</title>
	<script type="text/javascript" src="vue.js" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		<!--v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。-->
		<p v-if="seen">现在你看见我了</p>
		<!--在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。-->
		<a v-bind:href="url">百度</a>
		<!--当点击click me时两个点击事件都会触发，先触发click2后触发click1
			如果只想触发click2可以使用@click.stop
		-->
		<div @click="click1">
			<div @click.stop="click2">
				click me
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#app",
			data:{
				seen:true,
				url:'www.baidu.com'
			},
			methods:{
				click1:function(){
					console.log("click1....");
				},
				click2:function(){
					console.log("click2....");
				}
			}
		})
	</script>
</body>
</html>
菜鸟小赵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
Vue 模板语法
梁辰兴的博客
04-19 728
这里，message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
day01-Vue模板语法.zip
01-17
在"day01-Vue模板语法.zip"这个压缩包中，我们可以预见到内容可能涵盖了Vue的基础模板语法教程，这对于初学者或者想要深入理解Vue的开发者来说是非常宝贵的资源。 Vue模板语法是Vue.js的一个核心特性，它允许开发者...
Vue模板语法中数据绑定的实例代码
10-16
在Vue模板语法中，数据绑定是核心特性之一，它允许开发者轻松地将数据模型与DOM元素关联起来，实现视图和数据的同步更新。下面我们将详细讨论Vue模板语法中的数据绑定及其应用。 1. 单向数据绑定 单向数据绑定是...
Vue.js 基本语法
weixin_30488313的博客
11-23 119
插值 Html 使用 v-html 指令用于输出 html 代码： <div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1...
Vue的模板语法
m0_46176643的博客
04-20 3414
1.3.模板语法 1.3.1效果 第一大类是插值语法：把指定的值放入指定的位置 插值语法往往是用于指定标签体内容(起始标签和结束标签中间所夹着的内容就是一个标签体) 第二大类是指令语法：固定的写法: <h></h> v-bind:是绑定的 意思，它可以给所有的任何一个标签属性动态的去绑定值 简写：v-bind: ====> : 指令语法管理标签属性 总结： Vue模板语法有2大类： 插值语法： 功...
Vue——模板语法
hulin的博客
03-30 1151
Vue的模板语法
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
weixin_65100963的博客
05-04 946
vue脚手架_基础API 安装：vue-devtools 学习和调试vue必备之利器 - 官方插件 安装： 打开Chrome浏览器 =>点击浏览器右上角小图标，按图示操作 2.进入扩展程序菜单 => 把vue-dev-tool-5.3.crx文件拖入网页中进行添加安装 3.安装完成后，固定显示插件 Vue基本概念 Vue是什么 vue是一个渐进式的javascript框架 库: 封装的属性或方法 (例axios.js, jquery.js)， 框架: 拥有自己的规则和元素, 比库强大
vue模板语法里读取数组的某一项
最新发布
05-26
在Vue模板语法中，要读取数组的某一项，可以使用以下方式： ``` {{ array[index] }} ``` 其中，array是你要读取的数组名，index是数组中要读取的元素的下标。例如，如果你有一个名为`list`的数组，想要读取第二个元素，可以这样写： ``` {{ list[1] }} ``` 注意：数组下标是从0开始的。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值