Vue2.0学习笔记
环境搭建
vue-cli@3 vue-cli@2.X
npm i -g @vue/cli
模板语法
文本 <span>Message: {{ msg }}</span>
原始HTML <span v-html="msghtml"></span>
特性 <div v-bind:id="dynamicId"></div>
表达式{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}
指令
v-if <p v-if="seen">现在你看到我了</p>
修饰符
<form v-on:submit.prevent="onSubmit">...</form>
计算属性
模板内的表达式非常方便,但是对于复杂的逻辑,这时候使用计算属性
场景 具有依赖关系的数据监听
Class
对象语法 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>
数组语法 <div v-bind:class="[activeClass, errorClass]"></div>
条件渲染
v-if <h1 v-if="awesome">Vue is awesome!</h1>
v-else
v-else-if
列表渲染
v-for <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li>
事件定义
定义
v-on <button v-on:click="counter += 1">Add 1</button>
内联处理器中的方法 <button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button>
事件修饰符 .stop .prevent .
按键修饰符
组件
通过prop向子组件传递数据
使用事件抛出一个值 $emit
插槽 slot
具名插槽
<slot name="header"></slot>
<template slot="header"> <h1>Here might be a page title</h1> </template>
vue-router
起步
HTML
<router-view></router-view>
JS
const Foo = {template:'<div>Foo</div>'}
const routes = [{path:'/foo',component:Foo}]
const router = new VueRouter({routes})
const app = new Vue({router}).$mount('#app')
router-link
字符串 <router-link to='/foo'></router-link>
表达式 <router-link :to='{name:"user",params:{userId:123}}'></router-link>
Vuex
state 单一状态树
mutation 更改store中的唯一方法提交mutation
action 提交mutation ,不能更改状态 异步
Vue2.0学习笔记的更多相关文章
- vue2.0学习笔记之路由(二)路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0学习笔记之路由(二)路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue2.0学习笔记一 :各种表达式
#,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性: #,过滤器可以串联 {{ message | filterA | ...
- vue2.0学习笔记(第八讲)(vue-cli的使用)
vue-cli相当于脚手架,可以帮助我们自动生成模板工程.其内部集成了很多的项目模板,如simple.webpack.webpack-simple等.其中webpack这个项目模板适用于大型项目的开发 ...
- vue2.0学习笔记之组件
[易错点]: 1. 组件内html代码片段超过一个标签时必须套一个根元素,即template模板子元素只能是一个. 2. 组件名称采用横杠间隔命名时,第一个字母大写会报错. 写法一:全局 ...
- Vue2.0学习笔记:Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- DirectX 总结和DirectX 9.0 学习笔记
转自:http://www.cnblogs.com/graphics/archive/2009/11/25/1583682.html DirectX 总结 DDS DirectXDraw Surfac ...
- 一起学ASP.NET Core 2.0学习笔记(二): ef core2.0 及mysql provider 、Fluent API相关配置及迁移
不得不说微软的技术迭代还是很快的,上了微软的船就得跟着她走下去,前文一起学ASP.NET Core 2.0学习笔记(一): CentOS下 .net core2 sdk nginx.superviso ...
- VUE2.0学习总结
摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...
随机推荐
- angularjs checkbox
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Mysql5.7实现主从复制、基于GTID的主从复制、并行复制
(一.主从复制) 一.mysql主从复制原理 mysql的默认复制方式是主从复制.Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制, ...
- sql循环查询树形结构
pid:父类别id ' connect by prior pid = id --查询父祖类别 union ' connect by prior id = pid;--查询子孙类别 这样查询出选中id ...
- 利用Java获取ip地址
方法1 public static String getIp2(HttpServletRequest request) { String ip = request.getHeader("X- ...
- .NET并行计算和并发3.2-多线程调用Invoke
以下这个例子是用一个后台线程执行计算逻辑,这样不影响前台界面操作,也就是说 可以在前台UI界面执行其他操作. 重点是新线程中,调用了一个委托方法,这个方法是需要填充数据到前台控件,因为 前台控件是在原 ...
- Fescar Example-Spring Cloud
项目说明 本项目演示如何使用 Fescar Starter 完成 Spring Cloud 应用的分布式事务接入. 准备工作 在运行此示例之前,你需要先完成如下几步准备工作: 配置数据库 创建 UND ...
- Linux下FTP服务器(vsftpd)配置:
1. vsftpd 安装:yum install vsftpd 2. 添加用于: useradd admin -d /home/data -s /sbin/nologin usermod -d /ho ...
- 安装jdk1.8
这是很普通的shell的脚本,只需要注意:echo 语句内出现的变量,需要转义! #!/bin/bash function get_current_time_stamp(){ echo `date & ...
- spring-task解决定时问题
* spring3以上版本,spring-content自带 spring-task ,来解决工程中的定时问题 基于注解配置spring定时任务 spring配置文件如下: <?xml ve ...
- win 10 kms 激活 后 火狐 上 https 网站 报错
原因: 系统导入了未知的根证书 影响:?? 解决方法: http://mozilla.com.cn/thread-374897-1-1.html