1. 什么是Vue.js

  • Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)
  • Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!
  • Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)
  • 前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;

2. 安装 Vue

2.1 下载安装

下载地址:https://github.com/vuejs/vue

可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip

下载解压,得到vue.js文件

2.2 使用CDN

或者也可以直接使用公共的CDN服务:

<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者:

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3. 框架和库的区别

  • 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
    • node 中的 express;
  • 库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
    • 从Jquery 切换到 Zepto
    • 从 EJS 切换到 art-template

4. Node(后端)中的 MVC 与 前端中的 MVVM 之间的区别(了解内容)

  • MVC 主要是后端的分层开发思想;把 一个完整的后端项目,分成了三个部分:
    • Model:(数据层)主要负责 数据库的操作;
    • View:(视图层)所有前端页面,统称为 View 层
    • Controller:(业务逻辑层)主要处理对应的业务逻辑;(对于后台来说,这是开发的重点)
  • MVVM是前端页面的分层开发思想,主要关注于 视图层 分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View, ViewModel
    • Model 是 页面中,需要用到的数据
    • View 是页面中的HTML结构;
    • ViewModel 是 一个 中间的调度者,提供了双向数据绑定的概念;
  • 为什么有了MVC还要有MVVM
    • 因为 MVC是后端的开发思想,并没有明确定义前端的页面该如何开发;
    • MVVM 是前端的页面的开发思想,把每个页面,分成了三个部分,同时 VM 作为 MVVM 的核心,提供了双向数据绑定的概念,前端程序员,不需要手动渲染页面了,而且,页面数据发送变化,也不需要程序员手动把 数据的变化同步到Model中;这所有的操作,都是 VM 自动完成的!
    • 有了 MVVM 的思想以后,前端只关心 页面交互逻辑,不关心页面如何渲染;

4.2 Vue.js 基本代码 和 MVVM 之间的对应关系

  1. 注意:Vue中,不推荐程序员手动操作DOM元素;所以,在Vue项目中,没有极其变态的需求,一般不要引入 Jquery;
  2. Vue代码解析执行的步骤:
    1. 当 VM 实例对象,被 创建完成之后,会立即解析 el 指定区域中的所有代码;
    2. 当 VM 在解析 el 区域中所有代码的时候,会把 data 中的数据,按需,填充到 页面指定的区域;
  3. 注意:每当 vm 实例对象,监听到 data 中数据发生了变化,就会立即 重新解析 执行 el 区域内,所有的代码;

1540830117063

mvvm是前端思想,mvc是后台思想

5. Vue调试工具vue-devtools的安装和使用

Vue.js devtools - 翻墙安装方式 - 推荐

6. 快速入门

7. Vue实例

7.1 创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

var vm = new Vue({
  // 选项
})

在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:

  • el
  • data
  • methods

等等

接下来我们一 一介绍。

7.2 模板或元素

每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。

我们可以通过el属性来指定。

例如一段html模板:

<div id="app">

</div>

然后创建Vue实例,关联这个div

var vm = new Vue({
    el:"#app"
})

这样,Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

7.3 数据

当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。

html:

<div id="app">
    <input type="text" v-model="name"/>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华"
    }
})
  • name的变化会影响到input的值
  • input中输入的值,也会导致vm中的name发生改变

7.4 方法

Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue的作用范围内使用。

html:

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>

js写法一:

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>
<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           num:0
       },
       methods:{
           add:function(){
               this.num++;
           }
       }
    });
</script>

js写法二:

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>
<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           num:0
       },
       methods:{
           add(){
               this.num++;
           }
       }
    });


</script>

7.5 生命周期

7.5.1 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。

生命周期:

Vue life cycle

1540850010193

7.5.2 钩子函数

钩子函数:生命周期函数的别名;

  • 生命周期钩子 = 生命周期函数 = 生命周期事件
  • 主要的生命周期函数分类:
    • 创建期间的生命周期函数:
      • beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
      • created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板【当 vm 实例的 data 和 methods 初始化完毕后,vm 实例会自动执行 created 函数】
      • beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中
      • mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示【如果要通过某些插件操作页面上的DOM元素节点,最早要在 mounted 中进行】
    • 运行期间的生命周期函数:
      • beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
      • updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
    • 销毁期间的生命周期函数:
      • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
      • destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
  • 例1:created代表在vue实例创建后;

我们可以在Vue中定义一个created函数,代表这个时期的构造函数:

html:

<div id="app">
    {{hello}}
</div>

js:

<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           hello:''
       },
       created(){
           this.hello = 'czdx,一统江湖,千秋万代'
       }
    });
</script>

结果:

1540845983254

  • 例2:
<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>vuejs生命周期</title>
      <script src="vuejs-2.5.17.js"></script>
   </head>

   <body>
      <div id="app">
         {{message}}
      </div>
   </body>
   <script>
      var vm = new Vue({
         el: "#app",
         data: {
            message: 'hello world'
         },
         beforeCreate: function() {
            showData('创建vue实例前', this);
         },
         created: function() {
            showData('创建vue实例后', this);
         },
         beforeMount: function() {
            showData('挂载到dom前', this);
         },
         mounted: function() {
            showData('挂载到dom后', this);
         },
         beforeUpdate: function() {
            showData('数据变化更新前', this);
         },
         updated: function() {
            showData('数据变化更新后', this);
         },
         beforeDestroy: function() {
            showData('vue实例销毁前', this);
         },
         destroyed: function() {
            showData('vue实例销毁后', this);
         }
      });

      function realDom() {
         console.log('真实dom结构:' + document.getElementById('app').innerHTML);
      }

      function showData(process, obj) {
         console.log(process);
         console.log('data 数据:' + obj.message)
         console.log('挂载的对象:')
         console.log(obj.$el)
         realDom();
         console.log('------------------')
         console.log('------------------')
      }
      vm.message = "good...";
      vm.$destroy();
   </script>

</html>

7.5.3 this

我们可以看下在vue内部的this变量是谁,我们在created的时候,打印this

var vm = new Vue({
    el:"#app",
    data:{
        hello: '' // hello初始化为空
    },
    created(){
        this.hello = "czdx,一统江湖,千秋万代";
        console.log(this);
    }
})

控制台的输出:

1540846042618

8. 指令

指令 (Directives): 是带有 v- 前缀的特殊特性。指令特性的预期值是:单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

例如我们在入门案例中的v-on,代表绑定事件。

8.1 插值表达式

8.1.1 大括号 u007B;u007B;

  1. 格式:

    u007B;u007B;表达式
    

    说明: