主体 实例方法归类: data 数据方法 dom dom方法 event 事件处理 lifecycl 生命周期函数 init 初始化vue页面 全局方法: derectives filters init过程 data : observer deps computed watch || watcher template: fragment [ directive repeat if component transition filter ]重点: 把数据(Model) 和视图(View) 建立关联1. 通过observer 对 data 监听, 包括监听...
propsData 不是和属性有关，他用在全局扩展时进行传递数据。先写一个全局扩展var header_a = Vue.extend({ template:`{{message}} 传值 {{ a }}`, data:function(){ return { message:"内容" } }, props:[‘a‘]}) 挂载 new header_a().$mount(‘header‘) 这时如果想传递值。就要用propsData1.在全局扩展里加入props进行接收。 new header_a(propsData:{a:1}).$mount(‘header‘)...
<div v-laohan="font">元素</div>需要在构造器外执行Vue.directive(‘my‘,function(el,binding,vnode){console.log(el) //<div>元素</div>console.log(binding) //objectconsole.log(binding.name) //laohanconsole.log(binding.expression) //fontconsole.log(binding.value) //red el.style="color:"+binding.value }) data:{font:‘red‘} 自定义指令有五个生命周期（也叫钩子函数）bind inserted update componentUpdated ...
v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="example"> <p v-if="greeting">Hello</p> </div><script src="js/vue.js"></script> <script> var vm2 = new Vue({ el:‘#exa...
1、vue.js的目的Vue的产生主要是解决三个问题1.1、主要解决的是数据绑定的问题1.2、主要是构建大型的单页面程序，解决app页面卡顿的问题1.3、支持组件式开发，采用积木式编程2、Vue.js的特性 1、mvvm模式2、组建化3、指令系统4、vue.js开始支持虚拟dom 虚拟dom可以提升页面的刷新速度 原文：http://www.cnblogs.com/bjjjunjie/p/7106579.html
分步表单 和 自定义表单控件结合前面所了解到的内容。这里分步分三个路由来实现。先创建一个store的module。保存我们需要数据，然后引入到store的index.js中 form.js 1 import router from "../../router";2 import request from "../../utils/request";3 import { notification } from "ant-design-vue";4 5 const state = {6 step: {7 payAccount: "12345",8 receiverAccount: {9 type: "bank", 10 number: ...
学习任何一种框架，从一个Hello World应用开始是最快了解该框架特性的途径。 我们先从一段简单的HTML代码开始，感受Vue.js最核心的功能：<!doctype html> <html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue 示例</title></head><bo...
目录插槽内容后备内容具名插槽作用域插槽解构插槽Prop具名插槽的缩写slot和slot-scope特性插槽内容创建示例组件slotdemo.vue<template><div class="slotdemo"><slot></slot></div> </template>注册组件import slotdemo from 'slotdemo.vue' Vue.component('slotdemo',slotdemo)使用组件<slotdemo>传入内容</slotdemo>组件标签外内容这样<slot><slot>就会替换为你传入内容(text、html或其他组件)，如果组件没包含<slot>元素,则该组件...
数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。data的数据和视图同步更新。实例创建后添加一个新的属性，对这个属性的的改动将不会触发任何视图的更新。如果需要一个属性，但是一开始它为空或不存在，仅需要设置一些初始值。Object.freeze()方法可以阻止修改现有的属性除了数据属性，Vue 实例还包含实例属性与方法，前缀为$，例如：vm.$data，vm.$el，vm.$watch()(这里假设vm是某个...
一、vue介绍vue是目前三大主流框架之一（React、Angular、Vue）vue特点：易用灵活高效vue官网：官网链接二，知识点vue实例选项： el注：不能 让el直接管理html或者body，会报错作用：指定当前vue实例所管理的视图值：可以是id选择器，其他选择器，DOM元素（#div1，.div1等）vue实例选项：data作用：指定当前vue实例所管理的视图中要使用的数据值：可以是一个对象访问方法：实例对象.属性名特点：响应式数据（数据改变时，视图层中的...
vue1-2:MVVM M:Model 数据模型,负责数据存储 V:View 视图,负责页面的显示 VM:View Model 负责业务处理,对数据进行加工,之后交给视图 下载地址: <!--中文官网:https://cn.vueis.ors/--> <!--vue1源码:http://v1-cn.vuejs.org/js/vue.js--> <!--vue2源码:http://unpkg.com/vue@2.2.1/dist/vue.js-->vue:1-3:Vue常见指令介绍上 1.插值表达式 {{}} 当模型中的数据改变时,那么视图中的数据也相应发...
本文为转载，原文：Vue学习笔记目录Vue介绍Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和...
vue里 最常见的 最普遍的用法 应该是var app = new Vue({el: ‘#app‘,data: {message: ‘Hello Vue!‘ }}) 下面把所有使用方法尽可能列出来 方便一目了然的参考用法 1<div id="app"> 2<span v-bind:title="message" v-on:click="reverseMessage">{{message}}</span> 3<p v-if="seen">Now you see me</p> 4<ol> 5<li v-for="todo in todos"> 6 {{ todo.text }}7</li> 8</ol> 9</div>1011<script src="https://unpkg.co...
npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli //可用淘宝镜像 npm=》cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org生成项目vue init webpack my-first-vue-project //生成项目名为my-first-vue-project的模板了解vue与webpack的关系 学习vue装好项目后cd my-first-vue-project //进入目录npm install //下载所需要...
1、如何去除vue项目中的 # --- History模式：https://www.cnblogs.com/zhuzhenwei918/p/6892066.html2、原文：https://www.cnblogs.com/xiaohuizhang/p/9132662.html