VUE笔记

环境搭建

  • node -v
  • npm -v
  • npm i -g cnpm --registry=https://registry.npm.taobao.org ->npm镜像
  • cnpm i -g vue-cli
  • vue -V

安装项目

  • vue init webpack vue_project_name

    提示目录已存在，是否继续：Y

    Project name（工程名）:回车

    Project description（工程介绍）：回车

    Author：作者名

    Vue build（是否安装编译器）:回车

    Install vue-router（是否安装Vue路由）：回车

    Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n

    Set up unit tests（安装测试工具）：n

    Setup e2e tests with Nightwatch（测试相关）：n

    Should we run npm install for you after the project has been created? (recommended)：选择：No, I will handle that myself

初始化

  • cd vue_project_name
  • cnpm i
  • cnpm run dev
  • Ctrl+C退出运行

    cnpm install -g live-server

配置idea

File-Settings-Languages&Frameworks-JavaScript：修改JavaScript language version为ECMAScript 6，确认。

File-Settings-Plugins：搜索vue，安装Vue.js。

Run-Edit Configurations...：点击加号，选择npm，Name为Run，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了。

npm 是 nodejs 的包管理和分发工具。

<div id="vue_det">

    <h1>site : {{site}}</h1>

    <h1>url : {{url}}</h1>

    <h1>{{details()}}</h1>

</div>

Vue从入门到精通视频教程

v-fot，v-text，v-html，v-on

v-model，v-bind，v-pre，v-cloak，v-once

v-directive，

<div v-if="flag">content</div>

<div v-show="flag">content</div>

<li v-for="item in items">{{ item }}</li>

<button v-on:click="event">content</button>

<button @click="event">content</button>

Axios

Vue学习笔记

1.Vue指令

1.1. Hello World

1.下载vue开发版本

Vue开发版本包含警告和调试，压缩后的为生产版本。Vue.js教程

2.项目结构

vue-test

　assets(js/css)

　example

　index.html

3.初始化项目

npm init

4.搭建服务

cnpm install -g live-server 安装

live-server 运行

5.helloworld.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="../assets/js/vue.js"></script>

    <title>helloworld</title>

</head>

<body>

<h1>Hello World</h1>

<hr>

<div id="app">

    {{ message }}

</div>

<script type="text/javascript">

    var app = new Vue({

        el: '#app',

        data: {message: 'Hello Vue!'}

    })

</script>

</body>

</html>

1.2.v-if，v-else，v-show

<body>

<h1>v-if</h1>

<hr>

<div id="app">

    <div v-if="flag">v-if判断是否加载</div>

</div>

<script type="text/javascript">

    var app = new Vue({

        el: '#app',

        data: {

            flag: true

        }

    })

</script>

</body>


<body>

<h1>v-show</h1>

<hr>

<div id="app">

    <div v-show="flag">v-show判断是否显示</div>

</div>

<script type="text/javascript">

    var app = new Vue({

        el: '#app',

        data: {

            flag: true

        }

    })

</script>

</body>
  • v-if:判断是否加载，可以减轻服务器的压力，在需要时加载。
  • v-show:调整css dispaly属性，可以使客户端操作更加流畅。

1.3.v-for

1.基本用法
<div id="app">

    <ul>

        <li v-for="array in arrays">{{ array }}</li>

    </ul>

</div>

<script type="text/javascript">

    var app = new Vue({

        el: '#app',

        data: {

            arrays: [1, 12, 23, 35, 42, 50, 66, 73, 84, 99, 100]

        }

    })

</script>
2.排序

vue不允许修改定义好的数据源，因此要定义一个新的对象接收排完序的数据，并使用此对象进行v-for循环显示

<div id="app">

    <ul>

        <li v-for="array in sortArrays">{{ array }}</li>

    </ul>

</div>

<script type="text/javascript">

    var app = new Vue({

        el: '#app',

        data: {

            arrays: [1, 12, 23, 35, 42, 50, 66, 73, 84, 99, 100]

        },

        computed: {

            sortArrays: function () {

                return this.arrays.sort(sortNum);

            }

        }

    })

    function sortNum(a, b) {

        return a - b;

    }

</script>
3.对象循环输出
<div id="app">

    <ul>

        <li v-for="array in sortStudents">{{ array.name }} + {{ array.age }}</li>

    </ul>

</div>

<script type="text/javascript">

    var app = new Vue({

        el: '#app',

        data: {

            students: [

                {name: 'jspang', age: 32},

                {name: 'Panda', age: 30},

                {name: 'PanPaN', age: 21},

                {name: 'King', age: 45}

            ]

        },

        computed: {

            sortStudents: function () {

                return sortObj(this.students, 'age');

            }

        }

    })

    function sortObj(obj, key) {

        return obj.sort(function (a, b) {

            var x = a[key];

            var y = a[key];

            return (x < y ? -1 : (x > y ? 1 : 0));

        })

    }

