1、Vue简介、模板方法、表单输入输出绑定、计算属性、监听器、class属性的绑定

最新推荐文章于 2022-10-24 17:34:15 发布

ShawnYue_08

最新推荐文章于 2022-10-24 17:34:15 发布

阅读量266

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/ShawnYue_08/article/details/107693500

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

简介
模板方法
表单输入绑定
计算属性
侦听器
class属性绑定

简介

安装

最新稳定版本：2.6.11。

在使用 Vue 时，我们推荐在你的浏览器上安装Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

1、直接用<script>引入

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

2、CDN

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

3、NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如webpack打包器配合使用。

# 最新稳定版
$ npm install vue

介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计

为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另

一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

HelloWorld

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- Vue实例绑定的DOM -->
		<div id="app">
			<!-- 模板语法 -->
			{{msg}}
		</div>
		<!-- CDN引入Vue.js -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				/* 挂载到DOM元素 */
				data:{
					msg:'Hello Vue.js'
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

模板方法

插值表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 插值表达式{{}}，支持做一些运算，但是不建议这样做 -->
			<h3>{{firstname + lastname}}</h3>
			<h3>{{num * 2}}</h3>
			<h3>{{num > 10 ? num : num * 3}}</h3>
			<h3>{{firstname.length}}</h3>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					firstname:'赵',
					lastname:'云',
					num:20
				}
			})
		</script>
	</body>
</html>

属性绑定指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="url" target="_blank">进入哔哩哔哩</a>
			<br>
			<!-- v-bind指令的语法糖形式 -->
			<img :src="imgsrc" width="400px" height="600px">
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					url:'https://www.bilibili.com',
					imgsrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596101582056&di=6d71b95850add99049d84d6f8c5b8bb5&imgtype=0&src=http%3A%2F%2Fwww.7dapei.com%2Fphoto%2Fdapei%2F78.2.jpg'
				}
			})
		</script>
	</body>
</html>

事件绑定指令和切换图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button v-on:click="changeImage">点击切换图片</button><br>
			<!-- 事件绑定的语法糖:@ -->
			<img v-bind:src="imgsrc[num%imgsrc.length]" width="300px" height="500px">
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					num:1,
					imgsrc:[
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596101911597&di=a3e63fab05228a8b63d5bbb94d593ea6&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fe7bf0717d2b00cf48ebb9c0de83514f96485cf8929b1e-s1Odrq_fw658',
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596101965505&di=da0c7be2e79cdc6dddbc2d5c1cc6200b&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201705%2F30%2F20170530215558_fTxdi.thumb.700_0.jpeg',
						'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709263902,249359209&fm=11&gp=0.jpg'
					]
				},
				methods:{
					/* ES6方法的写法 */
					changeImage() {
						this.num++;
					}
				}
			})
		</script>
	</body>
</html>

表单输入绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<form action="#" method="GET">
				<input type="text" name="name" v-model="value" />
			</form>
			<span>{{value}}</span>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					value:'张三'
				}
			})
		</script>
	</body>
</html>

计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="firstname"><br>
			<input type="text" v-model="lastname"><br>
			<span>{{fullname}}</span>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					firstname:'',
					lastname:''
				},
				computed:{
					fullname:function(){
						return this.firstname + this.lastname;
					}
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="firstname"><br>
			<input type="text" v-model="lastname"><br>
			<input type="text" v-model="fullname">
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					firstname:'',
					lastname:''
				},
				computed:{
					fullname: {
						set:function(arg) {
							this.firstname = arg.split(' ')[0];
							this.lastname = arg.split(' ')[1];
						},
						get:function() {
							return this.firstname + " " + this.lastname;
						}
					}
				}
			})
		</script>
	</body>
</html>

侦听器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- watch监听属性值的变化 -->
		<div id="app">
			<input type="text" v-model="firstname"><br>
			<input type="text" v-model="lastname"><br>
			<input type="text" v-model="fullname">
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					firstname:'',
					lastname:'',
					fullname:''
				},
				watch:{
					firstname:function(newValue) {
						this.fullname = newValue + ' ' + this.lastname;
					},
					lastname:function(newValue) {
						this.fullname = this.firstname + ' ' + newValue;
					},
					fullname:function(newValue) {
						let arr = newValue.split(' ');
						this.firstname = arr[0];
						this.lastname = arr[arr.length-1];
					}
				}
			})
		</script>
	</body>
</html>

米与千米的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        米: <input type="text" v-model="meter">
        <br>
        千米：<input type="text" v-model="kilemeter">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                meter: 0,
                kilemeter: 0
            },
            watch: {
                meter: function (newValue) {
                    this.kilemeter = newValue / 1000;
                },
                kilemeter : function (newValue) {
                    this.meter = newValue * 1000;
                }
            }
        })
    </script>
</body>
</html>

class属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 对象语法 -->
			<span class="title" :class="{active:isActive, line:isLine}">v-bind绑定class-对象语法</span><br>
			<span :class="obj">v-bind绑定class-对象语法</span><br>
			<!-- 数组语法 -->
			<span :class="['active', line]">v-bind绑定class-数组语法</span>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					isActive:true,
					isLine:false,
					obj:{
						active:false,
						line:true
					},
					line:'line'
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

ShawnYue_08

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
1、Vue简介、模板方法、表单输入输出绑定、计算属性、监听器、class属性的绑定

文章目录简介安装介绍HelloWorld模板方法插值表达式属性绑定指令事件绑定指令和切换图片表单输入绑定计算属性侦听器class属性绑定简介安装最新稳定版本：2.6.11。在使用 Vue 时，我们推荐在你的浏览器上安装Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。1、直接用<script>引入直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。2、CDN对于制作原型或学习，你可以这样使用最新版本：<scr
复制链接

扫一扫