Vue Document
目录
- VUE笔记
- 环境搭建
- Vue学习笔记
- 1.Vue指令
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 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指令
转载于:https://www.cnblogs.com/jie123-3733/p/10024761.html
Vue Document相关推荐
- 设计模式在vue中的应用(五)
前言 目录整理: 设计模式在vue中的应用(一) 设计模式在vue中的应用(二) 设计模式在vue中的应用(三) 设计模式在vue中的应用(四) 设计模式在vue中的应用(五) 设计模式在vue中的应 ...
- 使用ASP.NET Core MVC的Vue.Js
目录 内容主题 VUE.JS简介 DOT NET Core 下载和安装Visual Studio 2017 ASP.NET Core Spa模板 基础知识和设置 Node.js 节点包管理(NPM) ...
- 前端 cdn 方式使用 Vue + element-ui
一.引入资源 <script src="https://unpkg.com/vue@2.7.10/dist/vue.min.js"></script> &l ...
- Vue 3 迁移策略笔记—— 第30节:新增功能——Teleport
前言 本笔记主要基于官方文档<Vue 3 教程-Teleort>汇总而来.如有理解出入,请以官方文档为主.建议您以官方文档为主,本文为辅.这样您可以"以自己为主"审视的 ...
- m3u8下载时出现跨域的解决方法
m3u8下载时出现跨域复制下面的代码 当无法下载,资源发生跨域限制时,在视频源页面打开控制台,注入代码解决,点击复制下面代码 // 注入htmllet $section = document.crea ...
- m3u8文件转换mp4
起因 今天在做项目的时候遇到下载的视频文件格式是m3u8,且播放器不能播放.产品经理提出需要下载可播放的视频格式.便研究起来如何m3u8转mp4并下载. 旧版本 后端所给的是一个对应的加密链接,将加密 ...
- DIV Vue-cil脚手架
webpack webpack是一个现代JavaScript应用程序的静态模块打包器.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用 ...
- hexo博客matery主题的个性化配置
文章目录 一.matery主题的下载与安装 二.基本配置 1.根目录下的 `_config.yml` 1.1. title 1.2. deploy与theme 2.themes目录下的`_config ...
- JeeSite 框架学习笔记
JeeSite 框架学习笔记 目录 JeeSite 框架学习笔记 一.全局配置 1. 获取 Resource资源实际路径 DefaultResourceLoader 2. 配置前端 js css 二. ...
- PixiJS案例——遮罩涂鸦
简介: 用不同色彩在固定区域进行涂鸦. 思路: 1. 使用 pixi.js 构建 canvas: 2. 添加需要涂鸦的 png 图片到整个场景: 3. 在需要涂鸦的图片上层添加一个可以绘制颜色的几何类 ...
最新文章
- python selenium框架_基于python+selenium的框架思路
- 39_上下采样、MaxPool2d、AvgPool2d、ReLU案例、二维最大池化层和平均池化层、填充和步幅、多通道
- 如何在手游中运用高逼格光影效果?
- CSS基础(part3)--伪类及伪元素
- 自行实现高性能MVC
- perl学习之:编译、执行与内存关系(转)
- python编写函数_如何用Python编写自己喜欢的R函数
- NumPy Cookbook 带注释源码 十一、NumPy 的底牌
- [PyTorch] jit.script 与 jit.trace
- 如何在Mac上使用触控栏?
- 最新消息,网易公司内部开始使用昵称!学阿里?
- 随机森林原始论文_推荐一个神器画出论文中酷炫的机器学习图
- Python新手需要掌握的知识点
- 嵌入式算法8---空间向量夹角公式及其应用
- 【Tools系列】OneNote 2016 中同步笔记时出现0xE4010640错误
- 汇编语言中xor指令_这个汇编代码有什么作用? (TEST,XOR,JNZ)
- python小组项目总结报告_给大家汇报一下我们学习小组的进展情况
- 2.CUDA 编程手册中文版---编程模型
- 百度定位实时获取位置android,通过百度定位sdk获取实时位置
- ip被流量攻击怎么办
热门文章
- STM32-串行SPI nor
- (转)正则表达之零宽断言(零宽度正预测先行断言)
- Spring3.0_调试错误集
- 用Visual Studio写PHP代码
- 如何将 MacBook 的外置屏幕设置为主屏幕
- Silicio for Mac(迷你播放器)免费版
- 如何使用Camtasia给视频打码
- 如何用iMazing备份和恢复辐射避难所(附工具下载)
- 企业分布式微服务云SpringCloud SpringBoot mybatis (八)消息总线(Spring Cloud Bus)
- StringBuilder 详解 (String系列之2)