Vue.js基本的语法一

一、vue.js基本的语法1.1vue.js是什么？Vue.js（读音 /vjuː/，类似于 view 的读音）是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是，Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件和 V

侧耳倾听...

3985人浏览 · 2018-05-10 10:06:33

侧耳倾听... · 2018-05-10 10:06:33 发布

一、vue.js基本的语法

1.1vue.js是什么？

Vue.js（读音 /vjuː/，类似于 view 的读音）是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是，Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供有力驱动。

如果你想在深入学习 Vue 之前了解更多信息，我们创建了一个视频，完整地梳理了 Vue 的核心理念，以及配合一个示例项目讲解。

如果你是有经验的前端开发人员，想知道 Vue.js 与其它库/框架(library/framework)之间的对比，请查看对比其它框架。

1.2 首先我们先下载一个vue.js

网址：https://vuefe.cn/v2/guide/installation.html

点击开发环境下载文件：vue.js文件。

1.3首先了解一下，vue.js基本语法

v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>		
	</head>
	<body>
		<!--定义一个id-->
		<div id="app">
			<div>
				<!--v-model中的name其实是js中app.data.name 的数据-->
				<input type="text"  v-model="name"/>
				<!--{{ }} 用于输出对象属性和函数返回值。{{name}}找寻的数据是js中app.data.name 的数据-->
				<span v-show="name">你的名字：{{name}}</span>
			</div>
			<!--总结就是所有找到的数据都是找js中的app.data.相对的数据名-->
			<div>
				<input type="text" v-model="age"  />
				<span v-show="age"> 你的年龄：{{age}}</span>
			</div>
			<div>
				<input type="text" v-model="sex"  />
				<!--在视觉上隐藏span中的属性，有两种方法：
				1、v-show="sex"意思是如果sex的值为true的在显示出来,如果值为false，就不显示,他和v-if的区别就在于v-show永远都在dom只是显不现实
				2、v-if="sex"当值为false的时候，这个元素直接就从dom中删除了，当值为ture时显示出来，他和v-show显示的效果是一样的-->
				<span v-show="sex">你的性别：{{sex}}</span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//定义所有的数据都在这里
		var app = new Vue({
			//它是 DOM 元素中的 id，可以找到页面的指向
			el:"#app",
			//用于定义属性，
			data:{
				name:"a",//定义字符串初始值
				age:10,//可定义number初始值
				sex:null,//当不定义时会报错，但是当定义成null时，就是将初始值定义为空
			},
			// 用于定义的函数
			methods:{
				
			}
		})
	</script>
</html>

上面显示了vue.js基本的一些语法和调用,实现了双向的绑定

就是当我们在框中输入内容的时候，外面的内容也会跟着变

1.3.1v-model的三个常用指令（好用，安全，功能全）

v-model.lazy：惰性更新，他不会马上的更新，只会当我们点击空白的时候会更新

v-model.trim：去掉前面的空格

v-model.number：将数据转化成数值型

1.3.2v-model 在其他元素及类型上的用法

我们之前就是直接用‘’name‘’中定义相同的名字实现单选

		<div id="app">
			<label>
				男<input type="radio" name="sex" value="male"  />
			</label>
			<label>
				女<input type="radio" name="sex" value="female"  />
			</label>
		</div>

现在我们用v-model来实现单选框的选择

	<body>
		<div id="app">
			<label>
				男<input v-model="sex" type="radio"  value="male"  />
				
			</label>
			<label>
				女<input v-model="sex" type="radio"  value="female"  />
			</label>
			{{sex}}
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				sex:'male',
			}
		})		
	</script>

现在我们用v-model来实现复选框的选择

当你选择的时候他会自动插入到数组中，当你勾选掉的时候又可以自动的删除，当然我们也可以在js的sex["male"]设置成默认值

	<body>
		<div id="app">
			<label>
				男<input v-model="sex" type="checkbox"  value="male"  />
				
			</label>
			<label>
				女<input v-model="sex" type="checkbox"  value="female"  />
			</label>
			{{sex}}
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				sex:[],
			}
		})		
	</script>

当我们在textarea中

	<body>
		<div id="app">
			<textarea v-model="article"></textarea>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				article:'dgrehrthrtyujtyujetysfdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
			}
		})		
	</script>

当我们在select的时候，原来的方式是

<div id="app">
			<div>你是</div>
			<select>
				<option value="1">男</option>
				<option value="2">女</option>
			</select>
		</div>

当我们使用v-model时就可以轻松的设置默认值

	<body>
		<div id="app">
			<div>你是</div>
			<select v-model="sex">
				<option value="1">男</option>
				<option value="2">女</option>
			</select>
			{{sex}}
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				//这个默认为空
//				sex:null,
				//默认为男
				sex:1,


			}
		})		
	</script>

这时我们想实现多选

	<body>
		<div id="app">
			<div>你是</div>
			<select v-model="sex">
				<option value="1">男</option>
				<option value="2">女</option>
			</select>
			{{sex}}
			<div>你的爱好</div>
			<select v-model="hobby" multiple="multiple">
				<option value="1">吃</option>
				<option value="2">玩</option>
			</select>
			{{hobby}}
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				//这个默认为空
//				sex:null,
				//默认为男
				sex:1,
				hobby:null,
			}
		})		
	</script>

1.4 v-for 循环语句指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

<!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">
			<ul>
				<!--v-for中'a用来接收每一项，in foodList是迭代的目标'{{a输出每一项}}-->
				<!--<li v-for="a in foodList">{{a}}</li>-->
				<li v-for="food in foodList1">{{food.name}}:￥{{food.discount ? food.price*food.discount : food.price}}</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">		
		var app = new Vue({
			el:"#app",
			data:{
				//迭代字符串的情况比较少，
//				foodList:['葱','姜','蒜'],
				//迭代对象组成的数组比较多
				
				foodList1:[
					{
						name:"葱",
						price:13,
						discount:0.5,
					},
					{
						name:"姜",
						price:12,
						discount:0.5,
					},
					{
						name:"蒜",
						price:11,
						discount:null,
					},
				],
				
			},
		});
	</script>
