vue前端框架第一天

使用的vscode
快速创建html代码 !(英文)+Tab

在这里插入图片描述

我的第一个vue代码

<!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>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
         <!--有闪烁问题-->
        <p v-cloak>{{msg}}</p>
         <!--没有闪烁问题-->
        <h4 v-text="msg"></h4>

        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
         <!--可以解析html-->
        <div v-html="msg2">{{msg2}}</div>


        <!--下面两个等价-->
        <input type="button" value="按钮" v-bind:title="mytitle + msg + '哈哈哈'">
        <input type="button" value="按钮" :title="mytitle + msg + '哈哈哈'" v-on:click="show">
  
        <input type="button" value="按钮" :title="mytitle + msg + '哈哈哈'" @mouseover="show">
    </div>

    <script src="./lib/vue-2.4.0.js"></script>

    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'1234',
                msg2:'<h1> 我  是 h 1   哈哈哈哈</h1>',
                mytitle:'我是title'
            },
            methods:{
                show:function(){
                    alert('hello')
                }
            }
        })
    </script>
    
</body>
</html>

v-cloak
1.使用 v-cloak 能够解决插值表达式闪烁的问题
v-text
1.没有插值表达式闪烁的问题
2.会覆盖内容
v-html
可以解析字符串中的html格式
v-bind: 可以简写直接用 :
用于绑定属性的指令（字符串中的为变量）
v-on: 可以简写直接用 @
:click 绑定一个点击事件
:mouseover: 绑定一个鼠标触碰事件

跑马灯案例

<!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>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="走" @click="go">
        <input type="button" value="停" @click="stop">
        <h4>{{msg}}</h4>
    </div>

    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                msg:'兄弟们跟我走~~！！',
                intervalId:null
            },
            methods:{
                
                /*ES6写法*/
               
                go(){

                    if(this.intervalId !=null){
                        return ;
                    }
                    //=> 箭头函数  解决了this指向问题
                   this.intervalId = setInterval(() => {
                      //  console.log(this.msg)
                    var st = this.msg.substring(0,1)
                    var end = this.msg.substring(1)
                    this.msg=end+st
                    
                    },50)
                },

                stop(){
                    clearInterval(this.intervalId)
                    this.intervalId = null;
                }
            }
        })
    </script>
</body>
</html>

事件修饰符
.stop 阻止冒泡
.prevent
.capture
.once
.self

<!-- 使用  .stop  阻止冒泡 -->
    <!-- <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
    </div> -->

    <!-- 使用 .prevent 阻止默认行为 -->
    <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> -->

    <!-- 使用  .capture 实现捕获触发事件的机制 -->
    <!-- <div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div> -->

    <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
    <!-- <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div> -->

    <!-- 使用 .once 只触发一次事件处理函数 -->
    <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> -->


    <!-- 演示： .stop 和 .self 的区别 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
    </div> -->

    <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div> -->

v-model

vue前端框架第一天

猜你喜欢