环境搭建

  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学习笔记的更多相关文章

  1. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue2.0学习笔记之路由(二)路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue2.0学习笔记一 :各种表达式

    #,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性:     #,过滤器可以串联 {{ message | filterA | ...

  4. vue2.0学习笔记(第八讲)(vue-cli的使用)

    vue-cli相当于脚手架,可以帮助我们自动生成模板工程.其内部集成了很多的项目模板,如simple.webpack.webpack-simple等.其中webpack这个项目模板适用于大型项目的开发 ...

  5. vue2.0学习笔记之组件

    [易错点]:  1.   组件内html代码片段超过一个标签时必须套一个根元素,即template模板子元素只能是一个. 2.   组件名称采用横杠间隔命名时,第一个字母大写会报错.   写法一:全局 ...

  6. Vue2.0学习笔记:Vue事件修饰符的使用

    事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

  7. DirectX 总结和DirectX 9.0 学习笔记

    转自:http://www.cnblogs.com/graphics/archive/2009/11/25/1583682.html DirectX 总结 DDS DirectXDraw Surfac ...

  8. 一起学ASP.NET Core 2.0学习笔记(二): ef core2.0 及mysql provider 、Fluent API相关配置及迁移

    不得不说微软的技术迭代还是很快的,上了微软的船就得跟着她走下去,前文一起学ASP.NET Core 2.0学习笔记(一): CentOS下 .net core2 sdk nginx.superviso ...

  9. VUE2.0学习总结

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...

随机推荐

  1. css3的transform-origin配合scale,控制动画,实现各种hover效果

    1.底部画线,从左边开始,右边结束 html: <div class="silde-txt">底部划线</div> css: <style>.s ...

  2. sql存储过程编程带事务

    CREATE PROCEDURE [dbo].[存储过程名字] @错误参数_ErrorCode int output, @参数1 int, @参数2 varchar(20), @参数3 varchar ...

  3. GDT全局描述符表

    GDT全局描述符表 什么是GDT全局描述符表 GDT全称为Global Descriptor Table,全局描述符表. 保护模式的寻址方式不在使用寄存器分段的方式直接寻址方式了.而采用的是使用GDT ...

  4. inventory file 与hosts patterns (ansible 机器清单 与 主机匹配模式)

    Ansible配置: ansible有两个核心配置文件: ansible.cfg 配置文件和Inventory配置文件 Ansible.cfg配置文件 Inventory机器列表配置 这里介绍Inve ...

  5. list的相关函数

    # ### 列表相关的函数 # (1) append ''' 功能:向列表的末尾添加新的元素 格式:列表.append(值) 返回值:None 注意:新添加的值在列表的末尾,该函数直接操作原有列表 ' ...

  6. 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做项目,新建项目时什么都贪新, ...

  7. FCC JS基础算法题(12):Where do I belong(数组排序并找出元素索引)

    题目描述: 先给数组排序,然后找到指定的值在数组的位置,最后返回位置对应的索引.举例:where([1,2,3,4], 1.5) 应该返回 1.因为1.5插入到数组[1,2,3,4]后变成[1,1.5 ...

  8. Reactor

    Flux和Mono Flux和Mono是Reactor中的两个基本概念.Flux表示的是包含0到N个元素的异步序列.在该序列中可以包含三种不同类型的消息通知:正常的包含元素的消息,序列结束的消息和序列 ...

  9. webpack配置(入口出口)

    const path=require('path'); //是node.js的path模块 //单入口,单出口 module.exports={ // 入口文件 entry:{ entry:'./sr ...

  10. 如何使用Nunit进行测试(Visual Studio 2017 comminity)

    一.环境 操作系统:Windows 版本 10.0.15063 64位 集成环境:Visual Studio 2017 comminity(此后简称vs2017) 编程语言:C# 目标框架:.NET ...