1.Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。ViewModel是Vue.js的核心，它是一个Vue实例。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--这是我们的View-->

        <div id="app">

            {{ message }}

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script>

        // 这是我们的Model

        var exampleData = {

            message: 'Hello World!'

        }

        // 创建一个 Vue 实例或 "ViewModel"

        // 它连接 View 与 Model

        new Vue({

            el: '#app',

            data: exampleData

        })

    </script>

</html>

　　使用Vue的过程就是定义MVVM各个组成部分的过程的过程。定义View  > 定义Model  > 创建一个Vue实例或"ViewModel"，它用于连接View和Model

2.常用指令：

  • v-bind绑定值，缩写为冒号
  • v-html绑定标签
  • v-on:click点击事件，@为v-on缩写
  • v-on:dbclick双击事件
  • v-on:mousemove鼠标事件
  • v-on:keyup键盘事件
  • v-model双向绑定
  • v-if条件，不占位
  • v-show占位
  • v-else可以为v-if和v-show添加一个else块
  • v-for遍历元素
  • v-link应用的不同路径间跳转

3.组件：组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用。组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。组件的使用：

<!DOCTYPE html>

<html>

    <body>

        <div id="app">

            <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->

            <my-component></my-component>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script>

        // 1.创建一个组件构造器

        var myComponent = Vue.extend({

            template: '<div>This is my first component!</div>'

        })

        // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>

        Vue.component('my-component', myComponent)

        new Vue({

            el: '#app'

        });

    </script>

</html>

　　Vue.js 实现了一个内容分发 API，使用特殊的 <slot> 元素作为原始内容的插槽。如果需要多个内容插槽，则可以为slot元素指定name属性。

4.HTTP请求：跨域解决方法，可以使用JSONP或者是CORS（跨域资源共享）。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。

5.项目模板：Vue.js官方提供了两种类型的模板项目：

  • 基于vue cli和browserify的项目模板
  • 基于vue cli和webpack的项目模板

　　vue cli是Vue.js官方提供的命令行创建Vue.js项目脚手架的工具。这两种类型的项目模板分别提供了简单模式和完全模式，简单模式仅包含基于vue.js开发必要的一些资源和包，使用该模式可以快速地投入到开发。完全模式则还包括ESLink、单元测试等功能。webpack提供了和browserify类似的功能，在前端资源管理这方面，它提供了更加出色的功能。

vueify，就是使用.vue格式的文件定义组件，一个.vue文件就是一个组件。在.vue文件定义的组件内容包括3部分：

  • <style></style>标签：定义组件样式
  • <template></template>标签：定义组件模板
  • <script></script>标签：定义组件的各种选项，比如data, methods等。

以下app.vue文件定义了一个组件：

// app.vue

<style>

  .red {

    color: #f00;

  }

</style>

<template>

  <h1 class="red">{{msg}}</h1>

</template>

<script>

export default {

  data () {

    return {

      msg: 'Hello world!'

    }

  }

}

</script>

6.路由：vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
创建一个单页面应用的基本步骤：

1. 创建组件

首先引入vue.js和vue-router.js：

<script src="js/vue.js"></script>

<script src="js/vue-router.js"></script>

然后创建两个组件构造器Home和About：

var Home = Vue.extend({

    template: '<div><h1>Home</h1><p>{{msg}}</p></div>',

    data: function() {

        return {

            msg: 'Hello, vue router!'

        }

    }

})

var About = Vue.extend({

    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'

})

2. 创建Router

var router = new VueRouter()

调用构造器VueRouter，创建一个路由器实例router。

3. 映射路由

router.map({

    '/home': { component: Home },

    '/about': { component: About }

})

4. 使用v-link指令

<div class="list-group">

    <a class="list-group-item" v-link="{ path: '/home'}">Home</a>

    <a class="list-group-item" v-link="{ path: '/about'}">About</a>

</div>

5. 使用<router-view>标签

<router-view></router-view>

6. 启动路由

var App = Vue.extend({})

router.start(App, '#app')

JavaScript

  • 创建组件：创建单页面应用需要渲染的组件
  • 创建路由：创建VueRouter实例
  • 映射路由：调用VueRouter实例的map方法
  • 启动路由：调用VueRouter实例的start方法

HTML

  • 使用v-link指令
  • 使用<router-view>标签

摘抄自：https://www.cnblogs.com/keepfool/ 系列文章

