Vue基础特性

最新推荐文章于 2024-10-10 13:13:22 发布

m0_47761892

最新推荐文章于 2024-10-10 13:13:22 发布

阅读量83

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_47761892/article/details/128777429

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

一、涉及知识点
1.Vue构造函数和选项对象（data选项、方法、计算属性、监听属性）
2.生命周期钩子函数（beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed）
）
3.数据绑定：文本插值{{}}、属性绑定v-bind、表达式
4.过滤器：全局过滤器、本地过滤器
5.指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个实例</title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<!-- <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<style type="text/css">
			.titlevalue{
				display: block;
				border:1px solid red;
				padding: 20px
			px;
			}
		</style>
		<div id="app">
			<span :class="{titlevalue:title}" v-once>{{name | subStr}}</span><br>
			<span :class="title2" v-once>{{name | subStr}}</span><br>
			<span v-html="name"></span>
			原文：{{str  | subStr}}<br>
			大写：{{str.toLowerCase() | subStr}}
			大写：{{str.toUpperCase()  | subStr}}<br>
			日期：{{today | formateDate('^_^')  }}<br>
			金额：{{money | twodecimal}}
		</div>
		<script>
			var data={name:'北京',url:'www.beijing.cn'}
			//vue2
			//全局过滤器
			Vue.filter('formateDate',function(value,para1){
				var temp=''
				var temp =temp + value.getFullYear()+'年'
				var temp =temp +  (value.getMonth()+1)+'月'
				var temp = temp + value.getDate()+'日'
				var temp = temp + value.getHours()+'时'
				var temp = temp + value.getMinutes()+'分'
				var temp = temp + value.getSeconds()+'秒'
				return para1+temp
			})
			var demo=new Vue({
				el:"#app",
				data:{
					name:'<h3>北京</h3>',
					title:true,
					title2:'titlevalue',
					str:'fjalajFDAREwqomf;',
					today:new Date(),
					money:59
				},
				
				//本地过滤器
				filters:{
					subStr:function(value){
						if(value.length>10)
							return value.substr(0,10)+'...'
						else return value
					},
					twodecimal:function(value){
						return "￥"+ value.toFixed(2)
					}
				},
				mounted(){
					var that=this
					var timer=setInterval(function(){
						that.today=new Date()
					},1000)
				},
				beforeDestroy(){
					if(this.timer)
						clearInterval(this.timer)
				}
			})
		
			
			
			
			//Vue3
			// const ex = {
			// 	data() {
			// 		return {
			// 			counter: 5
			// 		}
			// 	}
			// };
			// Vue.createApp(ex).mount('#app');
		</script>
	</body>
</html>