vue.js 学习笔记1——Vue基本认识与基本指令

于 2019-06-20 22:42:56 发布
阅读量329 收藏 3
点赞数 1
分类专栏： # vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43318134/article/details/93139009
版权

1. 什么是Vue.js？


    Vue.js是前端主流框架之一，和angularJs，React.js并称为前端三大主流框架！
    在Vue.js中，一个核心的概念，就是让用户不在操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑。


2. Vue.js的基本代码
    

<!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>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个元素中的所有内容 -->
    <div id="app">
        <p>{{ msg }}</p>
    </div>

    <script>
        // 2. 创建一个Vue的实例
        // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数
        new Vue({
            el:'#app',  // 表示，当前我们new的这个Vue实例，要控制页面上的哪个区域
            data:{      // data属性中，存放的是el中要用到的数据
                msg:'欢迎学习Vue'   // 通过Vue提供的指令，很方便的就能把数据渲染到页面上
            }
        });    
    </script>
</body>
</html>

3. Vue.js的基本使用


3.1 基本指令：


3.1.1 v-cloak：用于解决插值表达式在网速比较慢的时候的闪烁问题。

例如：

<!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>
    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <!-- 定义表达式样式 -->
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <p v-cloak>++++++++++++++++++{{ msg }}+++++++++++++++++++</p>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                    msg:'123'
            }
        });
    </script>

</body>
</html>

3.1 2. v-text：默认情况下没有插值表达式闪烁问题

<body>
    
    <div id="app">
        <h1 v-text="msg"> abc </h1> <!-- abc不会生效 -->
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                    msg:'123'
            }
        });
    </script>

</body>

注意： 
1. v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符。即插值表达式前后可以添加任意内容。

<body>
    
    <div id="app">
        <p v-cloak>++++++++++++++++++{{ msg }}+++++++++++++++++++</p>
        <h1 v-text="msg"> abc </h1> <!-- abc不会生效 -->

    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                    msg:'123'
            }
        });
    </script>

</body>

2. v-cloak与v-text都会把内容当做普通文本来处理，不能处理HTML标签。


3.1.3. v-html

可以渲染html标签

<body>
    
    <div id="app">

        <div v-html="msg2"></div>

    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                    msg2:'<h1>你好html</h1>'
            }
        });
    </script>

</body>

 3.1.4. v-bind

是vue中，提供的用于绑定属性的指令

<body>
    
    <div id="app">
        <div v-html="msg2"></div>
        <input type="button" id="id" v-bind:title="mytitle" value="按钮"/>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                    msg:'123',
                    msg2:'<h1>你好html</h1>',
                    mytitle:'这是一个button按钮'
            }
        });
    </script>
</body>

注意：

1. v-bind将引号中的值当做JS来解析，可以写合法的js表达式        

<input type="button" id="id" v-bind:title="mytitle + '123' " value="按钮"/>

 2. v-bind的简写形式，只需要在属性前面写 : 即可 

<input type="button" id="id" :title="mytitle + '123' " value="按钮"/>

3.  v-bind只能实现数据的单向绑定（从M自动绑定到V），无法实现数据的双向绑定


         
3.1.5. v-on

是Vue中，提供的用于绑定事件的指令
            

<body>
    
    <div id="app">

        <input type="button" id="id" value="按钮" v-on:click="show"/>

    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                show:function(){
                    alert("hello!");
                }
            }
        });
    </script>

</body>

 注意：v-on简写形式，只需要在事件前面写 @ 即可

<input type="button" id="id" value="按钮" @click="show"/>

3.1.6 V-model——双向绑定

<div id="app">
        <h4>{{ msg }}</h4>
        <input type="text" v-model="msg"/>
    </div>

    <script>
        // 2. 创建一个Vue的实例
        // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数
        new Vue({
            el:'#app',  // 表示，当前我们new的这个Vue实例，要控制页面上的哪个区域
            data:{      // data属性中，存放的是el中要用到的数据
                msg:'欢迎学习Vue'   // 通过Vue提供的指令，很方便的就能把数据渲染到页面上
            }
        });    
    </script>