vuejs知识总结的更多相关文章

  1. Weex 简介

    weex简介 Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能.可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 ...

  2. 一、VueJs 填坑日记之基础概念知识解释

    概述在最开始听说vuejs这个词是在2016年,当时天真的认为自己是个后端开发工程师不需要学习太多的前端知识,不过紧接着在2017年在公司就用到了vuejs.对于初学者(尤其是干后端的初学者)来说,刚 ...

  3. vue面试题整理vuejs基础知识整理

    初级参考 1.v-show 与 v-if 区别 v-show 是css隐藏,v-if是直接销毁和创建,所以频繁切换的适合用v-show 2.计算属性和 watch 的区别 计算属性是自动监听依赖值的变 ...

  4. 【Vuejs】350- 学习 Vue 源码的必要知识储备

    前言 我最近在写 Vue 进阶的内容.在这个过程中,有些人问我看 Vue 源码需要有哪些准备吗?所以也就有了这篇计划之外的文章. 当你想学习 Vue 源码的时候,需要有扎实的 JavaScript 基 ...

  5. 6、vueJs基础知识06

    vue动画 transition 之前1.0版本是以 属性的形式展示的 <p transition="fade"></p> .fade-transition ...

  6. 1、vueJs基础知识01

    vue是框架,vue.js是vue框架的核心js库 库:是一个封装好的特定的方法的集合,提供给开发者使用,库没有控制权,控制权在使用者手中.代表:jQuery.underscore.util 框架:框 ...

  7. 7、vueJs基础知识07

    UI组件库 element-ui和mint-ui 其实都是借鉴了bootstrap bootstrap: 由twitter 开源 简洁.大方 官网文档https://www.bootcss.com/ ...

  8. 5、vueJs基础知识05

    vue2.0相比于1.0的变化 1.在每个组件模板中,不再支持片段代码,需要一个根元素包裹 组件中模板: 之前: <template> <h3>我是组件</h3>& ...

  9. 4、vueJs基础知识04

    简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件(组件),官方推荐命名法(首字母大写) |-components      组件存放的文件夹 | ...

随机推荐

  1. Spring 版MediatR--中介者模式实现库

    背景 C# 版本库 MediatR 是一个中介者模式实现类库,其核心是一个中介 者模式的.NET实现,其目的是消息发送和消息处理的解耦.它支持单播和多播形式使用同步或异步的模式来发布消息,创建和帧听事 ...

  2. 在react中使用redux并实现计数器案例

    React + Redux 在recat中不使用redux 时遇到的问题 在react中组件通信的数据是单向的,顶层组件可以通过props属性向下层组件传递数据,而下层组件不能向上层组件传递数据,要实 ...

  3. pytest - 失败重运行机制：rerun

    失败重运行机制 用例失败的情况下,可以重新运行用例 一旦用例失败,马上重新运行 安装插件:pip install pytest-rerunfailures 使用命令:--reruns 重试次数 如 - ...

  4. Jmeter- 笔记5 - 从响应数据提取信息

    JSON提取器 提取 响应体(response body)里的信息 在需要提取数据的请求下添加 JSON提取器,一个JSON提取器可以写多个json提取器 路径:后置处理器 -> JSON提取器 ...

  5. 转载 | Scala 如何避免使用 Null

    在 Java 里,null 是一个关键字,不是一个对象,所以对它调用任何方法都是非法的. Scala 的 Option类型 Scala在变量和函数返回值可能不会引用任何值的时候使用 Option 类型 ...

  6. dataguard日志损坏处理

    ===== 问题 ===== 日志损坏无法应用日志(开启MRP应用系统会因无法应用日志而关闭) Completed: ALTER DATABASE RECOVER MANAGED STANDBY DA ...

  7. 三、使用sudo分配管理权限

    使用sudo分配管理权限 su命令 su -  [账户名称]     :切换到用户,不加用户名默认切换到root su -  [账户名称]  -c  '命令'   :以xx用户身份执行命令,注意命令需 ...

  8. 四、SSL虚拟证书

    沿用练习三,配置基于加密网站的虚拟主机,实现以下目标: 域名为www.c.com 该站点通过https访问 通过私钥.证书对该站点所有数据加密 4.2 方案 源码安装Nginx时必须使用--with- ...

  9. Ajax(内含json)认识

    Ajax 认识 一.概念 1.Ajax 即"Asynchronous Javascript And XML"(英[eɪˈsɪŋkrənəs]异步 JavaScript 和 XML) ...

  10. sleep、wait方法之间区别

    sleep.wait方法之间区别 1.所属的类不同 sleep是Thread类的静态方法,而wait是Object类的成员方法 2.锁机制不一样 sleep方法:会让出资源调度器为当前线程分配的时间片 ...