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. JVM指令集

    指令集,其实就是一系列指令的集合.例如我们需要给一个局部变量赋予1这个值,即这个动作:int a = 1; 在我们看来,这很简单,但对于机器来说需要很多个动作.所以Java虚拟机指令集就是将这些常用的 ...

  2. Java初学者容易犯的代码错误

    1. 不会判断空 空指针异常是所有Java初学者接触最多的异常,没有之一.原因是,你们拿到一个对象后容易不假思索的直接使用(直接给这个对象的属性赋值,直接调用这个对象的方法等),不报异常才怪呢!下面是 ...

  3. postgresql 日志配置

    Postgresql日志收集   PG安装完成后默认不会记录日志,必须修改对应的(${PGDATA}/postgresql.conf)配置才可以,这里只介绍常用的日志配置. 1.logging_col ...

  4. 【app】Appium日志文件分析

    Appium在和客户端及手机端进行通讯的时候会输出很多日志,可以通过点击主面板的Get Raw Logs得到其原始日志: 现在我们另存到其他路径,并且以notepad工具打开进行查看 Appium日志 ...

  5. 利用vi编辑器创建和编辑正文文件（二）

    末行模式下的命令 1.       w:写文件,将编辑的内容保存到文件系统. 2.       w!:如果只读文件,强制写入系统. 3.       q!:退出vi,但文件内容修改的话,系统要提示是否 ...

  6. Execution failed for task ':app:processDebugResources'

    经常会遇到突然AndroidStudio编译不了程序,报错误: Execution failed for task ':app:processDebugResources'. > Failed ...

  7. Cannot retrieve metalink for repository: epel/x86_64. Please verify its path and try again 解决方法

    vim /etc/yum.repos.d/epel.repo 1 [epel] 2 name=Extra Packages for Enterprise Linux 7 - $basearch 3 # ...

  8. jvm详情——5、选择合适的垃圾收集算法

    回收器选择JVM给了三种选择:串行收集器.并行收集器.并发收集器,但是串行收集器只适用于小数据量的情况,所以这里的选择主要针对并行收集器和并发收集器. 默认情况下,JDK5.0以前都是使用串行收集器, ...

  9. 【转载】红外遥控HS0038B接法

        4.7uF电容的作用:去耦和旁路   去耦电容的主要功能就是提供一个局部的直流电源给有源器件,以减少开关噪声在板上的传播和将噪声引导到地.通常也把输出信号的干扰作为滤除对象. 旁路电容:为高频 ...

  10. Python数据可视化的四种简易方法

    摘要: 本文讲述了热图.二维密度图.蜘蛛图.树形图这四种Python数据可视化方法. 数据可视化是任何数据科学或机器学习项目的一个重要组成部分.人们常常会从探索数据分析(EDA)开始,来深入了解数据, ...