一文搞定常用的Vue属性和指令


Vue中常用的七个属性

  1. el属性
    用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符。通过el: '#app'与html内容进行关联。
  2. data属性
    所有的变量都要写在data里面,用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中。
  3. template属性
    用来设置模板,会替换页面元素,包括占位符。
  4. methods属性
    放置页面中的业务逻辑,js方法一般都放置在methods中。
  5. render属性
    创建真正的Virtual Dom。
  6. computed属性
    放置一些关于逻辑的代码,根据已经存在的属性计算出新的属性,对于同样的数据,会缓存。当其依赖属性的值发生变化是,这个属性的值会自动更新,与之相关的DOM部份也会同步自动更新。
  7. watch属性
    监听data中数据的变化,只要数据变化的时候,都会自定执行对应的方法。当数据需要随着其它数据变动而变动时或者执行异步操作或开销较大操作时使用watch。watch:function(new,old){}其中两个参数,一个返回新值,一个返回旧值,

Vue中常用的七个指令

一、v-text指令和v-html指令:

在这里插入图片描述
双大括号可进行部分内容的替换,而v-text不行:

<div id="app">
  <p>{{ message }}哈哈哈</p>
  <h2 v-text='message'>哈哈哈</h2>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

运行结果:
在这里插入图片描述

v-text和v-html的区别:
在这里插入图片描述

二、v-on指令:

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
	<input type="button" value="v-on指令" v-on:click="doit">
	<input type="button" value="v-on简写" @click="doit">
	<input type="button" value="v-on双击" @dblclick="doit">
	<h2 @click="add1">{{ word }}</h2>
</div>

<script>
	var app= new Vue({
		el:"#demo",
		data:{
			word:"起飞"
		},
		methods: {
			doit:function(){
				alert("这是v-on指令弹出的警告框!");
			},
			add1:function(){
				this.word+="飞"
			}
		},
	})
</script>
</body>
</html>

运行结果:
在这里插入图片描述

点击按钮时出现:
在这里插入图片描述
多次点击h2标签会变化成下图:

在这里插入图片描述

三、Vue小应用——计数器:

在这里插入图片描述
下例使用Vue创建一个简单的计数器:

<div id="demo">
	<button @click="sub">
		-
	</button>
	<span>{{ num }}</span>
	<button @click="add">
		+
	</button>
</div>

<script>
	var demo= new Vue({
		el:"#demo",
		data:{
			num:1
		},
		methods: {
			sub:function(){
				if(this.num>0){
					this.num--;
				}
				else{
					alert("别点啦,最小了!");
				}
			},
			add:function(){
				if(this.num<10){
					this.num++;
				}
				else{
					alert("别点啦,最大了!");
				}
			},
		},
	})
</script>

在这里插入图片描述
在这里插入图片描述

四、v-show指令:

在这里插入图片描述

<div id="app">
  <h2 v-show="isShow">{{ message }}</h2>
  <input type="button" value="切换显示状态" @click="ChangeIsShow">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
  el: '#app',
  data: {
    message: 'v-show指令!',
	isShow: false
  },
  methods: {
    ChangeIsShow:function(){
		this.isShow=!this.isShow;
	} 
  },
})
</script>

运行结果:
点击按钮可切换显示状态。
在这里插入图片描述

五、v-if指令:

根据表达值的真假,切换元素的显示和隐藏(移除或添加dom元素),用法与v-show类似。
在这里插入图片描述

六、v-bind指令:

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
	.active{
		border:1px solid red;
	}
</style>
</head>
<body>
<div id="app">
  <img v-bind:src="imgSrc" alt="123" v-bind:title="imgTitle" v-bind:class="isActive?'active':''" @click="toggleActive">
  <img :src="imgSrc" alt="123" :title="imgTitle" :class="{active:isActive}" @click="toggleActive">
  <!-- 对象的方式,与上边三元表达式效果一样 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app=new Vue({
	  el: '#app',
	  data: {
	   imgSrc:"https://tse1-mm.cn.bing.net/th/id/OET.93ea03fd81884083a4a013fb091aa944?w=272&h=135&c=7&rs=1&o=5&pid=1.9",
	   imgTitle:"zagiee",
	   isActive:false
	  },
	  methods: {
	    toggleActive:function(){
			this.isActive=!this.isActive;
		} 
	  },
	})
</script>
</body>
</html>

运行结果:
在这里插入图片描述

七、v-for指令:

在这里插入图片描述

<ul>
    <li v-for="(it,index) in arr">
        {{ index+1 }}热门城市:{{ it }}
    </li>
</ul>

data:{
    arr:["北京","上海","广州","深圳"],
},

八、v-model指令:

获取和设置表单元素的值(双向数据绑定,即绑定的数据和表单元素无论修改谁,另一个都会同步更新)
在这里插入图片描述

<div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"起飞"
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message ="芜湖";
                }
            },
        })
    </script>

运行结果:
在这里插入图片描述

<div id="app">
	  <select v-model="selected">
		<option disabled value="">请选择</option>
		<option>A</option>
		<option>B</option>
		<option>C</option>
	  </select>
	  <span>您选择的是: {{ selected }}</span>
	</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
		  el: '#app',
		  data: {
			selected: ''
		  }
		})
    </script>

运行结果:
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页