VUE-指令_牛客博客

1、MVVM思想

M:即Model，模型，包括数据和一些基本操作

v:即 view，视图，页面渲染结果

VM:即 View-Model，模型与视图间的双向操作（无需开发人员干涉)

1.在MWM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到view中。而后当用户操作视图，我们还需要通过DOM获取view中的数据，然后同步到Model中。

2.而MVVM中的vM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和view之间是如何互相影响的:

3.只要我们Model发生了改变，View上自然就会表现出来。

4.当用户修改了View，Model中的数据也会跟着改变。

5.把开发人员从繁琐的 DOM操作中解放出来，把关注点放在如

何操作Model上。

2、Vue简介

Vue(读音/yju:/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，vue被设计为可以自底向上逐层应用。Mue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

官网:Vue.js

参考:介绍 — Vue.js

Git地址:vuejs · GitHub

尤雨溪，Vue.js创作者，Vue Technology创始人，致力于vue的研究开发。

3.Vue入门案例

3.1 安装 npm init -y

使用vscode创建新的文件夹，使用命令npm init -y初始化一个项目

3.2使用npm安装vue; npm install vue

3.3创建index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>,你好vue</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"张三"
            }
        })
    </script>
</body>
</html>

4.Vue基本语法以及插件安装

1、双向绑定,模型变化，视图变化。反之亦然。1 /3、事件处理

1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的

2、指令来简化对dom的一些操作。

3、声明方法来做更复杂的操作。

4.1 v-model指令（双向绑定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-model -->
        <input v-model="num">
        <h1>{
 {name}},你好vue,有{
 {num}}个人为你点赞</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"张三",
                num:1
            }
        })
    </script>
</body>
</html>
<!--           v-model 复选框                    -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../vue/dist/vue.js"></script>
    <div id="app">
        <input type="checkbox" v-model="language" value="张三">张三<br>
        <input type="checkbox" v-model="language" value="李四">李四<br>
        <input type="checkbox" v-model="language" value="王五">王五<br>
        选中的数据为:{
 {language}}
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                language:[]
            }    
        })
    </script>
</body>
</html>

4.2 v-on:click 指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input v-model="num"><button v-on:click="num++">点赞</button>
        <h1>{
 {name}},你好vue,有{
 {num}}个人为你点赞</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"张三",
                num:1
            }
        })
        
    </script>
</body>
</html>

4.3vue的方法声明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input v-model="num"><button v-on:click="num++">点赞</button>
        <button v-on:click="cancle">取消点赞</button>
        <h1>{
 {name}},你好vue,有{
 {num}}个人为你点赞</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",//绑定元素
            data:{//封装数据
                name:"张三",
                num:1
            },
            //声明方法，使用this来操作data中的数据
            methods:{//封装方法
                cancle(){
                    this.num--;
                }
            }
        })
    </script>
</body>
</html>

4.4安装vue浏览器插件

4.5 v-text、v-html指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../vue/dist/vue.js"></script>

    <div id="app">
        {
 {msg}}
        <span v-html="msg"></span>
        <br>
        <span v-text=msg></span>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"<h1>你好世界</h1>"
            }
        })
    </script>
</body>
</html>

4.6插值表达式

a)花括号

格式:{ {表达式}}

说明:

1.该表达式支持Js语法，可以调用南内置函数（必须有返回值)

2.表达式必须有返回结果。例如1+1，没有结果的表达式不允许使用，

如:let a =1+1;

可以直接获取vue,实例中定义的数据或函数

b) 插值闪烁

使用{ {}}方式在网速较慢时会出现间题。在数据未加载完成时，页面会显示出原始的`{ {}},加载完毕后才显示正确数据，我们称为插值闪烁。

4.7 v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../vue/dist/vue.js"></script>
    <div id="app">
        <a v-bind:href="url">跳转</a>

        <span v-bind:class="{active:isActive,'text-danger':hasError}">你好</span>
        <div v-bind:style="{color:color1,border:'1px solid'}"></div>
    </div>

    <script>
      let vm =  new Vue({
            el:"#app",
            data:{
              url:"https://www.baidu.com",
              isActive:true,
              hasError:true,
              color1:'blue'  
            }
        })
    </script>
</body>
</html>

4.8事件修饰符

在事件处理程序中调用‘event.preventDefault()或‘event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是:方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

为了解决这个问题，Vue.js为‘v-on'提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

'.stop:阻止事件冒泡到父元素

.prevent':阻止默认事件发生

'.capture':使用事件捕获模式

`.self:只有元素自身触发事件才执行。（冒泡或捕获的都不执行)

