vue基础part(1-3)

模板语法：

插值表达式

{{}}取vue实例中data的属性值

{{}}支持计算和函数

v-text 修改标签文本

v-html 会将文本解析成html

           
{{msg}}
           
{{msg.toUpperCase()}}
           

           

v-bind

v-bind 绑定标签的属性 img的src属性

v-on

绑定事件监听

 		v-on
        v-on

计算属性和监视

computed

 姓

 名

        姓名1(单向)：

fullName 作为computed中函数返回值

什么时候执行：

1.初始化时显示

2.相关data数据发生变化 比如firstName改变时

var vm = new Vue({
            el:'#demo',
            data:{
                firstName:'A',
                lastName:'B',
            },
            computed:{
                fullName (){
                    return this.firstName+' '+this.lastName
                }
            }
        })

watch

姓名2(单向)：

	var vm = new Vue({
            el:'#demo',
            data:{
                firstName:'A',
                lastName:'B',
                fullName2:'A B'
            },
            computed:{
                fullName1 (){
                    return this.firstName+' '+this.lastName
                }
            },
            watch:{
                firstName:function(value){
                    this.fullName2 = value + ' ' + this.lastName
                },

            }
        })
        vm.$watch('lastName',function(value){
            this.fullName2 =  this.firstName + ' ' + value 
        })

watch 监视 当firstName发生变化时，fullName2也随之改变

以上者两种方式都是单向的，fullName1与fullName2的输入框发生改变的时候，不能反向作用到firstName和lastName

computed 属性get与set

	computed:{
                fullName1 (){
                    return this.firstName+' '+this.lastName
                },
                fullName3:{
                    //回调函数
                    get(){
                        return this.firstName+' '+this.lastName
                    },
                    set(value){
                        this.firstName = value.split(' ')[0] 
                        this.lastName = value.split(' ')[1]
                    }
                }
            },

当firstName与lastName改变时，触发回调函数，修改firstName与lastName。

完整代码

    
    
    


    

        姓

        名

        姓名1(单向)：

        姓名2(单向)：

        姓名3(单向)：

        
{{}}
    
    
    

fullName1 () 只执行一次 原理：缓存 fullName1 作为key值，在缓存中存放其value，减少函数执行次数。

class与style绑定

v-bind 动态操作class

    

        
1.class绑定
            
xxx 字符串
            
xxx 对象
            
xxx 数组
            更新
        
2.style绑定
        

            :style="{color:activeColor,fontsize:fontSize + 'px'}"
        
    

:class 绑定的数可以是字符串，也可以是对象，

对象中的值为 类名与布尔值，类名的值为true时绑定到标签上，类名为false时则不绑定

为数组时则是多个类名拼接在一起

? style 对象语法

            
                  styleinData对象语法
            

styleinData在data中写法类似css 属性值的书写与css略微不同 css：font-size vue中data ：fontSize

            styleinData:{
                  color:'green',
                  fontSize:'35px'
            }