vue-02-安装-指令
1, vue安装
1), 安装vue-cli
npm install -g cnpm --registry=https://registry.npm.taobao.org 之后可以用 淘宝的npm镜像安装
cnpm install vue-cli -g
# -g 等价于 --global
2), 初始化项目, 创建基于webpack的模版
vue init webpack lisa-yoga-baby
路由: n, Eslink(代码检查): n, test: n, Nighwatch: n
3), 进入项目
cd lisa-yoga-baby
4), 安装依赖, 根据package.json安装
npm install
5), 启动项目
npm run dev
6), 打包
npm run build
2, 项目目录结构
index.html: 项目根目录视图
.postcssrc.js postcss 配置文件
static: 静态文件目录, 服务器启动后可以直接访问到
src: 源码文件
config: 配置文件
build: 服务器到配置文件
3, 模板语法:
Mustache: 模板
表现形式: {{ 语法 }}
{{ hello }}
通过下面的 script进行返回
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Hello Vue'
}
}
}
</script>
2), 可以做运行
{{ + }}
{{ < ? "true" : "false" }}
3), 只能存在单行语句
4, vue组件, 包含3个内容
1), 视图部分
<template>
<div class="hello">
{{ msg }}
</div>
</template>
2), 逻辑部分
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Hello Vue'
}
}
}
</script>
3), 样式部分
<style scoped>
h1, h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: ;
} li {
display: inline-block;
margin: 10px;
} a {
color: #42b983;
}
</style>
5, 基本命令
指令的简写形式 v-bind:key=‘’ 简写为 :key=‘’
1), v-text
<p v-text="msg">text</p> <script>
export default {
name: 'HelloWorld',
data() {
return {
msg: '<p>Hello Vue</p>',
flag: ' i am flag'
}
}
}
</script>
不能解析html标签, 原样输出
2), v-html
<div v-html="msg"></div>
解析标签为 html的元素
3), v-bind 绑定
<span v-bind:class="bind_ha">hahaha a</span>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: '<p>Hello Vue</p>',
flag: ' i am flag',
bind_ha: "ha111"
}
}
}
</script>
可通过 v-bind, 更改 html标签的 内置属性
双花括号 {{ }} 不可以用来更改html的内敛标签
4), v-if 条件渲染
<!--v-if 属性-->
<div>
<p v-if="show">if can see</p>
<p v-else-if="show"> else if can see </p>
<p v-else="!show">else can see </p>
</div>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: '<p>Hello Vue</p>',
flag: ' i am flag',
bind_ha: "ha111",
show: false
}
}
}
</script>
5), v-show 和v-if 类似, 但没有else
<div>
<p v-show="show"> show can see </p>
</div>
v-if 是惰性的, v-show总是被渲染, 且基于css 进行切换
频繁切换使用 v-show
6), v-for 循环渲染, 针对数组进行渲染
<!--v-for-->
<div>
<ul>
<li v-for="(name, index) in names" v-bind:index="index">{{ name.name }} : {{ name.age }}</li>
</ul>
</div>
使用 v-for进行遍历, 使用 v-bind 进行name, id之类的绑定
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: '<p>Hello Vue</p>',
flag: ' i am flag',
bind_ha: "ha111",
show: false,
names: [{name: 'vini', age: }, {name: 'wenbronk', age: ''}, {name: 'lisa', age: ''}]
}
}
}
</script>
7), v-on: 事件监听
简单事件
<div>
<button v-on:click="num += 1"> 按钮</button>
<p> {{ num }}</p>
</div>
<script>
num: 1, </>
事件参数: methods:
<!--methods -->
<div>
<button v-on:click="handlerClick"> methods 按钮 </button>
</div>
放在data的同级下
<script>
export default {
name: 'hello',
data() {
return {
names: [{name: 'vini', age: }, {name: 'wenbronk', age: ''}, {name: 'lisa', age: ''}],
num: ,
}
},
handlerClick() {
alert("事件1 ")
// 去上面data的值, this索引当前data中的数据
this.show = !this.show
}
} </script>
事件修饰符:
.stop 阻止时间冒泡
.prevent 阻止事件
.capture
.self
.once 只生效一次
只需要在 on.click后添加, 即可
<li v-on:click.once="getItemInfo(index, $event)" v-for="(name, index) in names">{{ name }}</li>
键盘监听:
<div>
<input type="text" v-on:keyup="getKeyInfo"/>
<!--只有enter才会监听-->
<input type="text" v-on:keyup.enter="getKeyInfo"/>
</div>
methods: {
getItemInfo(index, event) {
console.log(this.names[index]);
console.log(event);
},
getKeyInfo(event) {
console.log(event.keyCode)
console.log(event.key)
}
}
此外还提供了例如
.enter, .tab .delete .esc .space .up .down .left .right 等多个快捷监听,
只有相应的按键才会被触发
<input type="text" v-on:keyup.enter="getKeyInfo"/>
8), 数组动态更新
数据变化可以引起视图的变化
<div>
<button v-on:click="pushArr">pushArr</button>
</div>
pushArr() {
this.names.push("wenbronk")
}
但有些方法无法引起视图的变化
filter, concat, split等
不会修改原数组变化
方法的简写
@ 代替 v-on:
6, 计算属性
1), 如果一个methods在多个地方需要调用, 可以使用计算属性
但计算属性相对于methods, 可以进行缓存结果, 多次访问 methods可以立刻返回缓存结果
computed: {
msgRe() {
return this.message.split('').reverse().join('');
}
}
<!--观察这-->
<div>
<p> {{ msgRe}}</p>
</div>
2), 表单计算绑定 v-model
双向数据绑定
使输入的内容可以立刻获取
<!--表单数据绑定, 数据立马显示在下面-->
<div>
<input type="text" v-model="msg"/>
<p> {{ msg }}</p>
</div>
script
export default {
name: "a03_computed",
data() {
return {
message: "hello every body",
msg: ""
}
},
如果要实时监听数据
data() {
return {
message: "hello every body",
msg: ""
}
}, methods: {}, computed: {
msgRe() {
return this.message.split('').reverse().join('');
// return this.message.split('').reverse().concat('');
}
},
watch: {
msg: function (data) {
console.log(data + " data 就是你输入的额信息")
}
}
在data同级 加 watch
3), 修饰符
lazy, 失去焦点了在使用, v-model.lazy='msg'
number, 转换为number类型的时候, 才处理
.trim,
vue-02-安装-指令的更多相关文章
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- Vue指令02——v-on指令和v-show的使用
Vue指令02--v-on指令和v-show的使用 v-on指令 格式1:v-on:事件="方法" 格式2:@事件="方法" 格式3:@事件="方法( ...
- vue+webpack 安装常见插件
html-webpack-plugin 插件地址:https://www.npmjs.com/package...安装指令: npm install html-webpack-plugin --sav ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- 新人成长之入门Vue.js常用指令介绍(一)
写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...
- Vue.js 安装及其环境搭建
For me or other first studying vue.js. For Windows PC: 1.先安装node.js 安装官网最新的即可 版本应该要大于6.0版本 nodejs的官网 ...
- 【转载】Vue.js 安装及其环境搭建
注:最近在学习Vue,以下是环境搭配方法: ****************************************************************************** ...
- v-debounce-throttle是一个vue防抖节流指令
v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ...
- star ccm+ 11.02安装
STAR CCM+是CD-Adapco公司的主打软件,其安装方式较为简单,这里以图文方式详细描述STAR CCM+11.02安装过程. 1 安装准备工作2 正式安装3 软件破解4 软件测试 1 安装准 ...
- LoadRunner 12.02 安装以及汉化教程
LoadRunner 12.02 安装 一.下载 首先下载Loadrunner12安装包. 下载后有四个安装包: HP_LoadRunner_12.02_Community_Edition_Addit ...
随机推荐
- autoMapper dotnetcore webapi 自动添加映射 abp
在ef的xxxxApplicationModule的Initialize方法中,已经添加了自动映射的配置,如下图: 写的很明白了,我们只需要写一个类继承Profile就可以了.如下图所示: 这样就可以 ...
- js使用锚点回到顶部
使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 <body s ...
- Python 多进程编程之 进程间的通信(Queue)
Python 多进程编程之 进程间的通信(Queue) 1,进程间通信Process有时是需要通信的,操作系统提供了很多机制来实现进程之间的通信,而Queue就是其中的一个方法----这是操作系统开辟 ...
- JSP请求重定向与请求转发的区别
请求重定向 客户端行为,response.sendRedirect(),从本质上讲等同于两次请求,前一次请求对象不会保存,地址栏URL会改变: 请求转发 服务器行为,request.getReques ...
- 2019.02.28 bzoj3527: [Zjoi2014]力(fft)
传送门 fftfftfft菜题. 题意简述:给一个数列aia_iai,对于i=1→ni=1\rightarrow ni=1→n求出ansi=∑i<jai(i−j)2−∑i>jai(i−j ...
- Merge Parts of Rar/7z Package in Linux
When file is too large, we will compress it and split it into several parts. Now Let me show you how ...
- nginx的权限问题(13: Permission denied)解决办法
一个nginx带多个tomcat集群环境,老是报如下错误: 2012/03/07 15:30:39 /opt/nginx/proxy_temp/4/31/0000000314" fail ...
- rand_1tom 产生 rand_1ton
给定一个等概率随机产生1~M的随机函数rand1ToM如下: public int rand1ToM(int m) { return (int) (Math.random() * m) + 1; } ...
- 开源播放器 ijkplayer (四) :Ijkplayer切换网络时停止播放的问题处理
问题起因: 在进行ijkplayer播放器的测试时,发现ijkplayer播放器在切换网络时出现直播画面停止的问题. 问题分析: 抓取日志发现:tv.danmaku.ijk.media.player. ...
- Angular使用总结 --- 通过指令动态添加组件
之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...