vue基础：

1.内容渲染：

    <div id="app">
        <p v-text="username"></p>
        <p v-text="gender">性别</p>
        <hr>
        <p>姓名：{{username}}</p>
        <p>性别：{{gender}}</p>
        <hr>
        <div v-html="info"></div>
    </div>
    <script src="./lib/vue.js"></script>

<script>
    const vm=new Vue({
        el:'#app',
        data:{
            username:'zhangsan',
            gender:'女',
            info:'<h4 style=color:red;font-weight:bold;>欢迎大家</h4>'
        }
    })

</script>    

2.属性绑定：

<div id="app">
        <input type="text" :placeholder="tips">
        <hr>
        <img :src="photo" alt="" style="width:150px;">
        <hr>
        <div>1+2的结果是:{{1+2}}</div>
        <div>{{tips}}的反转结果是:{{tips.split('').reverse().join('')}}</div>
        <div :title="'box'+index">这是一个div</div>
        <div></div>
    </div>
    <script src="./lib/vue.js"></script>

<script>
    const vm=new Vue({
        el:'#app',
        data:{
            tips:'请输入用户名',
            photo:'https://cn.vuejs.org/images/logo.svg',
            index:3
        }
    })

</script>

3.事件绑定：

    <div id="app">
        <p>const的值是:{{count}}</p>
        <button @click="add(2)">+1</button>
        <button @click="sub">-1</button>
    </div>
    <script src="./lib/vue.js"></script>

<script>
    const vm=new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            add(n){
            // console.log(vm),
            // vm.count+=1
            this.count+=n
        },
            sub(){
             // console.log(vm)
            // vm.count-=1
             this.count-=1
        }
    }
    })

</script>

4.事件对象：

    <div id="app">
        <p>count的值为:{{count}}</p>
        <button @click="add($event,1)">+N</button>
    </div>
    <script src="./lib/vue.js"></script>

<script>
    const vm=new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            add(e,n){
                this.count+=1
                console.log(e)

                if(this.count%2===0){
                    e.target.style.backgroundColor='red'
                }else{
                    e.target.style.backgroundColor=''
                }
            }
        }
    })

</script>

5.事件修饰符

    <div id="app">
        <a href="https://www.baidu.com" @click.prevent="show">跳转到百度</a>
        <hr>
        <div style="height: 150px;background-color: burlywood;padding-left: 100px;line-height:150px ;"
        @click="divHandler">
            <button @click.stop="btnHandler">按钮</button>
        </div>
    </div>
    <script src="./lib/vue.js"></script>

<script>
    const vm=new Vue({
        el:'#app',
        data:{
        },
        methods:{
            show(e){
                e.preventDefault()
                console.log('点击了a标签')
            },

            btnHandler(){
                console.log('btnHandler')
            },
            divHandler(){
                e.stopPropagation();
                console.log('divHandler')
            }
        }
    })

</script>

6.按键修饰符

<div id="app">
        <input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
</div>
<script src="./lib/vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data:{

        },
        methods:{
            clearInput(e){
                console.log("触发了clearInput方法")
                e.target.value=''
            },
            commitAjax(){
                console.log("触发了ConmitAjax方法")
            }
        }
    })
</script>

7.双向绑定：

<div id="app">
        <p>用户的名字是{{username}}</p>
        <input type="text" v-model="username">
        <hr>
        <input type="text" :value="username">
        <hr>
        <div v-model="username"></div>
        <hr>
        <select v-model="city">
            <option value="">请选择城市</option>
            <option value="1">长沙</option>
            <option value="2">北京</option>
            <option value="3">上海</option>
        </select>
</div>
    <script src="./lib/vue.js"></script>

<script>
    const vm=new Vue({
        el:'#app',
        data:{
            username:'zhangsan',
            city:'2'
        }
    })
</script>

8.v-model修饰符

<div id="app">
        <input type="text" v-model.number="n1">+<input type="text" v-model.number="n2">=<span>{{ n1 + n2 }}</span>
        <hr>
        <input type="text" v-model.trim="username">
        <button @click="showName">获取用户名</button>
        <hr>
        <input type="text" v-model.lazy="username">
    </div>
    <script src="./lib/vue.js"></script>

<script>
    const vm=new Vue({
        el:'#app',
        data:{
            username:'zhangsan',
            n1:1,
            n2:2
        },
        methods:{
            showName(){
            console.log(`用户名为:"${this.username}"`)
            }
        }
    })
</script>

9.条件修饰符（v-if）

<div id="app">
        <p v-if="flag">这是被v-if控制的元素</p>
        <p v-show="flag">这是被v-show控制的元素</p>
        <hr>
        <div v-if="type === 'A'">优秀</div>
        <div v-else-if="type === 'B'">良好</div>
        <div v-else-if="type === 'C'">中</div>
        <div v-else="type === 'D'">差</div>
</div>
    <script src="./lib/vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data:{
            flag:true,
            type:"C"
        }
    })
</script>

10.循环渲染指令:

    <div id="app">
        <table class="table table-brodered table-striped table-hover">
            <thead>
                <th>索引</th>
                <th>Id</th>
                <th>姓名</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="item.import {  } from 'module';" :title="item.name+index">
                    <td>{{index}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./lib/vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data:{
            list:[
                {id:1,name:'张三'},
                {id:2,name:'李四'},
                {id:3,name:'王五'},
                {id:4,name:'赵六'}
            ]
        }
    })
</script>

---

本文仅用于个人学习记录，方便后期查阅，代码内容均根据视频写的小demo，不喜勿喷，谢谢