Vue学习系列 -- 常见事件/指令学习
Posted 躬匠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习系列 -- 常见事件/指令学习相关的知识，希望对你有一定的参考价值。
指令是Vue中最常用的一项功能，它带有v-前缀。指令的主要职责就是当表达式的值发生改变时，相应的将某些行为应用到DOM上。
注意：数据驱动DOM是Vue的核心理念，我们无需主动操作DOM，只需要维护好数据，DOM的事vue会自动帮我们处理。
常见的指令有v-on、v-bind、v-model、v-html、v-for，下面我们结合具体的代码来一块学习一下。
v-on：用于绑定原生的动作，如click、move、doubeClick ；
v-for：用于数组或者对象的循环；
v-html：将字符串进行html解析（对于viewmodel返回的数据默认都是作为字符串直接展示的）；
v-bind：绑定模板元素的属性，如class、style
v-model：表单元素的双向绑定
v-if/v-else-if/v-else：控制元素的展现
v-show：通过设置元素的display:none/block/inline来控制元素的展现/隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>指令</title>
</head>
<body>
<div id="app1">
<p>
The people list is below:
</p>
<!--v-for-->
<template v-for="people in peoples">
<span>Name ： people.name</span><br>
<!--vue支持单表达式，但不支持语句和流程控制-->
<span>age ： people.age + 1 </span><br>
<span>sex ： v-if:"" </span><br>
<span>phone ： people.phone</span><br>
</template>
<!--v-html-->
<div v-html="html">
<!--这种写法会以字符串形式输出html标签，而不会进行解析-->
<!-- html -->
</div>
<!-- v-on -->
<div>
<p v-on:click="click">Click Me</p>
<!-- 也可以使用语法糖简写 -->
<!-- <p @click="click">Click Me</p> -->
</div>
<!-- v-models -->
<span> My name is username</span>
<input name="username" v-model="username" placeholder="please input you name"></input>
<!--v-bind-->
<div v-bind:class="classStyle">
<!-- 语法糖简写 -->
<!-- <div :class="classStyle"> -->
<span>v-bind learning</span>
</div>
</div>
</body>
<style type="text/css">
.active
color: red;
font-size : 18px;
text-align: center;
</style>
<!--这里是以CDN引入的方式加载的vue.js-->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
new Vue(
el : "#app1", //指定绑定的DOM元素
data :
classStyle : "active",
html : "<h1 style='color:red'>DEMO</h1>",
username : "Vue",
peoples : [
//设置data属性值
name : "xiaoming",
sex : 'male',
phone : "133xxx",
age : 22
,
//设置data属性值
name : "xiaohong",
sex : 'female',
phone : "152xxx",
age : 22
,
]
,
methods : //设置方法属性
click : function()
alert('this is click function');
)
</script>
</html>代码很简单，就无需解释了吧？
再次重申一点：数据驱动DOM是Vue的核心理念，我们无需主动操作DOM，只需要维护好数据，DOM的事vue会自动帮我们处理。
手动操作DOM是使用JS/Jquery时候做的事情，你现在已经进化到Vue了，不要退化了哈。
Vue学习系列
以上是关于Vue学习系列 -- 常见事件/指令学习的主要内容，如果未能解决你的问题，请参考以下文章