vue.js第一天

最新推荐文章于 2024-08-15 18:19:19 发布

天噜啦

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量182

点赞数

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

本文链接：https://blog.csdn.net/qq_41686811/article/details/80329881

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue是什么

Vue是一套用于构建用户界面的渐进式框架，vue提供了简单易懂的API,所以会更容易上手。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。vue也可以与jquery等类库结合使用，为复杂的单页面提供驱动。

如果你刚开始学习前端开发，将框架作为你的第一步可能不是明智的选择（我已经学习了html,css,js,jquery,nodejs,php才开始学习的vue）,如果你之前有相关框架的开发框架，那是再好不过了。

安装

(vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。）

1.直接下载并且用<script>标签引入既可以将vue注册为全局变量

下载地址：https://cn.vuejs.org/v2/guide/installation.html

（也直接打开该链接 https://vuejs.org/js/vue.js ctrl+A,然后ctrl+c, 新建一个js文件，ctrl+v 复制到里面即可生成一个js文件，用<script>标签引入，就可以开始使用vue了）

2.npm

构建大型应用时推荐用npm安装，NPM 能很好地和诸如 webpack 等模块打包器配合使用

$ npm install vue

创建vue实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>vue</title>
	<style>
	.underline{
		text-decoration: underline;
	}
	img{
		width: 30px;
		height: 50px;
	}
</style>
</head>
<body>
	<!-- 拆分字符串，实现翻转，在转化为字符串 -->
	<div id="app1">
		<div>{{message.split("").reverse().join("")}}</div>
	</div>
	<!-- 文本插值 -->
	<div id="app2" v-html="content">
		<div></div>
	</div>
	<!-- 绑定某个属性v-bind -->
	<!-- 指令  v-bind -->
	<!-- 1.可以简写 -->
	<!-- 2.可以写多个 -->
	<!-- 3.在值当中也可以使用表达式 -->
	<div id="app3">
		<div>
			<!-- <img v-bind:src="imgurl" alt=""> -->
			<!-- 绑定某个属性v-bind可以缩写为 ： -->
			<img :src="imgurl" :alt="message">
		</div>
	</div>
	<!-- 绑定类名 -->
	<div id="app4" :class="classname">
		hello app4
	</div>
	<!-- 如果hasUnderline为true则underline类名会被添加上，反之则不会 -->
	<div id="app5" :class="{underline:hasUnderline}">
		hello app5
		<!-- v-on添加事件监听 -->
		<input type="button" value="toggle" v-on:click="toggle">
	</div>
	<div id="app7" :class="{active:isactive}">
		hello app7
	</div>
	<!-- v-if 条件，v-else,v-else if -->
	<div id="app6" v-once>
		<p v-if="seen">seen为真则可以看到p标签</p>
		<p>这个将不会改变: {{ msg }}</p>
	</div>
	<!-- v-if假值时将元素隐藏，而v-show假值则元素消失 -->
	<!-- //v-show 实现显示/隐藏-->
	<div id="app21">
		<!-- v-on:click="toggle"可以缩写为@click="toggle" -->
		<input type="button" value="显示/隐藏" @click="toggle">
		<p v-show="isshow">hello v-show</p>
	</div> 
	<!-- v-if,v-else实现显示/隐藏 -->
	<div id="app21">
		<input type="button" value="显示/隐藏" @click="toggle">
		<p  v-if="isshow">hello v-show</p>
		<p v-else></p>
	</div> 
	<script src="vue.js"></script>
	<script>
		//文本插值
		var app1=new Vue({
			el:"#app1",
			data:{
				message:"hello world"
			}
		})
		//html v-html v-text
		var app2=new Vue({
			el:"#app2",
			data:{
				content:"<b>hello vue</b>"
			}
		})

		var app3=new Vue({
			el:"#app3",
			data:{
				imgurl:"img/IMG_2901.PNG",
				message:"提示信息"
			}
		})
		// style class
		var app4=new Vue({
			el:"#app4",
			data:{
				classname:["one","two"]
			}
		})
		var app5=new Vue({
			el:"#app5",
			data:{
				hasUnderline:true
				// hasUnderline:false
			},
			methods:{
				toggle:function(){
					this.hasUnderline=!this.hasUnderline;
				}
			}
		})
		var app6=new Vue({
			el:"#app6",
			seen:false,
			data:{
				msg:"app6"
			}
		})
		var app7=new Vue({
			el:"#app7",
			data:{
				isactive:false
			}
		})
		var app21=new Vue({
			el:"#app21",
			data:{
				isshow:true
			},
			methods:{
				toggle:function(){
					this.isshow=!this.isshow;
				}
			}
		})
	</script>
</body>
</html>

`v-if v-else v-else-if完成简单的状态选择效果`

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>vue v-if v-else v-else-if</title>
</head>
<body>
	<div id="app3">
		<h3>订单状态</h3>
		<input type="button" value="changestate" @click="changestate">
		<div v-if="state===0">未支付</div>
		<div v-else-if="state===1">已付款</div>
		<div v-else-if="state===2">配送中</div>
		<div v-else-if="state===3">配送完成</div>
		<div v-else>其他状态</div>
	</div>
</body>
<script src="vue.js"></script>
<script>
	var app3=new Vue({
		el:"#app3",
		data:{
			state:0
		},
		methods:{
			changestate:function(){
				this.state++;
			}
		}
	})
</script>
</html>

天噜啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js第一天

Vue是什么Vue是一套用于构建用户界面的渐进式框架，vue提供了简单易懂的API,所以会更容易上手。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。vue也可以与jquery等类库结合使用，为复杂的单页面提供驱动。如果你刚开始学习前端开发，将框架作为你的第一步可能不是明智的选择（我已经学习了html,css,js,jquery,nodejs,php才开始学习的vue）...
复制链接

扫一扫