前端框架之vue初步学习

Vue.js介绍：

Vue.js是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

MVVM模式

　　MVVM是Model-View-ViewModel的简写。它本质上就是Mvc的改进版。mvvm就是将其中的view的状态和行为抽象化，让我们将视图ui和业务逻辑分开

　　mvvm模式和mvc模式一样，主要目的是分开视图和模型

　　vue.js是一个提供了mvvm风格的双向数据绑定的javascript库，专注于view层。它的核心是mvvm中vm。也就是viewmodel。viewmodel负责连接view和model，保证视图和数据的一致性，这种轻量级的架构让前端开发更高效、便捷。

插值表达式

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

<span v-once>This will never change: {{ msg }}</span>

这些表达式会在Vue实例的数据作用下作为javascript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

　　<!-这是语句，不是表达式->

　　 {{if(ok){return message} }}

插值表达式不能用于html标签的属性取值

v-on

可以用v-on指令监听dom事件，并在触发时运行一些javascript代码

v-on:click

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
        <div id="app">
            {{message}}
            <button v-on:click="fun1()">vue的onclick</button>
 
        </div>
 
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"hello vue!"
        },
        methods:{
            fun1:function () {
                alert("hello");
 
            }
        }
    });
</script>
</html>

vue的v-on鼠标移动事件和阻止事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        #div{
            background-color: red ;
            width: 200px;
            height: 200px;
        }
    </style>
    <script src="js/vue.min.js"></script>
 
</head>
<body>
    <div id="app">
        //@事件名称 就是 v-on:事件的简写方式。
        <div @mouseover="fun1" div="div">
             <textarea v-on:mouseover="fun2($event)">这是一个文本域</textarea>
        </div>
        <div onmouseover="divmouseover()" id="div">
            <textarea onmouseover="textareamouseover()">这是一个文件域</textarea>
        </div>
    </div>
</body>
    <script>
          //view  model
          new Vue({
              el:"#app",
              methods:{
                  fun1:function () {
                      alert("鼠标悬停在div上");
                  },
                  fun2:function (event) {
                      alert("鼠标悬停在textarea上");
                      event.stopPropagation();
                  }
              }
          })
        //传统的js方式
        function divmouseover() {
            alert("鼠标移动到了div上");
        }
 
        function textareamouseover() {
             alert("鼠标移动到了textera上");
             event.stopPropagation();
        }
    </script>
</html>

vue中的事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on:事件修饰符</title>
    <style>
        #div{
            background-color: red;
            height: 300px;
            width: 300px;
        }
    </style>
    <script src="js/vue.min.js"></script>
</head>
<body>
        <div id="app">
            <form  @subimit.prevent action="http://www.itheima.com" method="post" >
                <input type="submit" value="提交">
            </form>
            <hr>
            <form action="http://www.itheima.com" method="post" onsubmit="checkForm()">
                <input type="submit" value="提交">
            </form>
            <div @mouseover="fun1" id="div">
                <textarea @mouseover.stop="fun2($event)">这是一个文本域</textarea>
            </div>
        </div>
</body>
    <script >
        //Vue
        new Vue({
            el:"#app",
            methods:{
                fun1:function () {
                    alert("鼠标悬停在div上");
                },
                fun2:function (event) {
                    alert("鼠标悬停在textarea上");
                }
            }
 
        });
        //传统的js范式
          function checkForm() {
              alert();
              //表单验证必须有一个明确的boolean类型返回值
              //在应用验证方法时必须加上return 方法名称
              return false;
          }
    </script>
</html>

注：阻止表单提交

v-text和v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.min.js"></script>
    <title>v-text和v-html</title>
</head>
<body>
<div id="app">
        <div v-text="message"></div>
        <div v-html="message"></div>
    <div id="div1"></div>
    <div id="div2"></div>
</div>
 
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        data:{
            message:"<h1>hello</h1>"
        }
    })
    //传统js的innertext和innerHtml
    window.onload=function () {
        document.getElementById("#div1").innerHTML="<h1>Hello</h1>";
        document.getElementById("#div2").innerText="<h1>hello</h1>";
 
    }
</script>
 
</html>

v-bind

要想给html标签的属性变量的值，需要使用v-bind

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="js/vue.min.js"></script>
 
</head>
<body>
    <div id="app">
        <font size="" v-bind:color="ys1" >上书房</font>
        <font size=""  v-bind:color="ys2">南书房</font>
    </div>
 
</body>
    <script>
         //view model
         //插值表达式不能用于html标签的属性取值
         //要想给html标签的属性变量的值，需要使用v-bind
         //v-bind也可以简化直接用：
        new Vue({
            el:"#app",
            data:{
                ys1:"red",
                ys2:"green",
            }
        })
    </script>
</html>

vue中的按键修饰符

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-on:按键修饰符</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
         Vue:<input type="text" v-on:keydown.enter="fun1">
    </div>
