vue入门

目录

1.1 什么是vue

2. 库和框架的区别

2.1 库

2.2 框架

2.1为什么要使用vue？

3.mmvm

4. 安装vue

4.1vue操作数据

5.数据绑定事件

6.双向数据绑定

7.vue生命周期函数：

---

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

jquery与vue操作页面异同

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

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

4. 安装vue

1. cdn下载（需要网络）

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

2. 手动下载

   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代码

效果展示

 7.vue生命周期函数：