Vue Document
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 runnpm installfor 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>
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的更多相关文章
- Vue(基础七）_webpack(webpack异步加载原理)
---恢复内容开始--- 一.前言 1.webpack异步加载原理’ 2.webpack.ensure原理 ...
- 基于Vue实现可以拖拽的树形表格（原创）
因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...
- Vue.js 起步
通过实例来看下 Vue 构造器中需要哪些内容 测试时这段代码我直接写在index.html中 <!DOCTYPE html> <html> <head> <m ...
- 个人Vue-1.0学习笔记
dVue.js是类似于angular.js的一套构建用户界面的渐进式框架,只关注视图层, 采用自底向上增量开发的设计. Vue.js的代码需要放置在指定的HTML元素后面. 关于Vue的数据绑定: 例 ...
- vue 修改单页标题 --- document.title
方法1. 在需要的组件或者页面内设置 document.title = response.data.res.title 方法2. <head> <meta http-equiv=&q ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- vue双向数据绑定原理探究(附demo)
昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...
- Vue.js——60分钟组件快速入门（下篇）
概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
随机推荐
- bash 管理小脚本
#!/bin/bash shell_user="root" shell_pass="1233" shell_port="22" shell_ ...
- 每天学点SpringCloud（八）：使用Apollo做配置中心
由于Apollo支持的图形化界面相对于我们更加的友好,所以此次我们使用Apollo来做配置中心 本篇文章实现了使用Apollo配置了dev和fat两个环境下的属性配置.Apollo官方文档https: ...
- Git使用详细教程(4)：git rm使用详解
我们使用git rm 文件名来进行删除文件的操作. git rm index.php这个命令把工作区的index.php删除并暂存了. 如何撤回已暂存的删除命令? 上图中已经给出了提示,使用git r ...
- outline和outline-offset属性实现简单的缝边效果
如果现在有个需求,让你实现下面的样式,你会怎么做呢? 我首先想到的是用 border + box-shadow 实现,代码如下 div { margin: 50px auto; width: 200p ...
- Scala - 快速学习07 - 模式匹配
Scala中的模式匹配的功能可以应用到switch语句.类型检查.“解构”等多种场合. 简单匹配 Scala的模式匹配最常用于match语句中.Scala的match语句类似Java里的switch. ...
- setInterval()与setTimeout()的区别
setInterval()-一旦被开启就会不断的执行,使用clearInterval()清除后将不再执行 setTimeout()-又称为一次定时器,定时器开启后只执行一次将不会接着执行,使用clea ...
- python 分享一个通过 (key1.key2.key3) 形式获取嵌套字典值的方法
最近在做接口自动化测试,响应的内容大多数是多层嵌套的json数据,如果一层层的去剥,效率不高,脚本繁重,所以写了一个可以通过(key1.key2.key3)形式获取嵌套字典值的方法,如有不对或者需要优 ...
- 全网最详细的最新稳定OSSEC搭建部署（ossec-server（CentOS7.X）和ossec-agent（CentOS7.X）)（图文详解）
不多说,直接上干货! 前言 写在前面的话,网上能够找到一些关于ossec方面的资料,虽然很少,但是总比没有强,不过在实际的使用过程中还是会碰到许多稀奇古怪的问题.整理整理我的使用过程,就当做一篇笔记吧 ...
- [NewLife.XCode]脏数据
NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netstandard,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示 ...
- MongoDB分片详解
分片是MongoDB的扩展方式,通过分片能够增加更多的机器来用对不断增加的负载和数据,还不影响应用. 1.分片简介 分片是指将数据拆分,将其分散存在不同机器上的过程.有时也叫分区.将数据分散在不 ...