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: '<button>我是按钮</button>'
            }
        });

2、常用指令

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

       <div> {{msg}}</div>

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

       <div v-text="msg"></div>

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

        <div v-html="msg2"></div>

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

            <li v-for="(item,index) in students">
                <span>编号: {{index}}</span>
                <span>身份证: {{item.cardNo}}</span>
                <span>姓名:  {{item.name}}</span>
                <span>年龄:  {{item.age}}</span>
            </li>

• 对 对象

    <div id="app">
        <ul>
            <li v-for='(value,key) in city'>
                <span>{{key}}</span>  //属性名
                <span>{{value}}</span>  //属性值
            </li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        //实例化vue对象,参数为对象
        new Vue({
            el: '#app',
            data: {
                city: {
                    "cityId": 110100,
                    "name": "北京",
                    "pinyin": "beijing",
                    "isHot": 1
                }
            }
        })
    </script>

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

        <div v-if="isLogin">
            用户: {{username}}
        </div>
        <div v-else>
            <button>立即登陆</button>
        </div>

• v- show

        <div v-if="show">  //false时直接消失
            若干内容.............
        </div>
        <div v-show="show">  //false时display隐藏
            若干内容.............
        </div>

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

    <div id="app">
        <!-- <button v-on:click="toggle">隐藏</button> -->
        <button @click="toggle">{{text}}</button>
        <hr>
        <div v-show="show">
            内容...........
            内容...........
            内容...........
        </div>
    </div>

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

        <a v-bind:href="url">百度</a>
        <img v-bind:src="imgUrl" alt="">

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

        <img :src="imgUrl" alt="">

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

     //active为class名，isActive为属性值
        <!-- 当isActive为true的时候,给button添加active类,否则不添加 -->
       <button :class="{active:isActive}">按钮</button>

• 内联样式

        <div :style="{ color: activeColor, fontSize: fontSize + 'px'}"></div>

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

    <div id="app">
        <input type="text" v-model="username">
    </div>
    <script src="./vue.js"></script>
    <script>
        // 生命周期
        let vm = new Vue({
            el:'#app',
            data: {
                username: 'liben'
            }
        })

• （10）Vue生命周期