前端框架之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，保证视图和数据的一致性，这种轻量级的架构让前端开发更高效、便捷。

前端框架之vue初步学习

插值表达式

数据绑定最常见的形式就是使用 “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 );

            }
        }
    });
</script>
</html>

前端框架之vue初步学习

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