Vue基础知识

Vue基础知识

常用Java Script框架

• jQuery
• Backbone
• Angular
• vue
• React
• lodash & underscore
• Moment

1、Hello Vue

• （1）引入vue框架到body底部（创建全局对象）
• （2）作用域内写布局（相当于模板）
• （3）创建Vue实例，参数为对象
• （4）获取Vue实例挂载的元素节点
• （5）data是个对象，指定了控制的区域内要用的数据
• （6）methods内放方法，访问vm中数据必须要带this
• （7）在created（实例创建完成）中调用

        // 创建vue的一个实例对象,参数为一个对象
        const vm = new Vue({
            el: '#app',
            // 数据
            data: {
                msg: 'hello Vue',
                msg2: '我是按钮'
            }
        });

2、常用指令

• （1）花括号：{ { } }
  • 括号内放变量或者调用方法

       
 {{msg}}

• （2）v-text（与es5中的innerText等同）

• （3）v-html（与es5中的innerHTML等同）

• （4）列表渲染：v-for
  • 对数组

            

                编号: {{index}}
                身份证: {{item.cardNo}}
                姓名:  {{item.name}}
                年龄:  {{item.age}}
            

• 对 对象

    

        

            

                {{key}}  //属性名
                {{value}}  //属性值
            
        
    
    
    

• （5）条件渲染： v-if 、 v-else：是否有这个标签 & v-show：是否显示（需要切换显示隐藏时使用）
  • 可以单独用一个v-if
  • 可以v-if 与 v-else同时使用，切使用时，两个 标签必须写在一起

        

            用户: {{username}}
        
        

            立即登陆
        

• v- show

        
  //false时直接消失
            若干内容.............
        
        
  //false时display隐藏
            若干内容.............
        

• （6）绑定事件和方法（写在methods）
  • （6.1）@click=“toggle” ：括号的有无取决于是否传参
  • （6.2）v-on:click="toggle"

    

        
        {{text}}
        

        

            内容...........
            内容...........
            内容...........
        
    

• （7）绑定属性（例如a标签、图片的路径’）
  • （7.1）v-bind

        百度
        

• （7.2）省略v-bind，直接用冒号加属性

• （8）绑定class和样式
  • class也是属性，一样使用v-bind或冒号

     //active为class名，isActive为属性值
        
       按钮

• 内联样式

• （9）双向数据绑定：v-model