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也是一个数据驱动框架 ...
随机推荐
- css3的transform-origin配合scale,控制动画,实现各种hover效果
1.底部画线,从左边开始,右边结束 html: <div class="silde-txt">底部划线</div> css: <style>.s ...
- sql存储过程编程带事务
CREATE PROCEDURE [dbo].[存储过程名字] @错误参数_ErrorCode int output, @参数1 int, @参数2 varchar(20), @参数3 varchar ...
- GDT全局描述符表
GDT全局描述符表 什么是GDT全局描述符表 GDT全称为Global Descriptor Table,全局描述符表. 保护模式的寻址方式不在使用寄存器分段的方式直接寻址方式了.而采用的是使用GDT ...
- inventory file 与hosts patterns (ansible 机器清单 与 主机匹配模式)
Ansible配置: ansible有两个核心配置文件: ansible.cfg 配置文件和Inventory配置文件 Ansible.cfg配置文件 Inventory机器列表配置 这里介绍Inve ...
- list的相关函数
# ### 列表相关的函数 # (1) append ''' 功能:向列表的末尾添加新的元素 格式:列表.append(值) 返回值:None 注意:新添加的值在列表的末尾,该函数直接操作原有列表 ' ...
- Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 Web modules
原文出处:http://jingwang0523.blog.163.com/blog/static/9090710320113294551497/ 最近在用eclipse做项目,新建项目时什么都贪新, ...
- FCC JS基础算法题(12):Where do I belong(数组排序并找出元素索引)
题目描述: 先给数组排序,然后找到指定的值在数组的位置,最后返回位置对应的索引.举例:where([1,2,3,4], 1.5) 应该返回 1.因为1.5插入到数组[1,2,3,4]后变成[1,1.5 ...
- Reactor
Flux和Mono Flux和Mono是Reactor中的两个基本概念.Flux表示的是包含0到N个元素的异步序列.在该序列中可以包含三种不同类型的消息通知:正常的包含元素的消息,序列结束的消息和序列 ...
- webpack配置(入口出口)
const path=require('path'); //是node.js的path模块 //单入口,单出口 module.exports={ // 入口文件 entry:{ entry:'./sr ...
- 如何使用Nunit进行测试(Visual Studio 2017 comminity)
一.环境 操作系统:Windows 版本 10.0.15063 64位 集成环境:Visual Studio 2017 comminity(此后简称vs2017) 编程语言:C# 目标框架:.NET ...