Vue 常用指令

    <div id="div1"></div> 
    <div id="div2"></div> 
    <div id="div3"></div> 

    <script>
        
        new Vue({
            el:‘#div1‘,
            template:‘<p v-text="info"></p>‘,  //相当于‘<p>{{info}}</p>‘
            data:function(){
                return{
                    info:"are you ok?"  //如果里面含有html标签，不解析，直接作为文本输出
                }
            }
        });
        
        new Vue({
            el:‘#div2‘,
            template:‘<p v-html="info"></p>‘,
            data:function(){
                return{
                    info:"<h3>are you ok?</h3>"  //会解析里面的html标签
                }
            }
        });
        
        new Vue({
            el:‘#div3‘,
            template:‘<p v-show="display">are you ok?</p>‘,  //指定一个变量，变量名不一定要是display，什么都行。display不是指的css属性名
            data:function(){
                return{
                    display:true  //boolean值，true——显示，false——不显示（隐藏），不再占据空间
                }
            }
        });
        
    </script>

    <div id="app">
        <p v-if="score>80">优秀</p>
        <p v-else-if="score>60">及格</p>
        <p v-else>不及格</p>
    </div> 

    <script>
        new Vue({
            el:‘#app‘,
            data:function(){
                return{
                    score:85
                }
            }
        });
    </script>

    <div id="app1">姓名：{{name}}</div>  <!--直接写在元素里-->
    <div id="app2"></div>
    
    <script>
        new Vue({
            el:‘#app1‘,
            data:function(){
                return{   
                    name:‘chy‘
                }
            }
        });
        
        new Vue({
            el:‘#app2‘,
            template:‘<p>姓名：{{name}}</p>‘,  //写在template里
            data:function(){
                return{
                    name:‘chy‘
                }
            }
        });
        
    </script>

    data:function(){  //指向匿名函数
        return {
            content:20
        }  
    },
    
    data(){ //直接作为函数名
        return {
            content:20
        } 
    },

　　 <ul id="app1">
        <li v-for="(item,index) in array">第{{index}}项：{{item}}</li>   <!-- index从0开始。一个元素填充一个li -->
    </ul>
    
    <ul id="app2">
        <li v-for="(key,value) in object">{{key}}：{{value}}</li>   <!-- item、index、array、key、value、object都是变量，可以自己指定，不是固定的 -->
    </ul>


    <script>
        new Vue({
            el:‘#app1‘,
            data:function(){
                return{
                    array:["手机","平板","电脑"]  //数组
                }
            }
        });
        
        new Vue({
            el:‘#app2‘,
            data:function(){
                return{
                    object:{name:‘chy‘,age:20}   //对象
                }
            }
        });
        
    </script>

　　<div id="app1"></div>
    <div id="app2"></div>
    
    
    <script>
        
        new Vue({
            el:‘#app1‘,
            //单向绑定，value指定变量名，内存中变量值的变化会同步到视图，但视图中值的变化不会影响|同步到内存中的变量
            //如果其他属性要使用此变量值，属性名前面加冒号，比如这局代码的class="chy"
            template:‘<div><input v-bind:value="name" :class="name" /> 值是{{name}}</div>‘,  
            data:function(){
                return{
                    name:‘chy‘  //内存中的变量值
                }
            }
        });
        
        new Vue({
            el:‘#app2‘,
            //双向绑定，内存中变量值的变化会同步到视图，视图中值的变化也会同步到内初变量
            template:‘<div><input v-model:value="age" :class="age" /> 值是{{age}}</div>‘,
            data:function(){
                return{
                    age:20
                }
            }
        });
        
    </script>

　　<div id="app1"></div>
    <div id="app2"></div>
    
    <script>
        
        new Vue({
            el:‘#app1‘,
            //可以修改内存中的变量，但不能直接执行alert()、console.log()之类的语句
            template:‘<button v-on:click="content=\‘click me\‘">{{content}}</button>‘,  
            data:function(){
                return{
                    content:‘btn1‘
                }
            }
        });
        
        new Vue({
            el:‘#app2‘,
            // 也可以调用方法，要执行什么语句需要放在方法中。指定方法名
            template:‘<button v-on:click="showInfo">{{content}}</button>‘,  
            data:function(){
                return{
                    content:‘btn2‘
                }
            },
            methods:{
                showInfo:function(){  //冒号前面写方法名
                    alert("you clicked btn2");
                }
                // 可以写多个方法，逗号分隔
            }
        });
        
    </script>

    <div id="app"></div>
    
    <script>
        
        new Vue({
            el:‘#app‘,
            template:‘<div><h3>this is a title</h3><p>this is first paragraph</p><p>this is second paragraph</p></div>‘,  
            data:function(){
                return{
                    content:‘btn1‘
                }
            }
        });
        
    </script>