Vue学习系列 -- 常见事件/指令学习

最新推荐文章于 2022-04-28 02:17:34 发布

躬匠

最新推荐文章于 2022-04-28 02:17:34 发布

阅读量265

点赞数 1

分类专栏： Vue.js Vue学习系列

本文链接：https://blog.csdn.net/ydm19891101/article/details/90576989

版权

Vue.js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Vue学习系列

15 篇文章 1 订阅

订阅专栏

指令是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了，不要退化了哈。