cgb2107-day12-CSDN博客

本文链接：https://blog.csdn.net/u012932876/article/details/120193812

文章目录

一,练习

在这里插入图片描述

–1,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试  Vue基础语法</title>
		
		<!-- 引入外部文件的路径问题:
			1. 如果你想要的引入的资源,和你在同级目录,直接写 vue.js
			2. 如果你想要的引入的资源,和你不在同级目录,就先写同级的目录再继续写资源名称js/vue.js
		-->
		<script src="js/vue.js"></script>
		
	</head>
	<body>
		<div id="d1">
			{{msg}}
			{{show()}}
			{{add(1,2)}}
		</div>
		<script>
			new Vue({
				el:"#d1",
				data:{
					msg:100
				},
				methods:{
					// show:function(){ //标准写法
					show(){ //简写
						alert(1)
					},
					// add:function(a,b){ //标准写法
					add(a,b){ //简写
						alert(a+b)
					}
				}
			})
		</script>
	</body>
</html>

二,vue指令

–1,概述

使用方式: 就是在HTML的标签上,加一些v-的指令.
v-model: 实现数据驱动,双向绑定.
v-if: 用来判断,不满足判断条件就不展示
v-show: 用来判断,不满足判断条件就不展示(通过css实现)
v-else-if / v-else : 顺序的要求类似于java
v-cloak : 用来解决闪现问题(网页展示了插值表达式)
v-html: 获取数据,也可以解析HTML标签

–2,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试  Vue指令</title>
		<!-- 1.引入vue.js -->
		<script src="js/vue.js"></script>
		
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app" v-cloak>
			{{msg}} <br />
			{{msg}} <br />
			<!-- 
				2.1.  v-model是Vue的指令,实现了双向绑定的功能.把值绑定到指定属性上
				数据驱动,双向绑定: 改Model会影响View,改View会影响Model 
			-->
			<input type="text" v-model="msg" />
			<!-- 2.2. v-html指令可以解析数据,并识别HTML代码 -->
			<p v-html="msg"></p>
			<!-- 2.3. v-cloak指令解决插值表示的闪现问题 -->
			<!-- 2.4. v-if指令用来做判断,条件满足才展示,不满足就不展示 -->
			<p v-if="person.age>=18">成年人</p>
			<!-- 2.5. v-show指令也用来做判断,不满足的话,利用css控制着style="display: none;" -->
			<p v-show="person.age>=18">成年人</p>
			<!-- 2.6. v-else指令,组成顺序依次 if...else if...else -->
			<p v-if="type === 'A'">优秀</p>
			<p v-else-if="type === 'C'">中等</p>
			<p v-else-if="type === 'B'">良好</p>
			<p v-else>错误</p>
			<!-- 2.7. v-for指令用来循环,可以循环数组,类似于JS里的for...in语法,
				i表示遍历得到的数据,index是下标
			  -->
			<ol>
				<li v-for="i in arr">{{i}}</li>
			</ol>
			<ul>
				<li v-for="i,index in arr">数据是:{{i}} -> 下标是:{{index}}</li>
			</ul>
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el:"#app", //挂载点
				data: {  //要被渲染的数据
					msg : '<h1>hello vue123</h1>',
					type: 'C' ,
					person:{
						age:10
					},
					arr : ['杨幂','迪乐热巴','Anglelababa']
				}
			})
		</script>
	</body>
</html>

三,Vue指令v-on v-bind

–1,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试  Vue指令</title>
		
		<!-- 引入vue.js -->
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 渲染区 -->
		<div id="app">
			<!-- 1. v-on指令用来给HTML元素添加Vue事件,
					用:指定事件的触发方式v-on:可以简写成一个@
			 -->
			<button v-on:click="show()">点我1</button>
			<button @click="say('hi bro')">点我2</button>
			<button v-on:dblclick="say('hi vue')">点我3</button>
			<!-- 练习:计数器,点一次按钮就把次数++ -->
			<button v-on:click="count++">赞{{count}}</button>
			
			<!-- 2. v-bind指令用来获取变量的值-->
			<a href="{{url}}">点我跳转1</a>  <!-- 错的 -->
			<a v-bind:href="url">点我跳转2</a> <!-- 对的 -->
			<a :href="url">点我跳转3</a> <!-- 简写 -->
		</div>
		<!-- Vue对象 -->
		<script>
			new Vue({
				el:"#app",//挂载点
				data:{
					count:0  ,//计数器
					url:'https://www.baidu.com'
				},
				methods:{ //存方法
					// show:function(){
					show(){//函数的简写形式
						alert(100);
					},
					say(a){
						alert(a);
					}
				}
			})
		</script>
	</body>
</html>

四,Vue 组件

–1,概述

当想要扩展HTML的功能时,使用vue定义一些组件.
1,全局组件: Vue.component(组件名, 组件的功能)
2,局部组件: 在Vue对象里, 再加一个属性components
3,使用组件: 在数据渲染区 , 直接把组件名当做HTML的标签名用
区别? 全局组件可以被多个Vue对象使用.局部组件只能在当前Vue对象中使用.

–2,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 组件Component</title>
		<!-- 1.导入vue.js -->
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 2.数据渲染区 -->
		<div id="app">
			<!-- 5.使用组件 -->
			<Hellocom></Hellocom>
			
		</div>
		
		<div id="d1">
			<Hellocom></Hellocom>
			<person></person>
		</div>
		<script>
			//4. 创建Vue的全局组件(可以被多个Vue实例使用):类似于扩展了HTML的标签
			//Vue.component(1,2)-1是组件名(最好是全小写)-2是组件的显示效果
			Vue.component('Hellocom',{
				template : '<h1>你好 Vue组件</h1>' //组件的显示效果
			}) 
			//3. 创建Vue对象
			new Vue({
				el:'#app'
			})
			new Vue({
				el:'#d1'    ,
				// 局部组件(只被当前的Vue对象拥有,在指定渲染区可以使用)
				components: {
					'person':{//组件名
						template : '<h1>你好 person组件</h1>' //组件的显示效果
					}
				}
			})
			
		</script>
	</body>
</html>

五,Vue项目

–1,安装脚手架

node -v   #检查nodejs的安装版本
npm config get registry # 查看当前配置的镜像，结果是默认的国外网址
npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像
npm install vue-cli -g  #安装vue-cli脚手架
vue -V #查看版本
where vue #vue安装在哪里

–2,配置项目

vue init webpack jt01   # 慢,等....做了很多选择 # 可能需要执行多次才会成功
cd jt02  #进入项目目录
npm run dev #启动项目
打开浏览器访问网址:  http://localhost:8080

在这里插入图片描述