首页 > 其他分享> 文章详细

VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定

2021-04-11 17:05:49 阅读：107 来源： 互联网

标签：style VUE vue app 绑定 --- Vue new data

文章目录

VUE.js
- 基础

VUE.js

官方文档：https://cn.vuejs.org/v2/guide/components-props.html

基础

安装

CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
// 建议引入带有版本号的
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

下载

https://cdn.jsdelivr.net/npm/vue@2.6.12

打开此链接，新建一个vue.js文件，ctrl+a 全选， ctrl+c 复制 ctrl+v粘贴

<script src="vue.js"></script>

安装

# 最新稳定版 
$ npm install vue

命令行工具（CLI脚手架）

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

这个需要一定基础，后边再学。

开始使用

建议使用的IDE：HBuilderX

https://www.dcloud.io/hbuilderx.html

使用标准版即可

解压后即可使用，我们新建一个普通项目，选择vue项目（普通模式）。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WfcH2lgK-1618130967977)(https://i.loli.net/2021/04/11/F2WyNGPmYiBDcUg.png)]

Hello Vue

数据和 DOM 已经被建立了关联，所有东西都是响应式的。打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

<!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">
			// 声明一个vue对象
			let app = new Vue({
				el:"#app",
				// 数据
				data:{
					message:"Hello Vue!"
				}
			})
		</script>
	</body>
</html>

绑定元素 attribute：

		<!-- 绑定属性 -->
		<div id="app02">
			<span v-bind:title="message">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>
		
		<script type="text/javascript">
			// 声明一个vue对象
			let app2 = new Vue({
				el:"#app02",
				data:{
					message:'页面加载于 ' + new Date().toLocaleString()
				}
			})
		</script>

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。

条件与循环

v-if v-else 之间不能有其他不在判断语句之中的内容

v-for 指令可以绑定数组的数据来渲染一个项目列表：

<!-- 循环与判断 -->
<div id="app03">
	<p v-if="seen">现在你看到我了！</p>
    <li v-for="item in todos">{{item.text}}</li>
</div>


let app3 = new Vue({
	el:"#app03",
	data:{
		seen:true,
		todos:[
			{ text: '学习 JavaScript' },
			{ text: '学习 Vue' },
			{ text: '整个牛项目' }
		],
	}
})

//在浏览器调试窗口改变seen的值，你会发现网页立马变化。同步的。
app3.seen = false
false
app3.seen = true
true

处理用户输入

v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

<!-- 绑定事件 -->
<div id="app04">
	<p>{{message}}</p>
    <input v-model="message" />
	<button v-on:click="reverse">反转</button>
</div>


let app4 = new Vue({
	el:"#app04",
	data:{
		message:"Hello Vue!"
	},
	//方法
	methods:{
		reverse:function(data){
		this.message = this.message.split('').reverse().join('')
		}
	}
})

Vue实例

创建一个vue实例

通过上边的了解，我们已经知道，vue实例：

var vm = new Vue({
  // 选项
})

数据与方法

数据：data，里边为键值对。

方法：methods，方法名:对应的函数。

模板语法

v-onec 只插入一次

v-html 渲染标签，相当于Django中的safe过滤，不加可以防止XSS攻击

v-bind 绑定一个属性，可以缩写成 :绑定的属性字段名曾

v-on 事件绑定，可以缩写成 @click=

表达式应用

三元运算符

代码实例

<!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">
			<h1>{{msg}}</h1>
			<!-- 一次性生成，后边再改变nsg的值它有不发生变化 -->
			<h1 v-once>{{msg}}</h1>
			<!-- 不会渲染<span> -->
			<h1>{{htmltext}}</h1>
			<!-- 会渲染span标签 -->
			<h1 v-html="htmltext"></h1>
			<!-- 绑定一个属性,修改属性内容 -->
			<!-- <div v-bind:id="idname"> -->
			<div :id="idname">
				<h1>{{idname}}</h1>
			</div>
			<!-- 表达式应用 -->
			<h1>{{firstName+lastName}}</h1>
			<!-- 三元运算符 -->
			<h1>{{isVip?"Vip":"novip"}}</h1>
			<!-- 事件绑定 -->
			<!-- <button type="button" v-on:click="changeBg">改变背景</button> -->
			<h1><button type="button" @click="changeBg">改变背景</button></h1>

		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					msg:"hello vue",
					htmltext:"<span>hello</span>",
					idname:'login',
					firstName:"张",
					lastName:"三",
					isVip:true,
				},
				methods:{
					changeBg:function(){
						document.body.style.background = "skyblue"
					}
				}
			})
		</script>
	</body>
</html>

计算属性和侦听器

计算属性

computed

代码

<!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">
			<!-- 一次修改的话这两种情况的性能是一样的,只有在反复变化的情况下,第二种计算属性才会节省性能 -->
			<!-- 一般情况下的写法 -->
			<h1>{{firstname + lastname}}</h1>
			<!-- 计算属性fullname -->
			<h1>{{fullname}}</h1>
			<h1>{{reverseMsg}}</h1>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					firstname:'张',
					lastname:'三',
					msg:'hello vue',
				},
				computed:{
					// 计算属性
					fullname:function(){
						// 会将计算的结果进行缓存,只要遍历属性值不变,就不会重新计算
						return this.firstname+this.lastname
					},
					// get和set事件,当reverseMsg改变后,会调用set方法
					reverseMsg:{
						get:function(){
							return this.msg.split('').reverse().join('')
						},
						set:function(val){
							console.log(val)
							this.msg = val
						}
					}
				}
			})
		</script>
	</body>
</html>

侦听器

尽量不要多用，可以用coputed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 在console中改变msg的值,就会出发msg绑定的监听事件方法 -->
		<div id="app">
			{{msg}}
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					msg:"hello vue"
				},
				// 监听事件
				watch:{
					msg:function(val){
						console.log(val)
					}
				}
			})
		</script>
	</body>
</html>

class与style绑定

绑定HTML Class

通过对象的方式决定是否存在某个类

通过数组加载类名

直接放置字符串

混合使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.active{
				width: 200px;
				height: 200px;
				background-color: skyblue;
			}
		</style>
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		</head>
	</head>
	<body>
		<div id="app">
			<div id="" :class="{active:isTrue}" class="page">
				<!-- 通过对象的方式决定是否存在某个类 -->
			</div>
			<div id="" :class="styleObj" class="page">
				<!-- 会把这个列表里的类名(键名)加载进来 -->
			</div>
			<div id="" :class="styleArr">
				<!-- 通过数组加载类名 -->
			</div>
			<div id="" :class="styleStr" class="page-9">
				<!-- 直接放置字符串 -->
			</div>
			<div id="" :class="arrobj">
				<!-- 混合使用 -->
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					isTrue:true,
					styleObj:{
						active:true,
						laochen:true,
						"col-6":true,
					},
					styleArr:['col-lg-2', 'col-xs-12'],
					styleStr:"abc page col-mg-9",
					arrobj:["abc", {active:true}]
				},
				computed:{
					trueis:{
						get:function(){
							return
						},
						set:function(val){
							console.log(val)
							this.isTrue = val
						}
					}
				}
			})
		</script>
	</body>
</html>

标签：style,VUE,vue,app,绑定,---,Vue,new,data
来源： https://blog.csdn.net/qq_31910669/article/details/115601927

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9