</script>

1.4.v-text，v-html

1.5.v-on

<div id="app">

    {{ score }}<br>

    <button v-on:click="add">加分</button>

    <button @click="sub">减分</button>

    <input type="text" v-on:keyup.enter="onEnter" v-model="addscore">

    <input type="text" @keyup.13="onEnter" v-model="addscore">

</div>

<script type="text/javascript">

    var app = new Vue({

        el: '#app',

        data: {

            score: 0,

            addscore: ''

        },

        methods: {

            add: function () {

                this.score++;

            },

            sub: function () {

                this.score--;

            },

            onEnter: function () {

                this.score = this.score + parseInt(this.addscore);

            }

        }

    })

</script>

1.6.v-model指令

1.7.v-bind指令

Vue Document的更多相关文章

  1. Vue(基础七）_webpack(webpack异步加载原理)

    ---恢复内容开始--- 一.前言 1.webpack异步加载原理’                                           2.webpack.ensure原理     ...

  2. 基于Vue实现可以拖拽的树形表格（原创）

    因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...

  3. Vue.js 起步

    通过实例来看下 Vue 构造器中需要哪些内容 测试时这段代码我直接写在index.html中 <!DOCTYPE html> <html> <head> <m ...

  4. 个人Vue-1.0学习笔记

    dVue.js是类似于angular.js的一套构建用户界面的渐进式框架,只关注视图层, 采用自底向上增量开发的设计. Vue.js的代码需要放置在指定的HTML元素后面. 关于Vue的数据绑定: 例 ...

  5. vue 修改单页标题 --- document.title

    方法1. 在需要的组件或者页面内设置 document.title = response.data.res.title 方法2. <head> <meta http-equiv=&q ...

  6. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  7. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  8. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  9. Vue.js——60分钟组件快速入门（下篇）

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

随机推荐

  1. [转] KVM scalability and consolidation ratio: cache none vs cache writeback

    http://www.ilsistemista.net/index.php/virtualization/43-kvm-scalability-and-consolidation-ratio-cach ...

  2. 背水一战 Windows 10 (104) - 通知（Toast）: 纯文本 toast, 短时 toast, 长时 toast, 图文 toast

    [源码下载] 背水一战 Windows 10 (104) - 通知(Toast): 纯文本 toast, 短时 toast, 长时 toast, 图文 toast 作者:webabcd 介绍背水一战 ...

  3. Xftp5软件使用详解

    一.首先运行Xftp5,然后导航栏上面有个小加号,点击进去. 二.接着出现如下界面,在这里填写名称(这个随意填写),主机填写要连接的主机的IP地址,然后协议的话,Linux系统一般选择SFTP协议,端 ...

  4. JavaScript之DOM对象获取（1）

    我们在操作html中的节点的时候,第一步就需要获取到对应节点(元素),才能有后续的操作.获取节点的方式有很多 1.document.getElementById(‘id值’) 通过id精确的选中某一个 ...

  5. JavaScript中常见的10个BUG及其修复方法

    如今网站几乎100%使用JavaScript.JavaScript看上去是一门十分简单的语言,然而事实并不如此.它有很多容易被弄错的细节,一不注意就导致BUG. 1. 错误的对this进行引用 在闭包 ...

  6. Java 利用 UUID 生成唯一性 ID 示例代码

    用户ID首先生成,订单ID的生成可依赖用户ID. 下面代码前六位是日期,后八位是随机数,用于生成用户ID. public String getNewUserId() { String ipAddres ...

  7. Git的初步学习

    前言 感谢! 承蒙关照~ Git的初步学习 为什么要用Git和Github呢?它们的出现是为了用于提交项目和存储项目的,是一种很方便的项目管理软件和网址地址. 接下来看看,一家公司的基本流程图: 集中 ...

  8. canvas转图片中的文字自动换行

    概述 最近项目用到了canvas转图片,但是由于canvas对文字排版的支持非常弱,一般我们在canvas上画不同排版的文字(比如竖排文字)都是利用js计算横纵坐标,然后一个字一个字地画出来,今天无意 ...

  9. Rpc框架dubbo-server（v2.6.3） 源码阅读（一）

    额,dubbo的前世今生咱就不说了,有用的人都知道.(最新版本已更名 incubator-dubbo,预计版本3.0,不过咱们就先不掺和别人的开发过程了,以v2.6.3为蓝本) 首先,是工作需要,用到 ...

  10. hbase之createTable完整的netty实现执行流程

    hbase的客户端代码并不想hive一样用java编写,shell调用,而是使用ruby编写. 在admin.rb文件中方法create,其中接受两个参数,其中第二个参数类型为变长参数. 而在crea ...