001-VUE---入门以及常用指令

2021-05-23 20:18 209人阅读评论(0)

1. VUE介绍

1.1 VUE介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.2 VUE官网

https://cn.vuejs.org/

1.3 VUE下载

https://vuejs.org/v2/guide/installation.html

2. VUE入门案例

2.1 创建1-入门案例.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

2.2 引入vue.js文件

>

2.3 编写入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 插值表达式 内容 data中对象的属性 -->
			<h1>{
  {hello}}</h1>
		</div>
		
		
		<!-- 1.导入vue.js的类库 -->
		<script src="../js/vue.js"></script>
		<!-- 2.编辑VUE js -->
		<script>
			//新规定:  1.结尾的;号可以省略   2.字符一般使用'单引号'
			//补充知识:  var: js中声明变量的修饰符 没有作用域的概念
			//    1.const 定义常量的
			//    2.let   有作用域的变量声明.
			
			//1.实例化VUE对象   函数式编程
			const app = new Vue({
    
				//1.定义el元素 要在哪个位置使用vue进行渲染
				el: "#app",
				//2.定义数据对象
				data: {
    
					hello: 'VUE入门案例!!!!'
				}
			})
		</script>
			
	</body>
</html>

2.4 运行查看结果

2.5 名词解释

var:：js中声明变量的修饰符没有作用域的概念
const：定义常量的
let：有作用域的变量声明.
el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
data：data属性专门用来以对象方式存放数据，可以用最对象使用，也可以用作函数使用
{ {XXX}}：插值表达式基本语法，“Mustache”语法 (双大括号) 的文本插值

3. v-clock指令

3.1 用法

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

3.2 需求

由于插值表达式在渲染没有完成时,会展现 { {hello}} 效果,用户体验不好是否可以优化优化: 如果在渲染没有完成时,不给用户展现任何信息.

3.3 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
		<!-- 配置样式 -->
		<style>
			/* 渲染没有完成时不展现 */
			[v-cloak]{
    
				display: none;
			}
		</style>
	</head>
	<body>
	
		<div id="app">
			<h1 v-cloak>{
  {hello}}</h1>
			<!-- 以优化后的效果进行展现 内部兼容了v-cloak -->
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
    
				el: '#app',
				data: {
    
					hello: '----vue案例',
				}
			})
		</script>
	</body>
</html>

3.4 结果

4.v-text指令

4.1 用法

更新元素的 textContent。如果要更新部分的 textContent，需要使用 { { Mustache }} 插值。

4.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<!-- 两总方式一样 -->
			<span v-text="message"></span>
			<br/>
			<span>{
  {message}}</span>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
    
				el: '#app',
				data: {
    
					message: 'v-text的用法',
				}
			})
		</script>
	</body>
</html>

4.3 结果

5. v-html指令

4.1 用法

更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

4.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<!-- 以html解析之后的效果进行展现 -->
			<span v-html="html"></span>
			<span>{
  {html}}</span>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
    
				el: '#app',
				data: {
    
					html: '<h1>html效果展现</h1>'
				}
			})
		</script>
	</body>
</html>

4.3 结果

6.v-pre指令

6.1 语法

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

6.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<!-- v-pre指令 跳过vue的解析的过程,直接原始Mustache标签-->
			<span v-pre>{
  {name}}</span>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
    
				el: '#app',
				data: {
    
					name: 'v-pre跳过vue解析'
				}
			})
		</script>
	</body>
</html>

6.3 结果

7.v-once指令

7.1 语法

只渲染元素和组件一次

7.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<!-- v-once指令 元素只被解析一次 -->
			<span v-once>{
  {once}}</span>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
    
				el: '#app',
				data: {
    
					once: '只渲染元素和组件一次',
				}
			})
		</script>
	</body>
</html>

7.3 结果

8. v-model指令

8.1 语法

在表单控件或者组件上创建双向绑定
如果需要实现页面的数据与属性实现双向数据绑定,则使用v-model，一般在输入框中最为常用,一般用来保证数据的一致性

8.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<!-- v-model 测试双向数据绑定
				1.服务器将数据给用户展现  2.用户需要传给数据给服务器
			-->
			<input name="model" v-model="model" />
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
    
				el: '#app',
				data: {
    
					model: '测试双向数据绑定'
				}
			})
		</script>
	</body>
</html>

8.3 结果

vue对象中的数据渲染到DOM对象中

DOM对象中的数据更新到vue对象中

9. v-on指令

9.1 用法

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件

9.2 案例一：自增

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定操作</title>
	</head>
	<body>
		<div id="app">
			<!-- 要求实现num数据+1 -->
			{
  {num}}
			<!-- 添加事件绑定 -->
			<button v-on:click="num++">自增</button>
			<!-- 简化写法 v-on使用@进行替换 -->
			<button @click="num++">自增</button>
			<!-- 如果操作较为复杂,可以通过方法的方式进行操作 -->
			<button @click="addNum">自增</button>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
    
				el: "#app",
				data: {
    
					num: 100
				},
				methods: {
    
					//js中方法称之为函数!!!!
					addNum(){
    
						//对num + 1
						this.num ++
					}
				}
			})
		</script>
	</body>
</html>

9.3 结果一

