前端知识-Vue.js入门

一、介绍

1、Vue.js 是什么

在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。

Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。

官方网站：https://cn.vuejs.org

2、初识Vue.js

创建文件夹vuejs，将vue.min.js引入文件夹

CDN引入方式：

    
    

        
        {{ message }}
    

    
    

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作

data: {
    message: 'Hello Vue!'
}

也可以写成

data() {
    return {
        message: 'Hello Vue!'
    }
}

二、基本语法

1、基本数据渲染和指令 v-on (:)

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

    
    
{{name}}

    
    
{{name}}

2、双向数据绑定 v-model

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

    
    
    
    

    
您要查询的是：{{keyword}}

什么是双向数据绑定？

• 当数据发生变化的时候，视图也会跟着发生变化

• • 数据模型发生了改变，会直接显示在页面上

• 当视图发生变化的时候，数据也会跟着同步变化

• • 用户在页面上的修改，会自动同步到数据模型中去

3、事件 v-on (@)

创建 03-事件.html

使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

    查询

v-on 指令的简写形式

查询

4、修饰符 (.)

修饰符是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，这里的 .prevent 修饰符告诉 v-on 指令：阻止表单默认的提交行为

    
    

        姓名：
        保存
    

5、条件渲染 v-if v-show

点击复选框，显示或隐藏协议内容。分别使用 v-if 和 v-show 实现

v-if直接删除DOM

v-show是添加一个css属性 display:none

    同意许可协议
    
    
if：协议内容.
    
no

    
    
show：协议内容.
    
no

经常发生改变的DOM最好使用v-show！！！

6、列表渲染 v-for="(item,index) in list"

v-for：列表循环指令

    

        
        

            
{{index}}
            
{{item.username}}
            
{{item.age}}
        
    

7、实例生命周期 created=>mounted

    
{{ message }}

分析生命周期相关方法的执行时机