Vue 常用指令

 

指令是以数据去驱动DOM行为,简化DOM操作。常用指令如下

  • v-text    innertext,不能解析文本中的html标签

  • v-html   innerhtml,可解析文本中的html标签

  • v-show  控制元素的显示、隐藏
  • v-if、v-else-if、v-else   满足条件才显示对应的元素

  • v-for   遍历数组、对象

  • v-bind  单向数据绑定
  • v-model  双向数据绑定
  • v-on  事件绑定

 

 

demo   v-text、v-html、v-show

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

    <script>
        
        new Vue({
            el:'#div1',
            template:'

', //相当于'

{{info}}

'
data:function(){ return{ info:"are you ok?" //如果里面含有html标签,不解析,直接作为文本输出 } } }); new Vue({ el:'#div2', template:'

', data:function(){ return{ info:"

are you ok?

" //会解析里面的html标签 } } }); new Vue({ el:'#div3', template:'

are you ok?

', //指定一个变量,变量名不一定要是display,什么都行。display不是指的css属性名 data:function(){ return{ display:true //boolean值,true——显示,false——不显示(隐藏),不再占据空间 } } }); script>

 

 

 

demo   v-if系列  条件判断

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

满足条件才显示对于的元素。

new Vue()中,template、data均可选。

 

 

 

所谓template 模板,就是内容的模板,内容(包括指令)可以写在元素里、也可以写在template里

    <div id="app1">姓名:{{name}}div>  
    <div id="app2">div>
    
    <script>
        new Vue({
            el:'#app1',
            data:function(){
                return{   
                    name:'chy'
                }
            }
        });
        
        new Vue({
            el:'#app2',
            template:'

姓名:{{name}}

', //写在template里 data:function(){ return{ name:'chy' } } }); script>

效果是一样的。

return { }  返回的是一个对象。

 

 

 

data的2种写法

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

效果都是一样的。

 

 

 

demo   v-for  遍历数组、对象

   <ul id="app1">
        <li v-for="(item,index) in array">第{{index}}项:{{item}}li>   
    ul>
    
    <ul id="app2">
        <li v-for="(key,value) in object">{{key}}:{{value}}li>   
    ul>


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

 

 

 

 demo  v-bind、v-model  单双向数据绑定

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

 可以 v-bind|model:value="变量名"  来绑定,也可以  v-bind|model="变量名"  来绑定,相比而言,后者更简单。

v-bind|model与绑定时,是与的value绑定。

 

 

 

demo  v-on  事件绑定

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

 

 

 

template中可以写很多内容

    <div id="app">div>
    
    <script>
        
        new Vue({
            el:'#app',
            template:'

this is a title

this is first paragraph

this is second paragraph

', data:function(){ return{ content:'btn1' } } }); script>

 

你可能感兴趣的:(Vue 常用指令)