前端框架之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} }}

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>

View Code

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(1);
              //表单验证必须有一个明确的boolean类型返回值
              //在应用验证方法时必须加上return 方法名称
              return false;
          }
    </script>
</html>

View Code

注：阻止表单提交

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>

View Code