环境搭建

  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. linux 搭建rap记录

    1 安装 jdk1.8版本及以上 2 安装 apache-tomcat 3 安装 redis 最后编辑session配置和数据库配置 <session-config><session ...

  2. cocos2d-x学习笔记(斗地主代码)

    满足百度百科上的出牌规则,电脑可以随着玩家出牌. 百度网盘地址:链接: https://pan.baidu.com/s/1eRLpvJ8 提取密码: tf8w

  3. 复制目录及其子目录下所有文件DOC

    echo 开始同步代码 set src_home=F:\work\sign\Bonade-Sign set dest_home=F:\work\testGit\sign5\Bonade-Sign se ...

  4. Python基础10_函数

    直接贴笔记 : #!/usr/bin/env python # coding:utf-8 # 定义函数时要写成良好的注释习惯 通常用三个单引号 def test(x): ''' 计算一个y=2*x+1 ...

  5. django rest_framework 分页出现报错

    1.出现: WARNINGS: ?: (rest_framework.W001) You have specified a default PAGE_SIZE pagination rest_fram ...

  6. TestLink测试管理工具的使用说明

    1. 创建项目: 主页左边的列表栏有 “Test Project management”的菜单,子菜单中有 “ create new test project”,通过它可以创建新的测试项目. 同时,菜 ...

  7. vue导出excel

    1.按装依赖 cnpm install -S file-saver xlsx cnpm install -D script-loader 2.引入Blob.js和expor2Excal.js 3.在m ...

  8. Javascript中的this指向。

    一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...

  9. postman之如何获取cookie

    1.最近在学习postman的使用方法,为了保证后续模块操作,必须在登录时获取的session值,并将其设置为环境变量,session的位置处于response headers里面返回的set-coo ...

  10. 使用 JavaScript 截屏

    经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...