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. 自学自用 = B站(操作系统_清华大学(向勇、陈渝)) 未完待续。。

    视频地址 https://www.bilibili.com/video/av6538245 介绍 本篇博客,旨在记录视频学习的要点,所以格式随意, 方便本人日后自考和回忆,有兴趣的朋友可以评论讨论. ...

  2. SpringMVC 全局异常处理

    在 JavaEE 项目的开发中,不管是对底层的数据库操作过程,还是业务层的处理过程,还是控制层的处理过程,都不可避免会遇到各种可预知的.不可预知的异常需要处理.每个过程都单独处理异常,系统的代码耦合度 ...

  3. Javascript高级编程学习笔记(79)—— 表单(7)选择框脚本

    选择框脚本 选择框由<option>和<select>元素创建,为了方便选择框的交互,除了提供表单字段的公有方法之外 HTMLSelectElement 类型还提供下列特有的属 ...

  4. Javascript高级编程学习笔记(60)—— 事件(4)事件类型

    事件类型 Web浏览器中可能发生的事件有许多种类型 不同类型的事件都有着自己独特的信息 在“DOM3级事件”规范中,规定了以下几类事件: UI事件    当用户与页面元素交互时触发 焦点事件    当 ...

  5. 吴恩达机器学习笔记50-主成分分析算法(PCA Algorithm)

    PCA 减少

  6. 吴恩达机器学习笔记18-多类别分类:一对多(Multiclass Classification_ One-vs-all)

    对于之前的一个,二元分类问题,我们的数据看起来可能是像这样: 对于一个多类分类问题,我们的数据集或许看起来像这样: 我用3 种不同的符号来代表3 个类别,问题就是给出3 个类型的数据集,我们如何得到一 ...

  7. 迷宫-BFS

    迷宫问题 Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status Descript ...

  8. 向github提交代码不用输入帐号密码

    解决方案:方案一: 在你的用户目录下新建一个文本文件.git-credentials Windows:C:/Users/username Mac OS X: /Users/username Linux ...

  9. Tomcat添加HTTPS单向认证和双向认证

    前言 前一段时间有了解如何配置Tomcat服务为Https单向认证和双向认证,当时也做了一些记录,今天开始写博客,就把以前的记录拿出来整理下,分享给大家.本文没有介绍证书如何生成,会在下一篇博文里介绍 ...

  10. GODOT 3.0 开发进度汇报 #7

    由于原文采取了记流水账的方式,觉得没有必要照直翻译了,就只选取了其中的主要信息. GDNative C++ 语言绑定 进行了重写以便Godot更好的生成和处理脚本. D 语言绑定 也正在积极开发中. ...