初识Vue

1.数据绑定
Vue中有2中数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双项绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data，
双向绑定一般都应用在表单类元素上（input,select）
v-model:value 可以简写成v-model,因为v-model默认收集就是value值。
2.事件修饰符
1).prevent:阻止默认事件（常用）
2).stop:阻止事件冒泡（常用）
3).once:事件只触发一次（常用）
4).capture:使用事件的捕获模式
5).self:只有event.target是当前操作的元素时才触发事件；
6).passive:事件默认行为立即执行，无需等待事件回调执行完毕

 <!-- 阻止默认事件 -->
        <a href="https://bbs.wlgzs.net/topic" @click.prevent="showInfo"></a>
        <!-- 2.stop:阻止事件冒泡（常用） -->
        <div class='demo1' @click='showInfo' style="background:red;height:50px;">
            <button class='demo2' @click.stop='showInfo'>点击我提示信息</button>
        </div>
        <!-- 3.once:事件只触发一次（常用） -->
        <button @click.once="showInfo()">
            你只能点击我一次
        </button>
        <!-- 4.capture:使用事件的捕获模式 -->
        <div class='box1' @click.capture='msg(1)' style="height: 60px;background-color: skyblue;">
            div1
            <button class='div2' @click='msg(2)' style="background-color: slateblue;height: 20px;">
                div2
            </button>
        </div>

3.内置指令
1）v-clock指令
*本身是一个特殊属性，Vue实例调用完毕并接管容器之后，会删掉V-clock属性
*使用css配合v-clock可以解决网速慢时页面展示出{{xxx}}的问题

 <style>
    [v-clock]{
        display: none;
    }
</style>
<div id='root'> 
    <div v-clock>你好，{{name}}</div>
</div>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            name:'李典',
            span:'<span>欢迎李大神</span>'
        }
    })
</script>

2. v-html指令
   *他会完全取代标签里面的内容，而{{xxx}}不会

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

3)v-once指令
*只执行一遍

 <button @click='n++'>点击n+1</button>

4)v-pre指令

• 跳过其所在节点的编译过程，
• 可利用他跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
  5)big指令

<div id='root'> 
        <div >当前值{{n}}</div>
        <div>放大10倍之后的值：<span v-big='n'></span></div>
        <button @click='n++'>点我n++</button>
        <br/>
        <hr/>
        <input type="text" v-fbind:value="n">
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data:{
               n:1
            },
            directives:{
                // big函数什么时候会被调用
                //1.指令与元素成功绑定时
                //2.指令所在的模板被重新调用时
                big(element,binding){
                    element.innerText=binding.value*10
                },
                fbind(element,binding){
                    element.value=binding.value;
                    element.focus()
                }
            }
            
        })
    </script>

4.生命周期函数（钩子函数）
1).又名：声明周期回调函数、生命周期函数、生命周期钩子函数
2).是什么：Vue在关键适合会把我们调用一些特殊名称的函数
3).生命周期函数名字不可更改，但内容是根据需求进行更改的
4).生命周期函数中的this指向的是vm,或组件实例对象
常用的生命周期钩子：
* mounted：发送ajax请求，启动定时器、绑定自定义事件、订阅消息等（初始化操作）
* beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息（收尾工作）
关于销毁Vue实例
* 销毁后借助Vue开发者工具看不到任何信息；
* 销毁后自定义事件会失效，但原生DOM时间依然有效
* 一般不会在beforeDestroy操作数据，因为几十操作诗句，也不会再触发根性流程了

 methods:{
            add(){
                this.n++;
            },
            bye(){
                this.$destroy()
            }
        },
        beforeCreate() {
            console.log('beforeCreate');
        },
        created() {
            console.log('create');
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            console.log('mounted')
        },
        beforeUpdate() {
            console.log('beforeUpdate')
            console.log(数据不是同步的)
        },
        updated() {
            console.log('update')
            console.log(this.n)
            debugger
        },
        beforeDestroy() {
            console.log('beforeDestroy')
            console.log(this.n)
        },
        destroyed() {
            console.log('destroy')
        },

5.非单组件

<div id="root">
        <school></school>
    </div>
    <script>
        Vue.config.productionTip = false
        Vue.prototype.x=99
        const school=Vue.extend({
            template:`
                <div>
                    <h2>{{name}}</h2>
                    <h2>{{address}}</h2>
                    <button @click='showX'>输出x</button>
                </div>
            `,
            data(){

                return{
                    name:'河南科技学院',
                    address:'河南省新乡市红旗区'
                }
                
            },
            methods:{
                showX(){
                    console.log(this.x)
                }
            }
          
        })
        new Vue({
            el:'#root',
            data:{
                msg:'你为啥是一个学校啊'
            },
            components:{
                school
            }
        })
        console.log(Vue.prototype===school.prototype.__proto__)
    </script>

6.安装脚手架
1）.配置npm淘宝镜像，否则下载速度很慢
npm config set registry https://registry.npm.taobao.org --global
2）.全局安装@vue/cli
npm install -g @vue/cli
3）.切换到创建项目的目录，然后使用命令创建项目
vue create xxxxx
4）.启动项目
npm run serve
5）.Vue脚手架隐藏了所有webpack相关配置，若想查看具体的webpack配置，请执行
vue inspect > output.js
(会报错，添加一个const a或者 export(default))

生活：
回来之后的生活那真是非富多彩啊，先是因为躲一个大白鹅，不看路，一脸撞上…划个口子，脚上又长个东西，为了寻找神医，那真是跋山涉水，哎…然后村里又让去再做个核酸，自行在家隔离14天，该几天都让去做一个，希望疫情早点结束；在家冻的很，尤其10个手指头，耳朵一到晚上也发热，哎，这几天我都安安生生在家学习和等成绩，虽然知道自己不会挂吧，但是有些成绩的平时成绩还是不好，下学期一定也要注意平时成绩。
下周计划：
1.坚持写算法；
2.争取把vue2学完。
3.督促他们认真完成寒假任务；
4.做好保暖。

余生很贵,努力活成自己想要的样子；为了未来美一点，现在必须苦一点。