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. 【高速接口-RapidIO】3、RapidIO串行物理层的包传输过程

    一.引言 前几篇文章已经谈到RapidIO的协议,串行物理层与控制符号. RapidIO协议包括读事务(NREAD),写事务(NWRITE),流写事务(SWRITE),有响应的写事务(NWRITE_R ...

  2. 程序员工作 996 生病 ICU ？

    阅读本文大概需要 2 分钟. 说实话,一般平时这个点我已经睡着了,今天准备好的文章也会准时在凌晨推送给大家.睡前看篇关于强制 996 加班的消息,里面有句口号还挺溜,上班996,下班ICU,为此还特意 ...

  3. 每天学点SpringCloud（十三）：SpringCloud-Stream整合RabbitMQ

    我们知道,当微服务越来越来多的时候,仅仅是feign的http调用方式已经满足不了我们的使用场景了.这个时候系统就需要接入消息中间件了.相比较于传统的Spring项目.SpringBoot项目使用消息 ...

  4. Redis学习笔记之Redis基本数据结构

    Redis基础数据结构 Redis有5种基本数据结构:String(字符串).list(列表).set(集合).hash(哈希).zset(有序集合) 字符串string 字符串类型是Redis的va ...

  5. Python的 is 和 == 弄懂了吗？

    在Python中一切都是对象. Python中对象包含的三个基本要素,分别是: id(身份标识) type(数据类型) value(值) 对象之间比较是否相等可以用 == ,也可以用 is . is ...

  6. 怎么让Word形状里的文字上下左右居中

    怎么让Word形状里的文字上下左右居中? 第一:左右居中,用段落居中方法: 第二:上下居中,选定图形,单击鼠标右键并选择“设置形状格式”,在选项卡的“文本框”中,选择中部对齐 效果图:

  7. rest-framework之APIView 序列化组件

    rest-framework之APIView 一 安装djangorestframework 方式一:pip3 install djangorestframework 方式二:pycharm图形化界面 ...

  8. sql server 高可用故障转移(5)

    测试故障转移群集报告 在SQL-CL01(hsr 50)进行故障转移群集的创建,如图下图所示,在SQL-CL01和SQL-CL02的“服务器管理”中右键点击“功能”,选择“添加功能 勾选故障转移群集  ...

  9. 三方面搞定http协议之“请求方法”

    我所熟知的请求方法一共有六种: GET 请求指定的页面信息,并返回实体主体. POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件) PUT 从客户端向服务器传送的数据取代指定的文档的内 ...

  10. nohup & expect & netstat学习

    1.nohup 用途:不挂断地运行命令,通常加上‘&’命令,& 放在命令后面表示设置此进程为后台进程.分为两种情况,如下: 在不使用密码的情况下使用nohup,只需按如下形式即可: n ...