vue.js

时间 2019-11-09

原文原文链接

双向数据绑定/组件/表单||类型排序/过滤||路由||判断/循环迭代||计算机||CSS3样式绑定/时间处理

Vue.js（读音 /vjuː/, 相似于 view）是一个构建数据驱动的 web 界面的库。html

Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。
说到组件，咱们要先了解MVVM框架。vue

M指的是model：数据访问层；node
V指的是View：UI界面；webpack
VM指的是ViewModel：他是view的抽象，负责view和model之间的信息转换，将view的command传送到model。git

优势：

*简单：官方文档很清晰，比 Angular 简单易学；

*快速：异步批处理方式更新 DOM；

*组合：用解耦的、可复用的组件组合你的应用程序；

*紧凑：~23kb min+gzip，且无依赖；

*强大：表达式 & 无需声明依赖的可推导属性 (computed properties)；

*对模块友好：能够经过 NPM、Bower 或 Duo 安装，不强迫你全部的代码都遵循 Angular 的各类规定，使用场景更加灵活。

缺点：

*新生儿：新的项目，2014年3月20日发布的0.10.0 Release Candidate版本，目前github上面最新的是2.2.4版本，没有angular那么成熟；

*影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其余一些有名的库。

*不支持IE8

1、使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

1.定义View；

2.定义Model；

3.建立一个Vue实例或"ViewModel"，它用于链接View和Model；

<!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>

2、MVVM 双向数据绑定:

<div id="app"> 
  <p>{{ message }}</p>
  <input v-model="message">
</div>

3、vue路由

原理一：History API (..?x=6);

原理二：hash (..#/home ;

相似：轮播插件（Swiper）；
通常用于移动app页面跳转；github

<template>
        <div id="app">
            <h1>Hello App!</h1>
            <ul>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 经过传入 `to` 属性指定连接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->           
                <li><router-link to="/foo">Go to Foo</router-link></li>
                <li><router-link to="/bar">Go to Bar</router-link></li>         
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            </ul>       
            <router-view   ></router-view>
        </div>
    <template>
    <script>
          // 0. 若是使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
          // 1. 定义（路由）组件。
          // 能够从其余文件 import 进来
       const Foo = {
            template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
            data: function() {
                return {
                    msg: 'Hello, vue router!'
                    }
                }
            };
        const Bar = {
                template: '<div><h1>About</h1><p></div>'
         }
            // 2. 定义路由
            // 每一个路由应该映射一个组件。 其中"component" 能够是
            // 经过 Vue.extend() 建立的组件构造器，
            // 或者，只是一个组件配置对象。
            // 咱们晚点再讨论嵌套路由。
        const routes = [{
                path: '/foo',
                component: Foo
            }, {
                path: '/bar',
                component: Bar
        }]
            // 3. 建立 router 实例，而后传 `routes` 配置
            // 你还能够传别的配置参数, 不过先这么简单着吧。
        const router = new VueRouter({
                routes // （缩写）至关于 routes: routes
        })
            // 4. 建立和挂载根实例。
            // 记得要经过 router 配置参数注入路由，
            // 从而让整个应用都有路由功能
        const app = new Vue({
                router
        }).$mount('#app')
            // 如今，应用已经启动了！
    </script>

<style scoped>

<style>

4、filters methods:

5、配置环境:

1.安装node.js;
2.经过npm命令安装vuejs:[Windows PowerShell]替代[node.js];
全局安装 vue-cli;
npm install -g vue-cli;
建立一个基于 "webpack" 模板的新项目;
vue init webpack project-name;
npm install;
npm run dev 启动项目;

npm经常使用指令：d:||ls||cd rui+tab||cd ruilai||cd ./||cd../||cls

*Vue 项目web

*Vue 组件项目集合vue-cli

*Vue 指令总结
---npm

纯属我的观点,仅供参考！编程