vue2初学

1.基础语法 (id是#，class是.)

<div id="app">
    {{ message }} 
<div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    var example1 = new Vue({
      el: '#app', // 绑定标签为app的div
      data: {
        message: 0 // 在div中使用{{}}
      }
    })
</script>

2.v-html html 模板，渲染 html

<div id="app">
    <div v-html="htmlStr"></div> 
<div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    var example1 = new Vue({
      el: '#app', // 绑定标签为app的div
      data: {
        htmlStr: '<strong id="htmlId" style="color: red">玛卡巴卡</strong>',
      }
    })
</script>

3.v-model 绑定值（双向绑定）

<div id="app">
    <div>
        <input type="text" v-model="count">
        <div>{{ count }}</div>
    </div>
<div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    var example1 = new Vue({
      el: '#app', // 绑定标签为app的div
      data: {
        count: 0,
      }
    })
</script>

4.v-if v-else-if v-else 判断

<div id="app">
    <div>
        <div v-if="color === '红色'">红色</div>
        <div v-if="color === '蓝色'">蓝色</div>
        <div v-else-if="color === '黑色'">黑色</div>
        <div v-else>白色</div>
    </div>
<div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    var example1 = new Vue({
      el: '#app', // 绑定标签为app的div
      data: {
        color: '黑色',
      }
    })
</script>

5.v-bind 简写 : 绑定属性

<div id="app">
    <div>
        <a v-bind:href="url">搜索一下</a>
        <a :href="url">搜索一下</a>
        <a :href="'https://www.taobao.com'">搜索一下</a>
    </div>
<div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    var example1 = new Vue({
      el: '#app', // 绑定标签为app的div
      data: {
        url: 'https://www.taobao.com',
      }
    })
</script>

6.v-on 简写 @ 事件绑定

<div id="app">
    <div style="width: 100px; height: 100px; background-color: red" 
            @click="clickDiv" id="div"></div>

    <div>
<div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    var example1 = new Vue({
        el: '#app', // 绑定标签为app的div
        data: {
            url: 'https://www.taobao.com',
        },
        methods: {
            clickDiv() {
                console.log('我点击了div')
                let color = document.getElementById('div').style.backgroundColor
                document.getElementById('div').style.backgroundColor = color === 'blue' ?                                     
                       'red' : 'blue'

                document.getElementById('htmlId').style.color = 'gold'
             }
        }
    })
</script>

 7.v-for 循环

<div id="app">
    <div>
        <div v-for="(item, index) in fruits" :key="index">{{ (index+1) + '.' + item }}        
        </div>

        <div v-for="item in users" :key="item.name">{{ item.name }}</div>
    </div>
<div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    var example1 = new Vue({
        el: '#app', // 绑定标签为app的div
        data: {
            fruits: ['苹果', '香蕉', '梨子', '西瓜'],
            users: [{name: '玛卡巴卡'}, {name: '唔西迪西'}],
        },
    })
</script>

  8.动态 class style

<div id="app">
    <div style="display: flex; margin-top: 30px">
        <select v-model="currentMenu">
            <option value="首页">首页</option>
            <option value="教师">教师</option>
            <option value="学生">学生</option>
        </select>
        <div style="padding: 0 10px;" :style="{ fontSize: item === currentMenu ? '20px' : '14px' }" :class="{ 'active': item === currentMenu }" v-for="item in menus" :key="item">{{ item }}</div>
    </div>
<div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    var example1 = new Vue({
        el: '#app', // 绑定标签为app的div
        data: {
            menus: ['首页', '教师', '学生'],
            currentMenu: '首页'
        },
    })
</script>