9.4 案例二：加法运算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算机案例</title>
	</head>
	<body>
		<div id="app" @click="addNum">
			<!-- 定义标题元素 -->
			<h1>计算机案例</h1>
			数据1: <input type="text" v-model="num1"/><br>
			数据2: <input type="text" v-model="num2" @keyup.enter="addNum"/> 
			&nbsp&nbsp
			<button @click="addNum">计算</button>
			<br>
			总数: {
  {count}}
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			/* 业务思路
				1.动态获取用户的数据
				2.准备一个加法的方法
				3.将结果进行展现.
			 */
			const app = new Vue({
    
				el: "#app",
				data: {
    
					num1: '',
					num2: '',
					count: ''
				},
				methods:{
    
					addNum(){
    
						//数值转化 parseInt()
						this.count = parseInt(this.num1) + parseInt(this.num2) 
					}
				}
			})
		</script>
	</body>
</html>

9.5 结果二

10. v-bind指令

10.1 用法

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

10.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		
		<!-- 定义style标签 -->
		<style>
			.red{
    
				background-color: red;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 需求:需要为href属性动态的绑定数据 v-bind属性绑定 -->
			<a href="http://www.baidu.com">百度</a>
			<!-- 属性绑定的语法 -->
			<a v-bind:href="url">百度</a>
			<!-- 简化操作 -->
			<a :href="url"></a>
			
			<hr >
			<!-- class的绑定 -->
			<div class="red">
				class的内容测试
			</div>
			<hr >
			<!-- 需求:需要动态的绑定样式 -->
			<div v-bind:class="{red: isRed}">
				class的内容测试
			</div>
			<!-- 简化写法 -->
			<div :class="{red: isRed}">
				class的内容测试
			</div>
			<!-- 切换样式 -->
			<button @click="isRed = !isRed">切换</button>
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
    
				el: "#app",
				data: {
    
					url: 'http://www.baidu.com',
					//如果控制样式 则设定boolean类型的值
					isRed: false
				}
			})
		</script>
	</body>
</html>

10.2 结果

11. v-if-else if -else指令

11.1 语法

v-if/v-else位置应该连续 v-else不可以单独使用（类似java分支结构）

11.2 案例（成绩判断）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求: 设定课程的成绩: score 根据课程的成绩进行评级
				 注意事项: v-if/v-else位置应该连续 v-else不可以单独使用
			 -->
			<h3 v-if="score >= 90">优秀</h3>
			<h3 v-else-if="score>=80">良好</h3>
			<h3 v-else-if="score>=70">中等</h3>
			<h3 v-else-if="score>=60">及格</h3>
			<h3 v-else>不及格</h3>
			
			<!-- v-show指令 h3标签动态的展现  跟一个布尔类型的值
				style="display: none 如果数据频繁的切换 效率更高
			-->
			<h3 v-show="isShow">展现一个变化的数据</h3>
			<!-- 通过按钮切换状态 -->
			<button @click="isShow = !isShow">切换</button>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
    
				el: "#app",
				data: {
    
					score: 50,
					isShow: true
				}
			})
		</script>
	</body>
</html>

11.3 结果

12. v-show指令

12.1 用法

根据表达式之真假值，切换元素的 display CSS property。

当条件变化时该指令触发过渡效果

12.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示案例测试</title>
	</head>
	<body>
	
		<div id="app">
			<span v-show="show">展示数据</span><br />
			<button @click="show = !show">切换</button>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
    
				el: '#app',
				data: {
    
					show: true,
				}
			})
		</script>
	</body>
</html>

12.3 结果

点击切换关闭展示
点击切换开启展示

13.v-for指令

13.1 语法

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名

13.2 案例（遍历数组&集合）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.循环数组 注意事项:循环时最好指定key 标识循环数据的位置 -->
			<h3 v-for="item in hobbys" v-text="item" :key="item"></h3>
			<!-- 2.带下标的循环遍历语法 2个参数  参数1:遍历的数据   参数2:下标 -->
			<h3 v-for="(item,index) in hobbys" v-text="item" :key="index"></h3>
			
			<!-- 3.循环遍历对象 -->
			<div v-for="user in userList" :key="user.id">
				<span v-text="user.id"></span>
				<span v-text="user.name"></span>
			</div>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
    
				el: "#app",
				data: {
    
					//一般采用数组形式保存多个数据
					hobbys: ['打游戏','敲代码','喝水','水王八'],
					userList: [{
    
						id: 100,
						name: '孙尚香'
					},{
    
						id: 200,
						name: '王昭君'
					},{
    
						id: 300,
						name: '貂蝉'
					}]
				}
			})
		</script>
	</body>
</html>

13.3 结果

转载：https://blog.csdn.net/allurelover/article/details/117016973

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

001-VUE---入门以及常用指令

1. VUE介绍

1.1 VUE介绍

1.2 VUE官网

1.3 VUE下载

2. VUE入门案例

2.1 创建1-入门案例.html文件

2.2 引入vue.js文件

2.3 编写入门案例

2.4 运行查看结果

2.5 名词解释

3. v-clock指令

3.1 用法

3.2 需求

3.3 案例

3.4 结果

4.v-text指令

4.1 用法

4.2 案例

4.3 结果

5. v-html指令

4.1 用法

4.2 案例

4.3 结果

6.v-pre指令

6.1 语法

6.2 案例

6.3 结果

7.v-once指令

7.1 语法

7.2 案例

7.3 结果

8. v-model指令

8.1 语法

8.2 案例

8.3 结果

9. v-on指令

9.1 用法

9.2 案例一：自增

9.3 结果一

9.4 案例二：加法运算

9.5 结果二

10. v-bind指令

10.1 用法

10.2 案例

10.2 结果

11. v-if-else if -else指令

11.1 语法

11.2 案例（成绩判断）

11.3 结果

12. v-show指令

12.1 用法

12.2 案例

12.3 结果

13.v-for指令

13.1 语法

13.2 案例（遍历数组&集合）

13.3 结果

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场