当修改input标签中的值的时候，h4标签的值也会发生变化
注意；
1. v-model指令可以实现表单元素和Model中数据的双向绑定
2. v-model只能运用于表单元素中


3.2 事件修饰符

3.2.1  .stop 阻止冒泡

事件冒泡的意思是，当元素A在元素B之内的时候，触发元素A的事件，那么元素B上的事件也会被触发。
解决办法是，在B的事件上加上 .stop

<input name="run" value="浪起来" type="button" @click.stop ="run" />

3.2.2  .prevent 阻止默认行为

所谓的默认行为，即标签原本触发之后执行的动作，比方说a标签，当点击超链接之后，会自动跳转，如果加上 .prevent，可以阻止它跳转，只需要执行我们定义的事件逻辑即可。

<a href='http://www.baidu.com' @click.prevent="show"> 有问题找百度 </a>

3.2.3   .capture 添加事件侦听器时使用事件捕获模式

所谓捕获模式，可以理解为，外层元素事件先执行，内层元素事件后执行，与阻止冒泡相反


3.2.4  .self

只当事件在该元素本身（比如不是子元素）触发时触发回调。只会阻止自己身上冒泡行为的触发，不会真正阻止冒泡的行为
    


4. 在Vue中使用样式


4.1  使用class样式


4.1.1 数组

直接传递一个数组，class使用v-bind做数据绑定

<!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>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <!-- 定义样式 -->
    <style>
        .red{
            color: brown;
        }
        .italic {
            font-style: italic;
        }
        .active{
            letter-spacing: 2em;
        }
    </style>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个元素中的所有内容 -->
    <div id="app">
       <h1 :class="['red','italic']"> 我是中国人 </h1>
    </div>

    <script>
        new Vue({
            el:'#app',  // 表示，当前我们new的这个Vue实例，要控制页面上的哪个区域
            data:{      // data属性中，存放的是el中要用到的数据
               
            }
        });    
    </script>
</body>
</html>

4.1.2 数组中使用三元表达式

<!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>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <!-- 定义样式 -->
    <style>
        .red{
            color: brown;
        }
        .italic {
            font-style: italic;
        }
        .active{
            letter-spacing: 2em;
        }
    </style>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个元素中的所有内容 -->
    <div id="app">
       <h1 :class="['red','italic',flag?'active':'']"> 我是一个中国人 </h1>
    </div>

    <script>
        // 2. 创建一个Vue的实例
        // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数
        new Vue({
            el:'#app',  // 表示，当前我们new的这个Vue实例，要控制页面上的哪个区域
            data:{      // data属性中，存放的是el中要用到的数据
                flag:true   // 通过Vue提供的指令，很方便的就能把数据渲染到页面上
            }
        });    
    </script>
</body>
</html>

4.1.3 数组中的嵌套对象

<!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>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <!-- 定义样式 -->
    <style>
        .red{
            color: brown;
        }
        .italic {
            font-style: italic;
        }
        .active{
            letter-spacing: 2em;
        }
    </style>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个元素中的所有内容 -->
    <div id="app">
       <h1 :class="['red','italic',{'active':flag}]"> 我真的是一个中国人 </h1>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                flag:true
            }
        });    
    </script>
</body>
</html>

 注意：该语法形式的出现是为了替换复杂的三元表达式


4.1.4 直接使用对象

<!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>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <!-- 定义样式 -->
    <style>
        .red{
            color: brown;
        }
        .italic {
            font-style: italic;
        }
        .active{
            letter-spacing: 2em;
        }
    </style>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个元素中的所有内容 -->
    <div id="app">
       <h1 :class="red:true,italic:true,active:true"> 我真的是一个地地道道的中国人 </h1>
    </div>

    <script>
        new Vue({
            el:'#app', 
            data:{
                flag:true
            }
        });    
    </script>