</html>

1.5 v-bind 样式的绑定（当我们省略了v-bind时没有任何的区别这个是vue上人性化的一个快捷方式，功能上不受影像）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.active{
			background: palegoldenrod;
		}
	</style>
	<body>
		<div id="app">
			<!--原始添加一个连接的方式-->
			<a href="https://www.baidu.com/">点击</a>
			<!--当我们用到的连接不是动态时用v-bind添加到url中-->
			<a v-bind:href="url">点击</a>
			<!--我们可以添加一个图片，这样点击图片的时候就可直接跳转-->
			<a v-bind:href="url"><img v-bind:src="img" /></a>
			<!--我们可以给他绑定一个类-->
			<a v-bind:class="anniu" v-bind:href="url">点击</a>
			<!--传入对象：键值对形式添加，键名这里就是active，这个就是你要添加的类，值也就是isActive就是在什么情况下添加这个条件-->
			<a v-bind:class="{active:isActive}" v-bind:href="url">点击</a>
			<!--//当我们省略了v-bind时没有任何的区别这个是vue上人性化的一个快捷方式，功能上不受影像-->
			<!--<a :class="{active:isActive}" :href="url">点击</a>-->
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			//它是 DOM 元素中的 id，可以找到页面的指向
			el:"#app",
			//用于定义属性，
			data:{
				url:"https://www.baidu.com/",
				img:"img/1.jpg",
				//根据上面的v-bind:class="anniu"找到这个位置后，添加class的类名
				anniu:"btn btn-default",
				//根据上面的class传入对象的值v-bind:class="{active:isActive}"当这个值为真的情况下显示上面
				isActive:true,
			},
			// 用于定义的函数
			methods:{
				
			}
		});
	</script>
</html>

1.6 v-on 事件处理器（

v-on

：可以替换成@）

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app">
			<button v-on:click="onclick">点击</button>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			methods: {
				onclick: function() {
					console.log("dian");
				}
			}
		})
	</script>

一个元素绑定多个事件

当我们的鼠标进入按钮，滑出按钮时

	<body>
		<div id="app">
			<button v-on="{mouseenter:onEnter,mouseout:outEnter}" v-on:click="onClick()">点我</button>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			methods: {
				onClick:function(){
					console.log("你好");
				},
				onEnter:function(){
					console.log("mouseenter");
				},
				outEnter:function(){
					console.log("mouseout");
				},
			}
		})
	</script>

这个是当我们点击提交的时候，控制台就可以输出submit

	<body>
		<div id="app">
			<button v-on="{mouseenter:onEnter,mouseout:outEnter}" v-on:click="onClick()">点我</button>
			<form v-on:submit="onSubmit($event)">
				<input type="text"  />
				<button type="submit">提交</button>
			</form>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			methods: {
				onClick:function(){
					console.log("你好");
				},
				onEnter:function(){
					console.log("mouseenter");
				},
				outEnter:function(){
					console.log("mouseout");
				},
				onSubmit:function(e){
					//阻止点击调转链接，不会整页面的刷新
					e.preventDefault();
					console.log("submit");
				},
			}
		})
	</script>

但是当我们这么做的时候还是觉得太麻烦了，这样vue.js为我们封装好了两个

一个是prevent：$event根据下面的e.preventDefault()就不会再整页的刷新了，和上面传入的$event一样，prevent就是阻止点击调转链接

一个是stop：除了prevent，还有stop就是停止冒泡事件的，意思就是到这里就行了，不要往上报了

	<body>
		<div id="app">
			<button v-on="{mouseenter:onEnter,mouseout:outEnter}" v-on:click="onClick()">点我</button>
			<!--$event根据下面的e.preventDefault()就不会再整页的刷新了，和上面传入的$event一样，prevent就是阻止点击调转链接-->
			<!--除了prevent，还有stop就是停止冒泡事件的，意思就是到这里就行了，不要往上报了-->
			<form v-on:submit.prevent="onSubmit">
			<!--<form v-on:submit.stop="onSubmit">-->
				<input type="text" />
				<button type="submit">提交</button>
			</form>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			methods: {
				onClick:function(){
					console.log("你好");
				},
				onEnter:function(){
					console.log("mouseenter");
				},
				outEnter:function(){
					console.log("mouseout");
				},
				onSubmit:function(){
					console.log("submit");
				},
			}
		})
	</script>

当我们是一个键盘事件的时候

	<body>
		<div id="app">
			<button v-on="{mouseenter:onEnter,mouseout:outEnter}" v-on:click="onClick()">点我</button>
			<!--v-on:keyup.enter="onKeyup"当用户敲了回车键的时候控制台就可以输出-->
			<form v-on:keyup.enter="onKeyup" v-on:submit.prevent="onSubmit">
			<!-- v-on：可以替换成@-->
			<!--<form @keyup.enter="onKeyup" @submit.prevent="onSubmit">-->
			<!--<form v-on:submit.stop="onSubmit">-->
				<input type="text" />
				<button type="submit">提交</button>
			</form>


			
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			methods: {
				onClick:function(){
					console.log("你好");
				},
				onEnter:function(){
					console.log("mouseenter");
				},
				outEnter:function(){
					console.log("mouseout");
				},
				onSubmit:function(){
					console.log("submit");
				},
				onKeyup:function(){
					console.log("onKeyup");
				},
			}
		})
	</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^