v-bind   (:)

用来绑定属性的指令 可以把值当成变量 去拼接字符串

一般简写成    :

<div id="app">
   <input type="button" value="按钮" :title="myTitle+'abc'"/>
</div>
<script src="./lib/Vue.js"></script>
<script>
   var vm = new Vue({
       el:'#app',
       data:{
           myTitle:'123131'
       }
   })
</script>

v-cloak

能够解决传值的时候出现闪烁的问题 样式是display:none

<style>
    [v-cloak]{
       display: none;
    }
</style>
<div id="app">
      <p v-cloak>{{msg}}</p>
</div>
<script src="./lib/Vue.js"></script>
<script>
    var vm = new Vue({
       el:'#app',
       data:{
           msg:'123'
       }
    })
</script> 

v-for

循环数组 --  key只能使用number获取string 使用v-bind属性绑定形式来指定key的值

<div id="app">
        <!-- 使用方法1 直接循环出来-->
        <p v-for="item in list">{{item}}</p>

        <!-- 使用方法2 含有索引值-->
        <p v-for="(item,index) in list">索引值:{{index}}---键值{{item}}</p>

        <!-- 使用方法3 循环对象数组-->
        <p v-for="item in text">{{item.id}}---{{item.name}}</p>

        <!-- 使用方法4 循环对象数组加索引-->
        <p v-for="(item,index) in text">{{item.id}}---{{item.name}}</p>

        <!-- 使用方法5 循环对象-->
        <p v-for="(val,key,index) in user">{{val}}-----{{key}} ----{{index}}</p>

        <!-- 使用方法6 迭代数字-->
        <p v-for="count in 10">{{count}}</p>

</div>
<script>
   var vm = new Vue({
       el:'#app',
       data:{
          list:[1,2,3,4,5,6],
              text:[
                  {'id':'1','name':'zzs1'},
                  {'id':'2','name':'zzs2'},
                  {'id':'3','name':'zzs3'},
                  {'id':'4','name':'zzs4'},
                    
              ],
              user:{
                    id:1,
                    name:'zzs',
                    gender:'男'
              }
       }

   })
</script>

v-html

过滤掉html代码  如下 显示的是hello 过滤掉h1标签

<div id="app">
        <h4 v-html="msg2"></h4>
</div>
<script src="./lib/Vue.js"></script>
<script>
   var vm = new Vue({
       el:'#app',
       data:{
          msg:'123',
          msg2:'<h1>hello</h1>'
       }
    })
</script> 

v-if v-show  v-else

判断属性进行显示(切换)

<div id="app">
   <input type="button" value="更换" @click="change">
     v-if是删除和创建元素
   <h3 v-if="flage">v-if控制</h3>
     v-show是隐藏元素
   <h3 v-show="flage">v-show控制</h3>
</div>
<script src="./lib/Vue.js"></script>
<script>
   var vm = new Vue({
       el:'#app',
          data:{
            flage:false
          },
          methods:{
            change(){
               this.flage = !this.flage
            }
          }
    })
</script> 

v-model

可以实现 表单元素和model中数据的双向绑定

只能用在表单元素中 例如 input select checkbox radio text button address email textarea 等

<div id="app">
        
        <h4>{{msg}}</h4>
        <!-- v-bind  只能实现数据的单向绑定,从M自动绑定到V,无法实现双向绑定 -->
        <input type="text":value="msg"><br>
        <!-- v-model 可以实现 表单元素和model中数据的双向绑定
        只能用在表单元素中 例如 input select checkbox  radio text button address  email textarea 等-->
        <input type="text" v-model="msg"> 


    </div>
    <script src="./lib/Vue.js"></script>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'加上好的金卡和奥圣诞节哈斯卡觉得很奥圣诞节'
            }
        })
    </script>    

v-on(@)

用来绑定事件 缩写是 @

<div id="app">
           <!-- v-on: 用来绑定事件  缩写是 @  -->

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

    </div>
    <script src="./lib/Vue.js"></script>

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

            },
            //methods属性中定义了当前vue的所有方法
            methods:{
                show(){
                    alert('hello');
                }
            }
        })
    </script>   

v-text

<div id="app">
   <!-- v-cloak能够解决传值的时候出现闪烁的问题  样式是display:none -->
   <p v-cloak>{{msg}}</p>
   <!-- v-text默认没有闪烁问题 会覆盖元素中的内容  v-cloak只会替换自己的占位符,不会把元素清空-->
        <h4 v-text="msg"></h4>
</div>
<script src="./lib/Vue.js"></script>
<script>
   var vm = new Vue({
        el:'#app',
        data:{
           msg:'123'
        }
   })
</script> 

时间修饰符

使用.stop来阻止后续事件冒泡 否则一般是先执行按钮事件 在执行外层div事件

.prevent来阻止默认行为

.capture 实现捕获触发事件机制 导致先执行div再执行btn

.self实现只有点击当前元素的时候,才会触发事件处理函数

.once只触发一次事件函数

.stop 和 .self 区别: .self只会阻止自身的冒泡行为触发,不会阻止真正的冒泡行为 

