vue的基本使用和指令

1.vue简介

• vue是一套用于构建用户界面的前端框架

• MVVM工作原理：ViewModel作为核心，把当前页面的数据源（Model）和页面的结构（View）进行连接

2.vue基本使用

 	<!-- 2.声明被vue控制的DOM区域 -->
    <div id="app">{{username}}</div>

    <!-- 1.导入vue.js的script脚本文件 -->
    <script src="../lib/vue-2.6.12.js"></script>

    <!-- 3.创建vm实例对象（vue实例对象） -->
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'zjsj'
            }
        })
    </script>

3.内容渲染

	<div id="app">
        <!-- 内容渲染 -->
        <p v-text="username"></p>
        <p v-text="gender">性别</p>
        <p>姓名：{{username}}</p>
        <p>性别：{{gender}}</p>
        <p>{{desc}}</p>
        <p v-html="desc"></p>
        <p v-text="desc"></p>
    </div>

    <script src="../lib/vue-2.6.12.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                username: 'zjsj',
                gender: '男',
                desc: '<i>abc<i>'
            }
        })
    </script>

4.属性绑定

 	<div id="app">
        <!-- 属性绑定 -->
        <input type="text" v-bind:placeholder="inputValue">
        <img  v-bind:src="imgSrc" alt="">
        <hr>
        <!-- 属性绑定简写，v-bind 简写成 : -->
        <input type="text" :placeholder="inputValue">
        <img  :src="imgSrc" alt="">
    </div>

    <script src="../lib/vue-2.6.12.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                inputValue: '请输入内容',
                imgSrc: '../images/6.jpg'
            }
        })
    </script>

5.事件绑定

	<div id="app">
        <p>count的值为：{{count}}</p>
        <!-- 事件绑定 -->
        <button v-on:click="addCount">+1</button>
        <!-- 事件绑定简写形式 v-on: 简写为 @ -->
        <button @click="addCount">+1</button>
    </div>

    <script src="../lib/vue-2.6.12.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                addCount() {
                    this.count += 1;
                }
            }
        })
    </script>

6.事件的双向绑定

    <div id="app">
        <span>名字：{{username}}</span>
        <br>
        <input type="text" v-model="username">
        <br>
        <span>省份：{{province}}</span>
        <br>
        <select name="" id="" v-model="province">
            <option value="">请选择</option>
            <option value="1">河北</option>
            <option value="2">广西</option></option>
            <option value="3">北京</option>
        </select>
    </div>

    <script src="../lib/vue-2.6.12.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                username: '张嘉圣杰',
                province: ''
            }
        })
    </script>

7.条件渲染

    <div id="app">
        <button @click="flag=!flag">按一下</button>

        <p v-if="flag">v-if..............</p>
        <p v-show="flag">v-show..............</p>
    </div>

    <script src="../lib/vue-2.6.12.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                flag: true
            }
        })
      </script>

8.列表渲染

    <div id="app">
        <ul>
            <li v-for="item in list" :key="index">姓名：{{item.username}}</li>
        </ul>
    </div>

    <script src="../lib/vue-2.6.12.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                list: [
                    {id:1,username:'张嘉圣杰'},
                    {id:2,username:'xyy'},
                    {id:3,username:'lyy'},
                    {id:4,username:'myy'},
                ]
            }
        })
    </script>