</body>
</html>

 注意：
1. 在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可以不带引号，所以这里没有带引号
2. 属性的值是一个标志符

4.1.5 将样式对象定义在data中

<!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>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <!-- 定义样式 -->
    <style>
        .red{
            color: brown;
        }
        .italic {
            font-style: italic;
        }
        .active{
            letter-spacing: 2em;
        }
    </style>
</head>
<body>
    <div id="app">
       <h1 :class="classObj"> 我真的是一个地地道道的中国人 </h1>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                flag:true,
                classObj:{red:true,italic:true,active:true}
            }
        });    
    </script>
</body>
</html>

4.2 使用内联样式


4.2.1 直接在元素上通过 :style 的形式，书写样式对象

<!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>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <!-- 定义样式 -->
    <style>
        .red{
            color: brown;
        }
        .italic {
            font-style: italic;
        }
        .active{
            letter-spacing: 2em;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--对象就是无序键值对集合  注意：这里的值需要加引号-->
      <h1 :style="{color:'red','font-weight':'200'}">这是一个h1标签</h1>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{

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

4.2.2 将行内样式定义在对象上，并直接引用到 :style 中

<!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>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <!-- 定义样式 -->
    <style>
        .red{
            color: brown;
        }
        .italic {
            font-style: italic;
        }
        .active{
            letter-spacing: 2em;
        }
    </style>
</head>
<body>
    <div id="app">
      <h1 :style="classObj1">这是一个h1标签</h1>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                flag:true,
                classObj1:{color:'red'},
            }
        });    
    </script>
</body>
</html>

 注意：该方式是，在data上定义样式；在元素中，通过属性绑定的形式，将样式对象应用到元素中。


4.2.3 在 :style 中，通过数组，引用多个 data 上的样式对象

<!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>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <!-- 定义样式 -->
    <style>
        .red{
            color: brown;
        }
        .italic {
            font-style: italic;
        }
        .active{
            letter-spacing: 2em;
        }
    </style>
</head>
<body>
    <div id="app">
      <h1 :style="[classObj1,classObj2]">这是一个h1标签</h1>
    </div>

    <script>
        new Vue({
            el:'#app',  // 表示，当前我们new的这个Vue实例，要控制页面上的哪个区域
            data:{      // data属性中，存放的是el中要用到的数据
                flag:true,   // 通过Vue提供的指令，很方便的就能把数据渲染到页面上
                classObj1:{color:'red'},
                classObj2:{'font-weight':'200'}
            }
        });    
    </script>
</body>
</html>

5. Vue.js实战跑马灯效果

<!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>
    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>
</head>
<body>
    <!-- 定义跑马灯div -->
    <div id="app">
        <!-- 定义按钮 -->
        <input name="run" value="浪起来" type="button" @click.stop ="run" /> 

        <input name="end" value="别浪" type="button"  />

        <a href='http://www.baidu.com' @click.prevent="show"> 有问题找百度 </a>

        <!-- 定义跑马灯内容P标签 -->
        <p v-cloak> {{msg}} </p>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'浪起来，别怕~~~'
            },
            methods:{
                // 定义run函数
                run(){
                    setInterval(() => {
                        // 处理msg
                        var startStr = this.msg.substring(0,1);
                        var endStr = this.msg.substring(1);
                        // 拼接字符串复制给msg
                        this.msg = endStr + startStr;
                    },400);

                },
                show(){
                    alert("有问题找百度！");
                }
                
            }
        });
    </script>
</body>
</html>

注意：

1. Vue中如果需要在方法中访问其内部的data或者函数，可以用this来指代，this就表示当前的VM
2. 设置定时器方法用 setInterval
3. 在定时器内部，this指代的是定时器，不是Vue对象，所以可以用箭头函数 => 解决this指向问题

4.  => 之间不能有空格

5. 箭头函数内部this与箭头函数外部this保持一致

武汉小喽啰
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值