Vue 基础

最新推荐文章于 2024-09-12 11:43:08 发布

黄宝～

最新推荐文章于 2024-09-12 11:43:08 发布

阅读量113

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/forebe/article/details/117440460

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

什么是Vue

就是个js库，一个框架。网页的本质是字符串，div 这些。由浏览器解析成dom树。在vue中dom已被vue管理。其实就是被vue这个库封装了一层。vue负责管理与底层的交互。我们开发通过vue相关语法等开发即可。因此也有了许多特性，例如:数据双向绑定、指令等。

为什么使用vue

vue是一个单页应用，这样用户体验更好，可以单独部署。前后端分离。双向数据绑定。

hello world

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{ message }}
		
		</div>
		

		<script type="text/javascript">
			 let vm = new Vue({
				 el:"#app",
				 data:{
					 message:'hello world'
				 }
			 });
			

		</script>
		
		
	</body>
</html>

进一步

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		
		<!-- 指令 v-if  v-if v-else-if v-else -->
		<div v-if=" flag == 1 ">我是黄老板</div>
		<div v-else-if="flag == 2 ">我是黄老板2</div>
		<div v-else>我是黄老板3</div>
		
		
		<!-- 指令 for -->
		<ul>
			<li v-for="user in users">{{user.name}}</li>
		</ul>
		<!-- 指令 for -->
		<ul>
			<li v-for="(user,index) in users">{{user.name}}  {{index}}</li>
		</ul>
		
		
		<!-- 指令 v-show  show是一个变量-->
		 <div v-show="show">我是v-show</div>
		
		
		<!-- 指令 v-bind 属性绑定  ,将一个值绑定到html属性上 -->
		<button v-bind:disabled="disabledBtn">{{disabledBtn?'不可用':'购买'}}</button>
		
		<!-- 指令 v-bind 缩写 -->
		<button :disabled="disabledBtn">我是按钮2</button>
		
		
		<!-- 指令 v-model 。 双向数据绑定 -->
		<div style="border:1px solid green;margin: 20px;padding:20px;">
			<input v-model="inputData" />
			<p>{{ inputData }}</p>
		</div>
		
		
		<!-- 指令 v-on  点击事件-->
		<button v-on:click="clickFunction()">快点我{{count}}</button>
		
		
		<!-- 指令 v-on  缩写-->
		<button @click="clickFunction()">快点我{{count}}</button>
		
		<div @click="clickFunction2">div内容</div>
		
		
		<!-- 指令 v-html 动态加入html yourHtml是个变量 -->
		<div v-html="yourHtml"></div>
		
		
		<!-- 过滤器 -->
		<div>
			<span> 当前手机价格 ${{ (price/100).toFixed(2)}}</span>
			
			
			<span> 当前手机价格 {{ price | formatCost}}</span>
		</div>
		
		<!-- 计算属性,就是个对象的属性,不过这个属性是临时计算出来的-->
		<div>
			{{ numberTotal }}
		</div>
		
		<!-- 过渡动画 -->
		<div>
			
			<button @click="divVis =!divVis"> 我是按钮</button>
			<transition name="fade">
				<div v-if="divVis">我是内容</div>
			</transition>
		</div>
		
		
		<!-- 自定义指令 -->
		<!-- bind  -->
		<p v-blink>黄总您好~</p>
		
		</div>
		
		
	
		
		
		<script type="text/javascript">
		// Vue.directive 注册全局指令
		Vue.directive('blink',{
			//bind 钩子函数 =>指令绑定到元素调用
			bind(el){
				let vis =true;
				setInterval(() =>{
					vis = !vis;
					el.style.visibility = vis?'visible':'hidden';
				},1000);
			}
		});
			
			let vm = new Vue({
				el: "#app",
				
				data: {
					message:'hello vue',
					numbers:[1,2,3],
					flag:1,
					users:[{name:'黄总'},{name:'黄老板'}],
					show:true,
					disabledBtn:false,
					inputData:'hello vue',
					count:0,
					yourHtml:'<h1> 广东吴颜祖 </h1>',
					price:999999,
					activity:[],
					divVis:true

				}
				,
				/*4个生命周期钩子，其实有8个，其它4个都是beForeXX()*/
	
				created() {
					
				}
				,mounted() {
					
				}
				,updated() {
					
				}
				,destroyed() {
					
				}
				
				,
				//函数存储在methods属性中
				methods: {

					clickFunction(i) {
						console.log("clickFunction");
						this.count =  this.count +1;
					},
					clickFunction2(i) {
						console.log("clickFunction");
						this.count =  this.count +1;
					}
				},
				//计算属性
				computed: {
                 numberTotal(){
					 return this.numbers.reduce((sum,val)=>sum+val);
				 }
				},
				//监听器
				watch:{
					 count(){
						 //this count 有新的变化
						 console.log("count 有新的变化 ")
					 }
				},
				filters:{
					formatCost(value){
						return '$'+ (value/100).toFixed(2);
					}
				}

			});
		</script>

<style>
	
.fade-enter-active .fade-leave-active{
	transition:  opacity .5s; 
}
.fade-enter .fade-leave-to{
	opacity: 0;
}

	
	
</style>

	</body>
</html>