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 ...
随机推荐
- python 之 函数
什么是函数 引言 现在有这么个情况:假设我们python中的len方法不可以使用了,而恰好你又要计算一个字符串的长度你该怎么办呢?有人说:‘简单,可以使用for循环嘛 s1 = "hello ...
- arguments.callee的作用及替换方案
arguments.callee的作用 arguments 的主要用途是保存函数参数, 但这个对象还有一个名叫 callee 的属性,返回正被执行的 Function 对象,也就是所指定的 Funct ...
- solr7.7.0搜索引擎使用(四)(搜索语法)
solr搜索语法 参数defType 指定用于处理查询语句(参数q的内容)的查询解析器,eg:defType=lucenesort 指定响应的排序方式:升序asc或降序desc.同时需要指定 ...
- Android使用ksoap2调用C#中的webservice实现图像上传
目录: 一. android使用ksoap2调用webservice 二. 异步调用 三. Android使用ksoap2调用C#中的webservice实现图像上传参考方法 四. 图像传输中Base ...
- jQuery的事件,动画效果等
一.事件 click(function(){}) 点击事件 hover(function(){}) 悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){}) ...
- 【部署问题】解决Nginx: [error] open() "/usr/local/Nginx/logs/Nginx.pid" failed(2:No such file or directory)
问题:环境问题 解决方法: /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 使用nginx -c的参数指定nginx.c ...
- spring生命周期流程图
Spring作为当前Java最流行.最强大的轻量级框架,受到了程序员的热烈欢迎.准确的了解Spring Bean的生命周期是非常必要的.我们通常使用ApplicationContext作为Spring ...
- 高性能mysql-锁的调试
锁的调试分为俩部分,一是服务器级别的锁的调试.二是存储引擎级别的锁的调试 对于服务器级别的锁的调试: 服务器级别的锁的类型有表锁,全局锁,命名锁,字符锁 调试命令: Show processlist ...
- 24.HashSet
在前篇博文(HashMap)中详细讲解了HashMap的实现过程,对于HashSet而言,它是基于HashMap来实现的,底层采用HashMap来保存元素.所以如果对HashMap比较熟悉,那么Has ...
- Python脱产8期 Day014 2019/4/28
一 带参装饰器 1.通常,装饰器为被装饰的函数添加新功能,需要外界的参数 # -- outer参数固定一个,就是func # -- inner参数固定同被装饰的函数,也不能添加新参数 # -- 可以借 ...