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-安装-指令的更多相关文章

  1. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  2. Vue指令02——v-on指令和v-show的使用

    Vue指令02--v-on指令和v-show的使用 v-on指令 格式1:v-on:事件="方法" 格式2:@事件="方法" 格式3:@事件="方法( ...

  3. vue+webpack 安装常见插件

    html-webpack-plugin 插件地址:https://www.npmjs.com/package...安装指令: npm install html-webpack-plugin --sav ...

  4. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  5. 新人成长之入门Vue.js常用指令介绍(一)

    写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...

  6. Vue.js 安装及其环境搭建

    For me or other first studying vue.js. For Windows PC: 1.先安装node.js 安装官网最新的即可 版本应该要大于6.0版本 nodejs的官网 ...

  7. 【转载】Vue.js 安装及其环境搭建

    注:最近在学习Vue,以下是环境搭配方法: ****************************************************************************** ...

  8. v-debounce-throttle是一个vue防抖节流指令

    v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ...

  9. star ccm+ 11.02安装

    STAR CCM+是CD-Adapco公司的主打软件,其安装方式较为简单,这里以图文方式详细描述STAR CCM+11.02安装过程. 1 安装准备工作2 正式安装3 软件破解4 软件测试 1 安装准 ...

  10. LoadRunner 12.02 安装以及汉化教程

    LoadRunner 12.02 安装 一.下载 首先下载Loadrunner12安装包. 下载后有四个安装包: HP_LoadRunner_12.02_Community_Edition_Addit ...

随机推荐

  1. autoMapper dotnetcore webapi 自动添加映射 abp

    在ef的xxxxApplicationModule的Initialize方法中,已经添加了自动映射的配置,如下图: 写的很明白了,我们只需要写一个类继承Profile就可以了.如下图所示: 这样就可以 ...

  2. js使用锚点回到顶部

    使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 <body s ...

  3. Python 多进程编程之 进程间的通信(Queue)

    Python 多进程编程之 进程间的通信(Queue) 1,进程间通信Process有时是需要通信的,操作系统提供了很多机制来实现进程之间的通信,而Queue就是其中的一个方法----这是操作系统开辟 ...

  4. JSP请求重定向与请求转发的区别

    请求重定向 客户端行为,response.sendRedirect(),从本质上讲等同于两次请求,前一次请求对象不会保存,地址栏URL会改变: 请求转发 服务器行为,request.getReques ...

  5. 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 ...

  6. 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 ...

  7. nginx的权限问题(13: Permission denied)解决办法

    一个nginx带多个tomcat集群环境,老是报如下错误:   2012/03/07 15:30:39 /opt/nginx/proxy_temp/4/31/0000000314" fail ...

  8. rand_1tom 产生 rand_1ton

    给定一个等概率随机产生1~M的随机函数rand1ToM如下: public int rand1ToM(int m) { return (int) (Math.random() * m) + 1; } ...

  9. 开源播放器 ijkplayer (四) :Ijkplayer切换网络时停止播放的问题处理

    问题起因: 在进行ijkplayer播放器的测试时,发现ijkplayer播放器在切换网络时出现直播画面停止的问题. 问题分析: 抓取日志发现:tv.danmaku.ijk.media.player. ...

  10. Angular使用总结 --- 通过指令动态添加组件

    之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...