Vue 学习笔记

最新推荐文章于 2024-04-04 19:38:03 发布

第五天537

最新推荐文章于 2024-04-04 19:38:03 发布

阅读量413

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_64549900/article/details/127007164

版权

1.vue简介

1.1什么是vue?

1.1.2 vue 官方网站：https://cn.vuejs.org/

6.4使用RouterLink和RouterView组件导航与显示

6.5成果演示

1.vue简介

1.1什么是vue?

vue是一个构建用户界面UI的渐进式javascript框架
作者：尤雨溪

1.1.2 vue 官方网站：https://cn.vuejs.org/

1.2 vue的特点

遵循MVVM原则
体积小，运行效率高（压缩后33k左右，体积小意味着下载速度很快）
双向数据绑定
它本身只关注UI，可以引入其它第三方库开发项目

2.MVVM

3.安装Vue

3.1cdn下载（需要网络）

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

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3.2手动下载

<script src="dist/vue.js"></script>

<script src="dist/vue.min.js"></script>

4.开发示例

4.1基本操作

<div id="app">
    <h1>{{msg}}</h1>
</div>

var vm = new Vue({
    el: '#app',
    data: function(){
        return {
            msg: 'hello vue',
            ts: new Date().getTime()
        }
    }
});

注意：data在组件开发中的写法必须是函数。

4.2绑定事件

<div id="app">
    <h1>{{msg}}, {{ts}}</h1>
    <!-- v-on:  vue绑定事件的处理函数的方式 -->
    <button v-on:click="clickme()">点我试试</button>
</div>

var vm = new Vue({
    el: '#app',
    
    data: function(){
        return {
            msg: 'hello vue',
            ts: new Date().getTime()
        }
    },
    
    //定义交互事件
    methods: {
        clickme: function(){
            console.log('点到我了');
        }
    }
});

vue指令：指的是是带有“v-”前缀的特殊属性
vue实例的methods用来定义交互事件使用的函数,函数名不限制

4.3双向数据绑定

<div id="app">
    <input type="text" v-model="msg"  @keyup="change()">
    <button  v-on:click="setVal">改变值</button>
</div>

var vm = new Vue({
    //指定vue实例的管理区域,也叫边界
    el: "#app",
			
    data: function() {
        return {
            msg: 'hello vue'
        }
    },
    
    methods: {
        change: function() {
            console.log(this.msg);
        },
        setVal: function() {
            this.msg = 'hello hello';
        }
    }
 });

5.Vue的生命周期钩子

Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

1、beforeCreate（创建前）

表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。

2、created（创建后）

数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在。

3、beforeMount（挂载前）

vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。

4、mounted（挂载后）

vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。

5、beforeUpdate（更新前）

当 data 变化时，会触发beforeUpdate方法。data 数据尚未和最新的数据保持同步。

6、updated（更新后）

当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。

7、beforeDestory（销毁前）

组件销毁之前调用，在这一步，实例仍然完全可用。

8、destoryed（销毁后）

组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。