<!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;
        }
        .inner{
            height: 150px;
            background-color: darkcyan;
        }
        .outer{
            padding: 40px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用.stop来阻止后续事件冒泡  否则一般是先执行按钮事件 在执行外层div事件
        <div class="inner" @click="divhandler">
            <input type="button" value="戳" @click.stop="btnhandler" >
        </div> -->


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


        <!-- 使用.capture 实现捕获触发事件机制  导致先执行div再执行btn
        <div class="inner" @click.capture="divhandler">
            <input type="button" value="戳" @click="btnhandler" >
        </div>  -->

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

         <!-- 使用.once只触发一次事件函数
        <a href="http://www.baidu.com" @click.once="linkclick">有问题找百度</a>  -->

        <!-- .stop 和 .self 区别 -->
        <!-- .self只会阻止自身的冒泡行为触发,不会阻止真正的冒泡行为 -->
        <div class="outer" @click="div2handler">
            <div class="inner" @click.self="divhandler">
                    <input type="button" value="戳" @click="btnhandler" >
            </div> 
        </div>


    </div>
    <script src="./lib/Vue.js"></script>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                
            },
            methods:{
                divhandler(){
                    console.log('div')
                },
                btnhandler(){
                    console.log('btn')

                },
                linkclick(){
                    console.log('a')

                },
                div2handler(){
                    console.log('div2')

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

在Vue中使用样式class

<!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>
        .red{
            color:red;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic
        }
        .active{
            letter-spacing: 0.5em
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 第一种使用方法 -->
        <h1 :class="['italic','thin']">djaj奥圣诞节就爱看来得及啊</h1>

        <!-- 第二种使用方法  数组中使用三元表达式 -->
        <h1 :class="['italic','thin',flag?'active':'']">djaj奥圣诞节就爱看来得及啊</h1>

        <!-- 第三种使用方法  数组中使用对象 进行调用data -->
        <h1 :class="['italic','thin',{'active':flag}]">djaj奥圣诞节就爱看来得及啊</h1>

        <!-- 第四种使用方法  直接使用对象-->
        <h1 :class="{red:true,thin:true,active:false}">djaj奥圣诞节就爱看来得及啊</h1>

        <!-- 第四种使用方法的优化  数据绑定的原理-->
        <h1 :class="pig">djaj奥圣诞节就爱看来得及啊</h1>

    </div>
    <script src="./lib/Vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                pig:{red:true,thin:true,active:false}
            }
        })        
    </script>
</body>
</html>

在Vue中使用内联样式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>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <!-- 第一种使用方法 -->
        <h1 :style="{'color':'red','font-weight':'200'}">哈萨克较好的金卡 </h1>

        <!-- 第一种使用方法优化 -->
        <h1 :style="style">哈萨克较好的金卡 </h1>

        <!-- 第一种使用方法优化之后的拓展 -->
        <h1 :style="[style,color] ">哈萨克较好的金卡 </h1>
    </div>
    <script src="./lib/Vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                style:{'color':'red','font-weight':'200'},
                color:{'font-size':'20px','font-style':'微软雅黑'}
            }
        })        
    </script>
</body>
</html>

跑马灯效果

<!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">
        <input type="button" value="走" @click="run"/>
        <input type="button" value="停" @click="stop"/>
        <h4>{{msg}}</h4>

    </div>
    <script src="./lib/Vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'猥琐发育,别浪~~',
                interval:null
            },
            methods:{
                run(){
                    //如果想要获取data里面的值  或者 想要调用methods下面的方法 
                    // 必须通过this.数据属性名 或者this.方法名进行访问  这里的this.代表new出来的实例
                    if(this.interval != null) return
                    this.interval = setInterval(()=>{
                        //获取msg的第一个字符
                        var start = this.msg.substring(0,1);
                        //获取msg的后面所有字符
                        var end = this.msg.substring(1);
                        //重新拼接字符 复制到msg
                        this.msg = end + start
                    }, 100);
                    
                },
                stop(){
                    clearInterval(this.interval);
                    //每当清除定时器之后,把interval等于null
                    this.interval = null
                }
            }
        })
    </script>
       
</body>
</html>

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">
        <input type="text" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">

    </div>
    <script src="./lib/Vue.js"></script>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                n1:0,
                n2:0,
                result:0,
                opt:'+'
            },
            methods:{
                calc(){

                    // 方法一:
                    // switch(this.opt){
                    //     case '+':
                    //         this.result = parseInt(this.n1) + parseInt(this.n2)
                    //         break;
                    //     case '-':
                    //         this.result = parseInt(this.n1) - parseInt(this.n2)
                    //         break;
                    //     case '*':
                    //         this.result = parseInt(this.n1) * parseInt(this.n2)
                    //         break;
                    //     case '/':
                    //         this.result = parseInt(this.n1) / parseInt(this.n2)
                    //         break;
                    // }

                    // 方法二:
                    var code = 'parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
                    //   eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
                    this.result = eval(code)

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

刚开始系统的学习接触vue,写的不好请多多指教