Vue 初学指南

时间 2019-11-17

标签 vue 初学指南繁體版

原文原文链接

前言

一直作java开发,新公司,分配了前端的工做,一脸懵逼,有朋友说:你能够跑路了,确定很坑html

更多时候遇到这样的状况惧怕的不是本身不会等问题,而是更怕被技术甩掉一个世纪线------好好学习,每天向上前端

就把项目最接近的vue开始入手,官方不推荐使用脚手架cli的,那就不用呗,先一步一步来,以往一直听着前端的大神说什么vue+webpack+npm的开发,很流利,也不知道是什么vue

在Vue构建大型应用获得时候官方推荐使用NPM来安装,NPM很好的和webpack 或者 Browserify 模块打包工具配合使用java

下面开始学习Vue基础指南,node事先都安装好了,若是npm的速度慢,能够换成cnpm(淘宝镜像会快一些),编辑器用vscode,很好使,并且Vue对中文支持很不错,会很舒坦,说白了对本身英语能力,内心仍是有点逼数的node

了解Vue

Vue是渐进式框架, 设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合依赖jquery

渐进式框架!? 自底向上逐层应用!? 这两个是什么意思? Vue 1.0 的官方定位是视图管理，Vue 2.0 的官方定位是渐进式框架webpack

渐进式框架 : 我的理解面对新业务或者成型项目使用vue,能够针对功能的需求,使用vue的特定功能,不须要像Angular,React,须要理解其全套规则,意味着以最少,即实现web

好比处理form表单提交或者jquery的ajax提交,能够把vue当成一个js库来使用ajax

好比使用jquery生成DOM,换成让vue来管理DOM,从关注操做DOM节点到关注数据变化算法

好比:再现有web项目,再加一个webapp项目,可使用vue路由器,webpack能够做为前端的构建器

好比和后端的接口访问愈来愈频繁,须要大量数据在组件中共享数据,可使用vuex处理数据在组件之间的流动

再好比一步一步发现项目中使用了不少vue组件,最后发现项目的seo项目不是很好,又可使用vue的SSR作seo优化

.......发现已是一个Vue全家桶了,在各步依然不影响其余已有组件效果

自底向上逐层: 原来英文是 from ground up ,这个比较好理解,从上面的分析也能看出问题,也有一个自底向上的设计/算法,就是先编写出基础程序段,而后再逐步扩大规模、补充和升级某些功能,是一种自底向上构造完整应用的过程

Hello Vue

全部的语言都是那么有情怀,从Hello开始,建立一个Html,名字随意取,而后基础操做步骤

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 第一步 引入环境 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 第二步 建立一个div -->
    <div id="app">
        <p>{{ message }}</p>
    </div>
</body>
<!-- 第三步 Dom数据渲染 -->
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    })
</script>
</html>

成功的写好了一个Vue 文本插值应用,message数据和Dom创建了关联,且都是响应式的,打开浏览器的控制台，并修改的值，看到相应地更新

结合上面的文件插值,来绑定元素操做

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 第一步 引入环境 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 第二步 建立一个div -->
    <div id="app">
        <span v-bind:title="msg">
            {{ message }}
        </span>
    </div>
</body>
<!-- 第三步 Dom数据渲染 -->
<script>
    var app=new Vue({
        el: '#app',
        data: {
            message: '悬停查看信息',
            msg: "悬停-信息"
        }
    })
</script>
</html>

------效果

其中有一个属性v-bind成为指令,指令带有前缀v-,是vue提供的,能够猜测,其余的指令也都是v-xxxx的形式,会在渲染的DOM上应用特殊的响应式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 第一步 引入环境 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 第二步 建立一个div -->
    <div id="app">
        <span v-bind:title="msg">
            {{ message }}
        </span>
        <p v-if="flag">this is Tag-P</p>

        <ol>
            <li v-for="item in items">{{item.id}}</li>
        </ol>
        <button v-on:click="fun">拼接</button>
        <input v-model="message">
    </div>
</body>
<!-- 第三步 Dom数据渲染 -->
<script>
    var app=new Vue({
        el: '#app',
        data: {
            message: '悬停查看信息',
            msg: "悬停-信息",
            flag: true,
            items: [
                {id: "a"},
                {id: "b"},
                {id: "c"}
            ]
        },
        methods:{
            fun:function(){
                this.message = this.message + "拼接字符串";
            }
        }
    })
</script>
</html>

v-for指令能够绑定数组的数据来渲染一个列表,可使用app.items.push来添加元素

v-on指令添加一个事件监听器,出发事件函数

v-model指令输入和应用状态之间的双向绑定,input和message的值一致变化

学到这里,会发现,一旦DOM写好了,就不须要去关心操做DOM的事情,都由vue来处理,更多的是关注逻辑或者数据

--------------------------------------------------------------------------------------------