.once':只执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../vue/dist/vue.js"></script>
    <div id="app">
       <button v-on:click="num++">加1</button><br>
       <button @click="cancle">减1</button><br>
        有{
 {num}}人
        <hr>
        <div v-on:click.prevent="hello" style="border: 1px solid red;padding: 20px;">
            大div
            <div style="border: 1px solid red;padding: 20px;">
                小div<br>
                <a href="https://www.baidu.com">去百度</a>
            </div>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods:{
                cancle(){
                    this.num--;
                },
                hello(){
                    alert("点击了大div")
                }
            }
        })
    </script>
</body>
</html>

4.9按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为'v-on'在监听键盘事件时添加按键修饰符:

只有在‘keyCode’是13时调用‘vm.submit()--><input v-on:keyup.13="submit">

记住所有的‘keyCode’比较困难，所以 Vue为最常用的按键提供了别名:

全部的按键别名:

'.enter'

'.tab`

.left'

.right'

'.delete'(捕获"册除”和“退格"键)

'.esc'

'.space'

.up

`.down

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <div id="app">
       <button v-on:click="num++">加1</button><br>
       <button @click="cancle">减1</button><br>
        有{
 {num}}人
        <hr>
        <div v-on:click.prevent="hello" style="border: 1px solid red;padding: 20px;">
            大div
            <div style="border: 1px solid red;padding: 20px;">
                小div<br>
                <a href="https://www.baidu.com">去百度</a>
            </div>
        </div>
        <input type="text" v-model="a" @keyup.13="a=1000" v-on:keyup="a-=2">
        {
 {a}}
    </div>
    <script src="../vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                num:1,
                a:1
            },
            methods:{
                cancle(){
                    this.num--;
                },
                hello(){
                    alert("点击了大div")
                }
            }
        })
    </script>
</body>
</html>

4.10 v-for

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <ul>
            <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
                <!-- 1、显示user信息：v-for="item in items" -->
               当前索引：{
 {index}} ==> {
 {user.name}}  ==>   {
 {user.gender}} ==>{
 {user.age}} <br>
                <!-- 2、获取数组下标：v-for="(item,index) in items" -->
                <!-- 3、遍历对象：
                        v-for="value in object"
                        v-for="(value,key) in object"
                        v-for="(value,key,index) in object" 
                -->
                对象信息：
                <span v-for="(v,k,i) in user">{
 {k}}=={
 {v}}=={
 {i}}；</span>
                <!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
            </li>

            
        </ul>

        <ul>
            <li v-for="(num,index) in nums" :key="index"></li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            },
        })
    </script>
</body>

</html>

4.11 v-if和v-show

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 
        v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
        v-show，当得到结果为true时，所在的元素才会被显示。 
    -->
    <div id="app">
        <button v-on:click="show = !show">点我呀</button>
        <!-- 1、使用v-if显示 -->
        <h1 v-if="show">if=看到我....</h1>
        <!-- 2、使用v-show显示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>
</body>
</html>

4.12 v-else和v-else-if

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button v-on:click="random=Math.random()">点我呀</button>
        <span>{
 {random}}</span>
        <h1 v-if="random>=0.75">
            看到我啦？！ &gt;= 0.75
        </h1>

        <h1 v-else-if="random>=0.5">
            看到我啦？！ &gt;= 0.5
        </h1>

        <h1 v-else-if="random>=0.2">
            看到我啦？！ &gt;= 0.2
        </h1>

        <h1 v-else>
            看到我啦？！ &lt; 0.2
        </h1>

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>         
        let app = new Vue({
            el: "#app",
            data: { random: 1 }
        })     
    </script>
</body>
</html>