</body>
    <script>
        //view model
        new Vue({
            el:"#app",
            methods: {
                fun1:function () {
                    alert("按下的是回车")
                }
            }
        })
    </script>
</html>

vue jar包地址：https://www.mvnjar.com/org.webjars.npm/vue/2.6.10/detail.html

v-for遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for遍历数组</title>
    <script src="js/vue.js"></script>
 
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(key,value) in product">{{key}}==={{value}}</li>
        </ul>
    </div>
 
</body>
        <script>
 
            new Vue({
                el:"#app",
                data:{
                  product:
                      {id:,name:"笔记本电脑", price:  },
                }
            })
        </script>
 
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for遍历数组</title>
    <script src="js/vue.js"></script>
 
</head>
<body>
<div id="app">
    <table border="">
        <tr>
            <td>序号</td>
            <td>编号</td>
            <td>名称</td>
            <td>价格</td>
        </tr>
        <tr v-for="(product,index)in products">
            <td>{{index}}</td>
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
        </tr>
    </table>
</div>
 
</body>
<script>
 
    new Vue({
        el:"#app",
        data:{
            products:[
                {id:,name:"笔记本电脑", price:  },
                {id:,name:"手机", price:  },
                {id:,name:"电视", price:  }
            ]
 
        }
    })
</script>
 
</html>

v-model的使用

从json中取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <form action="" method="post">
            用户名：<input type="text" name="username" v-model="user.username"><br>
            密码：<input type="text" name="password" v-model="user.password"><br>
        </form>
    </div>
</body>
    <script>
        //view model
        new Vue({
            el:"#app",
            data:{
                user:{
                    username:"test",
                    password:"",
                }
            }
        })
    </script>
</html>

vue的生命周期

　　8个生命周期的执行点

　　4个基本的

　　4个特殊的

生命周期的解析和应用：

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

beforecreate :
完成实例初始化，初始化非响应式变量
this指向创建的实例；
可以在这加个loading事件；
data computed watch methods上的方法和数据均不能访问
created
实例创建完成
完成数据(data props computed)的初始化导入依赖项。
可访问data computed watch methods上的方法和数据
未挂载DOM,不能访问$el,$ref为空数组
可在这结束loading，还做一些初始化，实现函数自执行,
可以对data数据进行操作，可进行一些请求，请求不易过多，避免白屏时间太长。
若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中
berofeMount
有了el,编译了template|/outerHTML
能找到对应的template,并编译成render函数
mounted
完成创建vm.$el，和双向绑定，
完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操作
即有了DOM 且完成了双向绑定可访问DOM节点,$ref
可在这发起后端请求，拿回数据，配合路由钩子做一些事情；
可对DOM 进行操作
beforeUpdate
数据更新之前
可在更新前访问现有的DOM,如手动移除添加的事件监听器；
updated :
完成虚拟DOM的重新渲染和打补丁；
组件DOM 已完成更新；
可执行依赖的dom 操作
注意：不要在此函数中操作数据，会陷入死循环的。
activated:
在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，
如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发
deactivated
for keep-alive 组件被移除时使用
beforeDestroy：
在执行app.$destroy()之前
可做一些删除提示，如：你确认删除XX吗？
可用于销毁定时器，解绑全局时间销毁插件对象

destroyed ：

当前组件已被删除，销毁监听事件 组件 事件 子实例也被销毁
这时组件已经没有了，你无法操作里面的任何东西了。

子父组件的生命周期
仅当子组件完成挂载后，父组件才会挂载
当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次）
父子组件在data变化中是分别监控的，但是在更新props中的数据是关联的（可实践）
销毁父组件时，先将子组件销毁后才会销毁父组件

兄弟组件的初始化（mounted之前）分开进行，挂载是从上到下依次进行
当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

mixin中的生命周期与引入该组件的生命周期是仅仅关联的，且mixin的生命周期优先执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <keep-alive>
        <my-components msg="hello" v-if="show"></my-components>
    </keep-alive>
</div>
</body>
<script>
    var child = {
        template: '<div>from child: {{msg}}</div>',
        props: ['msg'],
        data: function () {
            return {
                childMsg: 'child1'
            };
        },
        deactivated: function () {
            console.log('component deactivated!');
        },
        activated: function () {
            console.log('component activated');
        }
    };
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                message: 'father',
                show: true
            };
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(state);
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(state);
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
            // this.message = 'change';
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
            // this.message = 'change2';
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        components: {
            'my-components': child
        }
    });
</script>
</html>

vue的ajax

Vue.js 并没有限制使用哪种方式进行 ajax 访问，所以可以使用如下方式
1. 原生 ajax
2. JQuery
3. vue-resource
4. fetch.js
5. axios.js

axios.js

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

GET 实例
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

菜鸟学习：

https://www.runoob.com/vue2/vue-tutorial.html