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也是一个数据驱动框架 ...
随机推荐
- linux 搭建rap记录
1 安装 jdk1.8版本及以上 2 安装 apache-tomcat 3 安装 redis 最后编辑session配置和数据库配置 <session-config><session ...
- cocos2d-x学习笔记(斗地主代码)
满足百度百科上的出牌规则,电脑可以随着玩家出牌. 百度网盘地址:链接: https://pan.baidu.com/s/1eRLpvJ8 提取密码: tf8w
- 复制目录及其子目录下所有文件DOC
echo 开始同步代码 set src_home=F:\work\sign\Bonade-Sign set dest_home=F:\work\testGit\sign5\Bonade-Sign se ...
- Python基础10_函数
直接贴笔记 : #!/usr/bin/env python # coding:utf-8 # 定义函数时要写成良好的注释习惯 通常用三个单引号 def test(x): ''' 计算一个y=2*x+1 ...
- django rest_framework 分页出现报错
1.出现: WARNINGS: ?: (rest_framework.W001) You have specified a default PAGE_SIZE pagination rest_fram ...
- TestLink测试管理工具的使用说明
1. 创建项目: 主页左边的列表栏有 “Test Project management”的菜单,子菜单中有 “ create new test project”,通过它可以创建新的测试项目. 同时,菜 ...
- vue导出excel
1.按装依赖 cnpm install -S file-saver xlsx cnpm install -D script-loader 2.引入Blob.js和expor2Excal.js 3.在m ...
- Javascript中的this指向。
一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...
- postman之如何获取cookie
1.最近在学习postman的使用方法,为了保证后续模块操作,必须在登录时获取的session值,并将其设置为环境变量,session的位置处于response headers里面返回的set-coo ...
- 使用 JavaScript 截屏
经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...