Vue基础篇(一)

2019-06-08 本文已影响29人缺月楼

本教程分为三部分：基础进阶实战，深入浅出Vue.
基础篇持续更新中

--- vue.js的基本介绍和概述

请简述MVVM

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel通过双向数据绑定把 View 层和 Model层连接了起来，而View 和 Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM来统一管理。

Vue.js的优点

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写
易用灵活高效。

--- 数据绑定和指令事件

首先第一步：环境搭建先引入Vue.js

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

完成之后开始通过构造函数 Vue就可以创建一个 Vue的根实例，并启动 Vue应用---入口一个完整的栗子

 <!-- 挂载到这里 -->
    <div id="app">
        <!-- 文本插值的用法 -->
        {{msg}} <br> {{9+1}}
    </div>
    <!-- 环境搭建 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
                // element 用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例,可以是标签。也可以是css语法
                el: "#app",
                //             实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内 声明，这样不至于
                // 将数据散落在业务逻辑中，难以维护。也可以指向一个已经有的变量
                data: {
                    msg: "Vue学习开始了"
                },
                // 生命周期钩子
                created: function() {
                    alert("我是Vue实例，创建完成，还未挂载到Dom")
                },
                mounted() {
                    alert("我是Vue实例，已经挂载到DOM")
                }
            })
            // 访问属性 
            // 访问Vue实例的属性
        console.log(app.$el)
        console.log(app.$data)
            // 访问data中的属性 
        console.log(app.msg)
    </script>

分解一下：
创建实例并挂载到DOM节点,每一个实例都要对应到html元素的某个DOM节点上

el :"#app" element用于指定一个页面中己存在的 DOM元素来挂载 Vue实例,可以是标签。也可以是css语法
通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内声明，这样不至于将数据散落在业务逻辑中，难以维护。也可以指向一个已经有的变量
再被挂载过得DOM节点，通过{{msg}}使用便可以渲染到页面上

<div id="app">
        <!-- 文本插值的用法 -->
        {{msg}} 
    </div>

挂载成功之后可以通过 app.$el、app.$data、访问Vue实例的属性。通过app.msg 访问data中的属性.
访问Vue实例都以$开头，如：app.$el,---访问data元素的属性-- 直接app.属性名，如app.msg


<div id="app">
      {{msg}}
</div>
<script>
var app = new Vue({
         el: "#app",
         data: {
//                    挂载成功 
              msg: "Vue开始学习了 "
  }
});
 // 访问属性 
            // 访问Vue实例的属性
        console.log(app.$el)
        console.log(app.$data)
            // 访问data中的属性 
        console.log(app.msg)
</script>

访问属性

--- 生命周期

类似 jquery---$(document).ready()

<script>
        var app = new Vue({
               
                el: "#app",
                data: {
                    msg: "Vue学习开始了"
                },
                // 生命周期钩子
                created: function() {
                    alert("我是Vue实例，创建完成，还未挂载到Dom")
                },
                mounted() {
                    alert("我是Vue实例，已经挂载到DOM")
                }
            })
    </script>

created实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el还不可用。需要初始化处理一些数据时会比较有用，后面章节将有介
绍．----还未挂载

created: function() {alert("我是Vue实例，创建完成，还未挂载到Dom") }

还未挂载

mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。相当于 $(document).ready()---刚刚挂载

mounted() {  alert("我是Vue实例，已经挂载到DOM 点击我之后开始渲染页面")  }

刚刚挂载

当点击之后会立即进行渲染页面

渲染页面完成

beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。（以后详细讲解这里略过）
一个小栗子：主要用来清除解绑一些事件

 <div id="dateApp">
        {{date}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>
<script>
    //需求  在页面实时更新时间  
    var app = new Vue({
        //相当于element  查找页面元素
        el: "#dateApp",
        data: {
            date: new Date()
        },
        mounted: function() {
            //this代表的就是Vue实例
            var _this = this
            this.timer = setInterval(() => {
                //要拿的是date里面的数据   别写错了  
                _this.date = new Date();
            }, 1000)
        },
        beforeDestroy() {
            //清除定时器
            if (this.timer)
                clearInterval(this.timer)
        },
    })
</script>

文本插值和表达式

语法：使用双大括号（Mustache 语法）“｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，
具体如下：

<div id="app">
        <!-- 文本插值的用法 -->
        {{msg}} <br> {{9+1}}
    </div>

在｛｛｝｝中，除了简单的绑定属性值外，还可以使用 JavaScript表达式进行简单的运算、三元运算等
--- 实例
Vue .js只支持单个表达式，不支持语句和流控制。
{{ 6+6 *3}}---可以进行简单的运算

{{ 6<3 ? msg :a}}---可以用三元运算符

{{if(6>3){}}-----注意：文本插值的形式，其中不能书写表达式,支持单个表达式
{{var a = 6}}--也是多行表达式----var a ;a = 6;
〈！一这是语旬，不是表达式一〉
{ { var book = ’ Vue . js 实战 ’ ｝｝
〈！一不能使用流控制，要使用三元运算一〉
{{ if (ok) return msg ))

过滤器

Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ”对数据进行过滤，经常用于格
式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义
的，通过给Vue实例添加选项 filters来设置
过滤器：{{ data | filter1 |filter2}}
{{date | formatDate(66,99)}}中的第一个和第二个参数，分别对应过滤器的第二个和
第三个参数
下面看栗子：我先要将日期类型进行过滤对日期类型格式进行优化！通俗来说就是定了一些规则！符合定义好的规则才会渲染

  <div id="dateApp">
        <!-- 过滤器 | 后面 接的是过滤器的名字 -->
        {{date | formatDate}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>
<script>
    //需求  在页面实时显示时间  
    //对当前显示的事件进行设置  在日期 月份 小时 小于10的时候加0
    var plusDate = function(value) {
        return value < 10 ? '0' + value : value
    }
    var app = new Vue({
        //相当于element  查找页面元素
        el: "#dateApp",
        data: {
            date: new Date()
        },
        // 定义过滤器
        filters: {
            //这里的value就是要过滤的数据
            formatDate: function(value) {
                //将字符串转化为data类型
                var data = new Date(value)
                var year = data.getFullYear() //年
                var month = plusDate(data.getMonth() + 1) //粤
                var day = plusDate(data.getDate()) //日
                var hours = plusDate(data.getHours()) //
                var min = plusDate(data.getMinutes())
                var sec = plusDate(data.getSeconds())
                return year + '/' + month + '/' + day + '----' + hours + ':' + min + ':' + sec;
            }
        },
        mounted: function() {
            //this代表的就是Vue实例
            var _this = this
            this.timer = setInterval(() => {
                //要拿的是date里面的数据   别写错了  
                _this.date = new Date();
            }, 1000)
        },
        beforeDestroy() {
            //清除定时器
            if (this.timer)
                clearInterval(this.timer)
        },
    })
</script>

看一下对比效果

<div id="dateApp">
        {{date}} <br> <br>
        <!-- 过滤器 | 后面 接的是过滤器的名字 -->
        {{date | formatDate}}
    </div>

image.png

可以对过滤器进行串联：

<div id="dateApp">
        <!-- 过滤器 | 后面 接的是过滤器的名字 -->
       {{ data | filter1 |filter2}}
    </div>

-----指令和事件

指令（ Directives ）是Vue模板中最常用的一项功能，它带有前缀v－，能帮我们
快速完成DOM操作。循环渲染。显示和隐藏
本节目标 v-text, v-html , v-bind , v-on

v-text:—————解析文本和{{ }}作用一样

 <div id="app">
        {{apple}} <br>
        <!-- v-text指令 -->
        <span v-text="apple"></span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                apple: "苹果"
            }

        })
    </script>

作用一样

v-html:————— 解析html

  <div id="app">
        {{apple}} <br>
        <!-- v-text指令 -->
        <span v-text="apple"></span>
        <!-- v-html指令 --><br>
        <span v-html="banana"></span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                apple: "苹果",
                banana: "<span style='color:red;'>红香蕉</span>"
            }

        })
    </script>

红香蕉

v-bind—————–v-bind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、class等,本节只介绍基本章节，后面章节会更加深入详细讲述

 <style>
        .transRed {
            background: red;
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        {{apple}} <br>
        <!-- v-text指令 -->
        <span v-text="apple"></span>
        <!-- v-html指令 --><br>
        <span v-html="banana"></span>
        <hr>
        <!-- v-bind指令 -->
        <div v-bind:class="className"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                apple: "苹果",
                banana: "<span style='color:red;'>红香蕉</span>",
                className: "transRed"
            }

        })
    </script>

红色背景

v-on——————它用来绑定事件监听器

von具体介绍
在普通元素上， von可以监听原生的 DOM 事件，除了 click 外，还有
dblclick、 keyup, mousemove 等。表达式可以是一个方法名，这些方法都
写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向
的是当前Vue实例本身，因此可以直接使用 this.xxx的形式来访问或修改数据

 <div id="app">
        {{apple}} <br>
        <!-- v-text指令 -->
        <span v-text="apple"></span>
        <!-- v-html指令 --><br>
        <span v-html="banana"></span>
        <hr>
        <!-- v-bind指令 -->
        <div v-bind:class="className"></div>
        <hr>
        <hr>
        <hr>
        <!-- v-on指令的用法 绑定事件监听器-->
        <button v-on:click="count">{{countnum}}</button>
        <button v-on:click="count">{{countnum}}</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                apple: "苹果",
                banana: "<span style='color:red;'>红香蕉</span>",
                className: "transRed",
                countnum: 0
            },
//vue中用 到的所有方法都定义在methods中
            methods: {
                count: function() {
                    this.countnum = this.countnum + 1
                }
            }

        })
    </script>

语法糖

语法糖是指在不影响功能的情况下，添加某种简洁方法实现同样的效果，从而更加方便程
序开发。
v-bind ——> : (冒号)
v-on ——> @

  <!-- v-bind指令 -->
        <div v-bind:class="className"></div>
 <!-- 语法糖写法 -->
        <div :class="className"></div>
        <hr>
        <hr>
        <hr>
        <!-- v-on指令的用法 绑定事件监听器-->
        <button v-on:click="count">{{countnum}}</button>
        <button v-on:click="count">{{countnum}}</button>
<!-- 语法糖写法 -->
        <button @click="count">{{countnum}}</button>

未完待续。。。持续更新中

--- vue.js的内置指令
--- 表单与v-model
--- 组件
--- 自定义指令