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. python 之 函数

    什么是函数 引言 现在有这么个情况:假设我们python中的len方法不可以使用了,而恰好你又要计算一个字符串的长度你该怎么办呢?有人说:‘简单,可以使用for循环嘛 s1 = "hello ...

  2. arguments.callee的作用及替换方案

    arguments.callee的作用 arguments 的主要用途是保存函数参数, 但这个对象还有一个名叫 callee 的属性,返回正被执行的 Function 对象,也就是所指定的 Funct ...

  3. solr7.7.0搜索引擎使用(四)(搜索语法)

    solr搜索语法 参数defType   指定用于处理查询语句(参数q的内容)的查询解析器,eg:defType=lucenesort    指定响应的排序方式:升序asc或降序desc.同时需要指定 ...

  4. Android使用ksoap2调用C#中的webservice实现图像上传

    目录: 一. android使用ksoap2调用webservice 二. 异步调用 三. Android使用ksoap2调用C#中的webservice实现图像上传参考方法 四. 图像传输中Base ...

  5. jQuery的事件,动画效果等

    一.事件 click(function(){}) 点击事件 hover(function(){})   悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){}) ...

  6. 【部署问题】解决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 ...

  7. spring生命周期流程图

    Spring作为当前Java最流行.最强大的轻量级框架,受到了程序员的热烈欢迎.准确的了解Spring Bean的生命周期是非常必要的.我们通常使用ApplicationContext作为Spring ...

  8. 高性能mysql-锁的调试

    锁的调试分为俩部分,一是服务器级别的锁的调试.二是存储引擎级别的锁的调试 对于服务器级别的锁的调试: 服务器级别的锁的类型有表锁,全局锁,命名锁,字符锁 调试命令: Show processlist ...

  9. 24.HashSet

    在前篇博文(HashMap)中详细讲解了HashMap的实现过程,对于HashSet而言,它是基于HashMap来实现的,底层采用HashMap来保存元素.所以如果对HashMap比较熟悉,那么Has ...

  10. Python脱产8期 Day014 2019/4/28

    一 带参装饰器 1.通常,装饰器为被装饰的函数添加新功能,需要外界的参数 # -- outer参数固定一个,就是func # -- inner参数固定同被装饰的函数,也不能添加新参数 # -- 可以借 ...