Vue.js------------------4vue指令

2022-10-03 07:46:21

Vue指令

一挂载：

就像linux一样，硬盘是不允许直接操作而是给一个挂载点，你才能间接操作，vue一个意思。

一般是一个html区域，用div划分，挂载一个vue对象

可以发现，你根本不需要操作dom，vue将module和view进行了双向绑定，一旦View和Module有一个地方改动，vue都可以感知

然后通知另一方做出调整。

我只需要：1：声明好data

　　　　　2：声明好view

　　　　 3：声明好vue对象

二：v-if v-show

都是用来控制标签的隐藏和显示

v-if隐藏标签后，会用注释代替，目的是告诉你，这部分被我吃了，我怕你不知道，放个注释占个地方给你提醒。

v-show隐藏后，只是display：none，dom元素还是存在的，而v-if直接dom元素删除了。

语法

v-if/v-show="expression"

expression的结果为true，此标签就显示，为false就不显示。

v-else

只有v-if的话就很恶心，许多的逻辑无法处理，所以才有了v-else，在条件为false的时候显示

v-else找最近的v-if，如果上面还有一个v-else,在就继续找前面的v-if

v-else后面没有任何表达式

<p v-if="showP">Hello Vue</p>
 <p v-else>Good Bye Vue</p>

View Code

必须跟在v-if或者v-show之后否则不起作用

v-else-if

用于 if elseif elseif else的逻辑块中使用

<div id="app">
    <div v-if="type === ‘A‘">
      A
    </div>
    <div v-else-if="type === ‘B‘">
      B
    </div>
    <div v-else-if="type === ‘C‘">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: ‘#app‘,
  data: {
    type: ‘C‘
  }

View Code

三：v-for

列表渲染，可以循环数组，可以循环json对象，二者无区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../bower/bower_components/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="val in array">{{val}}</li>
        </ul>
        <ul>
            <li v-for="(val,index) in array">val={{val}},index={{index}}</li>
        </ul>
        <!-- 循环json,默认拿的value -->
        <ul>
            <li v-for="val in json">{{val}}</li>
            <li v-for="(val,key,index) in json">key={{key}},val = {{val}},index={{index}}</li>
        </ul>
    </div>

    <script >
        var m = {
            array : ["北京","shanghai","shandong"],
            json: {
                name: "zhansgan",
                age: 18,
                school: "weihaiyizhong"
            }
        };
        var vm = new Vue({
            el: "#app",
            data: m,
            methods: {

            }
        });
    </script>
</body>
</html>

写在谁身上就循环谁，可见指令后面的字符串仿佛代码，其实vue拿到字符串就是类似去执行了exec方法

四：v-model

用于控件和model的双向绑定，前面做的基本是拿控件触发事件调用函数去改变data

v-model是将控件里面的value与data底层的变量的值进行了绑定。

底层data变了，那么控件的value也变

控件的value值被用户动了，底层data也会改变,假如还是加空间+事件来控制的话会很麻烦

v-model将控件的value与底层的data绑定起来

原来要在代码里面产生一个html标记以及类似的东西，现在全部扔到了html当中，用vue的指令来控制这些东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../bower/bower_components/vue/dist/vue.min.js"></script>
</head>
<body>
    
    <div id="app">
        <input type="text" value="abc">
        <input type="text" v-model="thval">
    </div>
    <script >
        var m = {
            thval: "hello world",
            
        };
        var vm = new Vue({
            el: "#app",
            data: m,
            methods: {

            }
        });
    </script>
</body>
</html>

五：v-bind

将标签的属性值和data里面的变量值绑定。

原来是src=""./img/meinv.img""

例如v-bind:src="imgUrl"

imgUrl是data里面的变量，对应着一个具体路径。