vue入门

最新推荐文章于 2024-09-21 11:29:05 发布

Bugxiu_fu

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量249

点赞数

分类专栏： vue 数据双向绑定文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/Bugxiu_fu/article/details/126897568

版权

vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

数据双向绑定

4 篇文章 0 订阅

订阅专栏

1.1 什么是vue

vue官网 Vue.js - 渐进式 JavaScript 框架 | Vue.js

vue是一个构建用户界面UI的渐进式javascript框架，渐进式的框架是指可以一步一步的由浅入深的去使用这个框架，该框架可以逐步引入项目，总的来说，它是我们做前端的框架。

2. 库和框架的区别

2.1 库

本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者，js中最典型的是jQuery，jquery本质上是封装dom操作，简化dom操作的工具库。但是JQuery提高的是你的工作效率，并不是代码的运行效率

2.2 框架

框架是一套完整的解决方案，使用框架是需要遵循框架的规则，将代码放入框架的合适位置，框架在合适的时候调用代码。代表Vue。一种框架会规定自己的编程方式，侵入性较高。

个人理解：上面我们都说过了，使用库的时候我们比较随意，想用哪取哪，哪块好用哪，而且把它拿过来可以按照我们的编写意愿来用。但是框架就不一样，我们好像被它控制着，要使用它，就得听它的，按照它的规则来，即使它某些地方我们用不到，或者不喜欢，也不能说什么。

2.1为什么要使用vue？

1.体积小 压缩后33k左右，体积小意味着下载速度很快。

2.更高的运行效率 cdm加速：让用户就近访问资源，根据你的ip地址，访问你就近区域的服务器。举个例子，你人在湖南，想要访问京东去gosopping，访问会访问湖南的服务器，不会访问河南的服务器。就近访问服务器原则。

3.双向数据绑定 让开发者不用再去操作dom对象，把更多精力投入到业务逻辑上来

3.mmvm

实现模型视图双向绑定让数据自动地双向同步

一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

标题	解释
MVVM	M-V-VM
M	Model数据模型，json格式的数据
V	view视图，JSP，HTML（用户看的见的）
VM	ViewModel视图模型，把Model和View关联起来的就是ViewModel，ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model

虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵循MVVM模型学习Vue要转化思想：“不要在想着怎么操作DOM，而是想着如何操作数据！！！”

jquery与vue操作页面异同

jqeury是javaScript的库，主要是操作节点的

vue是javaScript的框架，主要是操作数据的

4. 安装vue

cdn下载（需要网络）

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

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

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

手动下载

1. <!-- 开发环境版本，包含了有帮助的命令行警告 -->

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

   <!-- 生产环境版本，优化了尺寸和速度 -->

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

然后必须我们必须要将vue用script引入页面就可以直接操作vue数据了

4.1vue操作数据

HTML代码

双花括号叫做插值

需要给vue指定一个内容管理区，这意味着我们接下来的改动必须全部在指定的div内

<div id="app">
            <h2>{{dog}},{{ts}}</h2>
            <h1>{{6*8+1}}</h1>
            <h1>{{1*0?'1':'0'}}</h1>
        </div>

vue代码

数据模型data属性既可以是一个json对象也可以是一个函数

 <script>
            new Vue({
                el:"#app",
                data:function(){
                    return{
                        dog:"你好，vue",
                        ts:new Date().getTime()
                    }
                    }
            });
    </script>

5.数据绑定事件

<script>
   //数据模型data
var vm = new Vue({
    el: '#app',
    data: function(){
        return {
            msg: 'hello vue',
        }
    },
    methods: {
        clickme: function(){
            console.log('点到我了');
        }
    }
});
</script>

6.双向数据绑定

模型data与视图改变而改变。

当用户点击按钮button时，就将msg重新赋值

HTML代码

@keyup是键盘点击事件

v-model进行双向数据绑定

<div id="app">
        <h1>{{msg}}</h1>
          <input type="text" v-model="msg" @keyup="change()" />
          <button @click="setVal()">点我试试</button>
    </div>

vue代码

<script>
            var vm = new Vue({
                el: '#app',
                data: function(){
                    return {
                        msg: '初始化模型'
                    }
                },
                methods:{
                    change:function(){
                        console.log(this.msg)
                    },
                    setVal:function(){
                        this.msg="点到我了"
                    }
                }
                
            });
        </script>

效果展示

7.vue生命周期函数：

名称	作用
beforeCreate	第一个生命周期函数，表示实例完全被创建出来之前，会执行它。注意：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的属性与方法定义都还没有没初始化
created	第二个生命周期函数，在 created 中，data 和 methods 都已经被初始化好了！如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
beforeMount	第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
mounted	已经渲染到页面了，用户可以能看的视图了，当执行完 ##mounted 就表示，vue实例已经被完全创建好了
beforeUpdate	这时候，表示我们的界面还没有被更新
updated	updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
beforeDestroy	销毁之前执行，当beforeDestroy函数执行时，表示vue实例已从运行阶段进入销毁阶段，vue实例身上所有的方法与数据都处于可用状态
destroyed	当destroy函数执行时，组件中所有的方法与数据已经被完全销毁，不可用
activated	页面出现的时候执行 activated生命周期函数，跟监听 watch 有类似的作用
deactivated	页面消失的时候执行