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. python jieba库的基本使用

    第一步:先安装jieba库 输入命令:pip install jieba jieba库常用函数: jieba库分词的三种模式: 1.精准模式:把文本精准地分开,不存在冗余 2.全模式:把文中所有可能的 ...

  2. 迈向高阶：优秀Android程序员必知必会的网络基础

    1.前言 网络通信一直是Android项目里比较重要的一个模块,Android开源项目上出现过很多优秀的网络框架,从一开始只是一些对HttpClient和HttpUrlConnection简易封装使用 ...

  3. Vue过渡mode属性踩坑

    近期学习Vue的过渡效果的时候,mode属性的"in-out"."out-in"设置了不起作用,官网上的例子让我看了有点迷,问题解决后以此文记录之. 首先我们看 ...

  4. Core 接口发布报错

    An error occurred while starting the application 提示:启动应用程序时发生错误 这个错误在Startup启动项里面 要找具体的报错位置 如下 这样就可以 ...

  5. HashMap 和 Hashtable 的 6 个区别，最后一个没几个人知道！

    HashMap 和 Hashtable 是 Java 开发程序员必须要掌握的,也是在各种 Java 面试场合中必须会问到的. 但你对这两者的区别了解有多少呢? 现在,栈长我给大家总结一下,或许有你不明 ...

  6. Android Studio 更新同步Gradle错误解决方法

    1.在https://services.gradle.org/distributions/下载对应的gradle的zip包,对应方法见gradle-wrapper.properties文件中的: di ...

  7. 【翻译】浏览器渲染Rendering那些事：repaint、reflow/relayout、restyle

    原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“R”吓到?今天,我们来讨论一下浏览器的渲 ...

  8. linux取IP的几个方法

    ifconfig eth0|grep " inet add"|cut -d":" -f2|cut -d " " -f1 ifconfig e ...

  9. 转：centos7搭建jenkins小记

    转自:https://segmentfault.com/a/1190000007086764 安装java环境 1.查看服务器版本 centos7,继续. cat /etc/redhat-releas ...

  10. mysql 开发进阶篇系列 47 物理备份与恢复(xtrabackup 的完全备份恢复，恢复后重启失败总结)

    一. 完全备份恢复说明 xtrabackup二进制文件有一个xtrabackup --copy-back选项,它将备份复制到服务器的datadir目录下.下面是通过 --target-dir 指定完全 ...