VUE的第一天

学习的必要：vue是目前前端最流行的前端框架，大部分前端岗位都要求会VUE，必学项目。

步骤：
1.引入vue.js。
2.引入vue模块。
注意事项：
vue的代码运行在固定的代码块中。

代码块：

<html>
<div id='app'>
</div>
</html>
<script>
new Vue({
el:'#app',//绑定的ID
data:{
//存放变量和值
}，
methods:{
//存放方法
}
})
</script>

指令(具体实例中)：

v-text:
v-html:
v-band:
v-on:click、change v-model: v-for: v-if v-else-if v-else

<head>
<style>
        .red {
            background-color: blue;
        }

        .blue {
            background-color: red;
        }

        .color {
            color: greenyellow;
        }
    </style>
</head>

<body>
    <div id="app">
        {{message}}
        <p v-text="text">以纯文本形式加载text变量</p>
        <p v-html="text">以html语言加载text变量</p>
        <p v-bind:class="blue">v-bind：class绑定变量为blue的类名，blue值为red,.red{ background-color: blue;}</p>
        <p v-bind:class="{blue:true}">v-bind：class绑定变量为{blue:false}对象的类名,对象的name(类名)为blue，value为false,.blue {background-color: red;}</p>
        <p :class="{red:false}">v-bind:可以简写为:,</p>
        <p :class='bg'>如果变量的值为一个数组，会按顺序加载样式，但是同一个类型后者会覆盖前者</p>
        <input v-model="message">
        <p> 数据双向绑定，其中一个改变，全部都会改变+{{message}}</p>
        <p v-for="(item, index) in bg" :key="index">{{index}}{{item}}+for循环需要加上key值。</p>
        <p v-if="true">if判断，当判断为ture 显示该元素，false隐藏该元素，在vue 3.0中if的优先级高于for</p>
        <p v-if="false">if判断，当判断为ture 显示该元素，false隐藏该元素</p>
        <p v-on:click="handle">v-on:click定义一个点击数件，事件名后面的括号可带可不带</p>
        <p @click="handle">v-on:click可以简写为@click。所有函数都写在methods中</p>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '6666',
            text:'<b style="color:yellow">123</b>',
            blue:'red',
            bg:['red','blue','color'],
            false:false,
            true:true
        },
        methods: {
            handle(){
                console.log(123)
            }
        },
    })
    </script>
    </script>
</body>

总结：vue是目前实力的象征，虽然第一天有点迷迷糊糊的，但是有问题就要解决，万不可拖拖拉拉。第一天都是比较基础的东西，但是有些地方比较难以理解。需要在案例中加以体会。

每日总结

VUE的第一天

学习的必要：vue是目前前端最流行的前端框架，大部分前端岗位都要求会VUE，必学项目。