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. 应用篇 = Docker下的Redis

    一.工具介绍 1.1 什么是Docker? Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目.使用 Google 公司推出的 Go 语言 ...

  2. BATJ等公司必问的8道Java经典面试题，你都会了吗？

    1.谈谈你对 Java 平台的理解?“Java 是解释执行”,这句话正确吗? 考点分析: 对于这类笼统的问题,你需要尽量表现出自己的思维深入并系统化,Java 知识理解得也比较全面,一定要避免让面试官 ...

  3. Android JNI 学习(十)：String Operations Api & Other Apis

    一.String Operations(字符串操作) 1. NewString jstring NewString(JNIEnv *env, const jchar *unicodeChars, js ...

  4. Javascript高级编程学习笔记（72）—— 模拟事件（2）IE事件模拟

    IE中的事件模拟 低版本的IE浏览器作为前端开发的一股清流,想避过都不行 虽然低版本IE正在逐步被市场淘汰,不得不承认IE8以下的浏览器依然占了不小的份额 所以这里大概介绍IE8以下的低版本IE中的事 ...

  5. 从 0 开始手写一个 Mybatis 框架，三步搞定！

    阅读本文大概需要 3 分钟. MyBatis框架的核心功能其实不难,无非就是动态代理和jdbc的操作,难的是写出来可扩展,高内聚,低耦合的规范的代码. 本文完成的Mybatis功能比较简单,代码还有许 ...

  6. js连等赋值的陷阱

    先来看一段代码: (function(){ var x = y = 1; })(); console.log(y); console.log(x); 最开始我觉得这道题简直是送分题啊,很明显结果为,y ...

  7. Spark基础-scala学习（二、面向对象）

    面向对象编程之类 //定义一个简单的类 scala> :paste // Entering paste mode (ctrl-D to finish) //类默认public的 class He ...

  8. springmvc的Controller里实现转发的同时弹出提示对话框

    以前写servlet时就用到这个,但是现在学了springMVC+hibernate后就不知道怎么实现了,后来在网上找了好多,看了好多,最后经过自己实践成功的如下: 1.首先是Controller控制 ...

  9. Python中变量的基本使用

    变量的基本使用 程序就是用来处理数据的,而变量就是用来存储数据的 目标 变量定义 变量的类型 变量的命名 01. 变量定义 在 Python 中,每个变量 在使用前都必须赋值,变量 赋值以后 该变量 ...

  10. Python中的注释和解注释

    注释 目标 注释的作用 单行注释(行注释) 多行注释(块注释) 01. 注释的作用 使用用自己熟悉的语言,在程序中对某些代码进行标注说明,增强程序的可读性 02. 单行注释(行注释) 以 # 开头,# ...