VUE学习笔记

一.什么是VUE

渐进式的Javascript框架
MVVM(Model,View,ViewModel)模式

二.VUE基本语法

2.1 Vue的基本使用

• 引用vue.js
• 准备要挂载的标签
• 创建vue对象，进行挂载

    
    
    
    




    {{message}}

2.2 el

• 指定相应的挂载对象
• 可以使用id,class,标签(建议使用id挂载)
• 挂载后代表这个标签被vue接管

2.3 data

• vue对象准备的数据
• 这个数据发生变化后,用到它的view部分值也改变

2.4 methods

• vue中对象的方法
• 在html中 {{方法()}}
• 在js vue对象.方法()
• 方法中的this就是指这个vue对象

三.VUE表达式

• 做四则运算(+,-,*,/)
• 三目运算符
• 可以调用字符串,对象,数组的方法(在{{}}直接写js代码的感觉)

注意:对象中也可以有方法,并且可以调用(如非必要不建议这样写)

四.VUE的指令

指令就是 v-属性

• v-text,v-html :展示相应的数据
• v-for ：循环
• v-bind: 绑定属性
• v-model: 数组双向绑定(input,select,textarea)
• v-show：显示也隐藏
• v-if: 判断
• v-on: 注册事件

v-text,v-html

• v-html会读到html标签(会显示标签的效果)
• v-text会把标签当做字符串显示
• 注意:标签中如果加了它们，里面的值就会被替换

v-for

• 可以循环数组,对象，数字与字符串

    直接拿到数组中的值
    
{{v}}
     直接拿到数组中的值与索引
    
{{v}}
     直接拿到对象的属性值
    
{{v}}
    直接拿到对象的属性值，属性名,索引
    
{{v}}


new Vue({
    el:"#app",
    data:{
        hobbys:["空调","吃饭","睡觉","打豆豆"],
        user:{
            id:1,
            username:"隔壁王哥",
            age:45,
            sex:true
        },
        num:10,
        name:"itsource"
    }
})

v-bind: 绑定属性

可以让属性在vue对象中取值

    标签形式
    
    简写形式
    
    直接绑定所有属性
     


new Vue({
    el:"#app",
    data:{
        src:"1.jpg",
        attr:{
            src:"1.jpg",
            width:40,
            height:40
        }
    }
})

v-model: 数组双向绑定

• 只能作用于(input,select,textarea)

    
    {{textVal}}


new Vue({
    el:"#app",
    data:{
        textVal:"xxxx"
    }
})

v-show:展示与隐藏

只是隐藏(display:none)

  
显示我吧
  
显示我吧


new Vue({
    el:"#app",
    data:{
        show:true
    }
})

v-if:判断

v-if,v-else-if,v-else(不显示dom元素就删除)

 
你很棒
 
你努力
 
你不行


new Vue({
    el:"#app",
    data:{
        score:80
    }
})

v-on:注册事件

 标准写法
 
 简写形式
 
 调用方法(加不加括号都可以实现)
 
 


new Vue({
    el:"#app",
    data:{
        score:80
    },
    methods:{
        say(){}
    }
})

五.VUE组件

• 先创建组件后挂载
• template(模块)中，有且只有一个根
• 取名用小写(如果是驼峰 myTag -> my-tag)

5.1 全局组件

所有被挂载的位置都可以使用

 Vue.component("mytag",{
        template:"
我有100句代码!
"
    });

5.2 局部组件

只能在当前被挂载的元素中使用

 new Vue({
        el:"#app",
        //创建局部的组件
        components:{
            //组件的名称
            "mytag":{
             template:"
我是一个局部的组件！
"
            }
        }
    })