vue

对于新学习一门技术，一门语言比如JAVA、Python等都是从编写Hello World开始的，这样一来有益于初学者的人门，并给予初学者一定的信心，所以我也从HelloWorld开始讲起。 干货： 　　对于学习新的一门技术最好都是重从它的官网开始（如果是中文的官网最好，嘿嘿，因为本人的英文水平也是有限的），Vue的官网就是非常好它的官网可以支持翻译成多种语言的，所以对于英文不好的小伙伴是一个福利。Vue官网： https://cn.vuejs.org/ 第一步引入Vue.js文件 　　vue.js文件分为两种文件： 　　　　　　　　　　第一种是：开发版本 　　　　　　　　　　第二种是：生产版本 　　在这里我们使用的是开发版本的，等项目完成发布之后再引入生产版本 代码： 　　 <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > Hello World </ title > < script src

使用js-cookie依赖包 更多参考： https://www.npmjs.com/package/js-cookie 安装 cnpm install js-cookie --save 使用 import cookies from 'js-cookie' // 设置cookie cookies.set('name', 'value') cookies.set('name', 'value', { expires: days }) // 获取cookie cookies.get('name') // 删除cookie cookies.remove('name') 自己封装cookie的操作方法 建立cookie.js // 获取cookie export function getCookie(key) { var arr = [] var reg = new RegExp('(^| )' + key + '=([^;]*)(;|$)') arr = document.cookie.match(reg) if (arr) { return decodeURIComponent(arr[2]) } else { return null } } // 设置cookie export function setCookie(key, value, expiredays) { var

分步表单 和 自定义表单控件 结合前面所了解到的内容。这里分步分三个路由来实现。 先创建一个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: "" 11 } 12 } 13 }; 14 15 const actions = { 16 async submitStepForm({ commit }, payload) { 17 if (payload.payload.password == 123123) { 18 let res = await request({ 19 url: "api/form", 20 method: "POST", 21 data: payload.payload 22 }); 23 if (res.data.message == "成功") {

本节将展示如果通过axios+proxyTable完成跨域请求并显示数据。 1、前提约束 完成nodejs，vue-cli，webpack，webpack-dev-server的安装 https://www.jianshu.com/p/eb4d9e132f62 2、操作步骤 完成vue项目中加入easytable【这时是固定数据】 https://www.jianshu.com/p/bf5abb37eb3f 下载axios依赖包 cd vue-easytable cnpm install axios --save-dev 修改main.js，加入以下内容： import axios from 'axios' axios.defaults.headers.common['token'] = '' axios.defaults.headers.post['Content-type'] = 'application/json' axios.defaults.baseURL = 'http://localhost:8080/api' 修改HelloWorld.vue，内容如下： <template> <div class="tablePage"> <h1>表格+分页</h1> <v-table :columns="tableConfig.columns" :table-data=

vue选项数据： data computed methods 在src-pages下新建目录demo2，目录中新建index.vue <template> <div>选项数据<div> <div>---------------------------------</div> </template> <script> export default{ data(){ } } </script> 在router-index.js中添加路由 然后代码报错了 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead 意思就是说在模版里只能有一个主div（根对象），如果有多个元素，请用一个主div包含他们 改成这样就行了 data是全局变量的定义 computed是对象，里面可以定义各种函数 methods也是一个对象，里面可以定义各种函数 这里面的函数一般是给事件来用的 vue模板语法： 模板中可以直接嵌入js语法 指令： v-html 绑定的内容会变成当前元素的子元素 v-bind 属性动态化 v-on 绑定事件（简写可以直接用@代替） v-html v-bind v

VUE 组件化、快速开发 vue的生命周期： beforeCreate 组件刚刚被创建 created 组件创建之后 beforeMount 组件挂载之前 mounted 组件挂载之后 beforeDestroy 组件销毁之前 destroyed 组件销毁之后 vue安装 首先要先安装node.js，然后再安装npm，然后换cnpm淘宝镜像 由于使用cmd进入指定目录非常不智能，因此推荐安装git 去git官网下载，傻瓜式安装即可 安装成功后进入项目目录，右键-git bash here 全局安装 cnpm install --global vue-cli 创建一个基于webpack模板的新项目 vue init webpack my_project 这样代表安装完成，查看项目 安装依赖包 cd my_project cnpm install cnpm run dev 在浏览器访问 localhost:8080 然后在编辑器打开项目，爱用啥编辑器就用啥，sublime也行，不过我最近比较喜欢vscode 在my_project的src目录下，新建文件夹pages，在pages下新建文件夹demo1，在demo1下新建文件index.vue 在index.vue里敲点代码 然后打开router->index.js 这个文件是用来设置路由的 浏览器访问： 接下来修改index

<form class="" id="pj-frm"> <div class="assess-header"> <span class="star-text">评分</span> <span class="star-item" :class="[item<=curId?'on':'']" v-for="item in stararr" @click="setStar(item)"></span> <input type="hidden" name="star" v-model="curId"> <input type="hidden" name="order_id" v-model="con.id"> <input type="hidden" name="purl" v-model="dataUrl"> </div> <div class="assess-textarea-w"> <textarea name="content" class="assess-textarea" placeholder="请写下您真实的评价" v-model="content"></textarea> </div> <div class="assess-pic-wrapper" @click="AssessPic();"> <img :src="dataUrl" alt="" class=

译者按： 学习优秀的开源项目是提高代码水平最有效的方式。 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。 在过去的一年中，我比较了近 3000 个 Vue.js 开源项目，选出 30 强（1％的比例）。 这是一个有竞争力的清单，因为我仔细挑选 2017 年 1 月至 12 月期间发布的最佳开源 Vue.js 库，工具和项目。通过考虑流行度，参与度和近况来评估这份清单的质量。举个简单的例子，这份清单中的项目在某著名同性交友平台的 star 数平均量高达 3795，还不错吧？ 开源项目对程序员来说是很有用的。你可以通过读代码并且在现有项目的基础上构建一些东西来学习，因为如果想提高你的 Vue 开发技术，那么花些时间来玩一下过去一年你可能错过的 Vue.js 开源项目是很值得的。 NO.1 Element Github star：22004 Element ：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 NO.2 iView Github star：12175 iView ：一套高质量的 UI 组件库。 NO.3 Best-resume-ever Github

class Vue{ constructor(options){ this.$el = options.el; //获取元素节点 this.$data = options.data; //获取数据 //若元素节点不为空 if(this.$el){ new Observer(this.$data); //数据劫持 new Compiler(this); //解析节点变为虚拟dom，放到内存中 } } } class Observer{ constructor(data){ this.observer (data); } observer(data){ //判断是否为对象 if(data && typeof data == 'object'){ for(let key in data){ this.reactive(key,data[key],data); //对key属性绑定数据劫持 } } } reactive(key,value,data){ this.observer(value); //对嵌套的子属性继续递归劫持 Object.defineProperties(data,key,{ get(){ return value; }, set: newValue => { // if(newValue != value){ value = newValue; this

[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue]实现父子组件数据双向绑定 [vue]render函数渲染组件 [vue]webpack&vue组件工程化实践 组件基础 局部组件 全局组件 定义 定义 注册 - 使用 使用 全局组件(工程中比局部组件更常用) 组件化编程好处: 1,重用性 2,维护性 - 全局组件定义(体会一下重用性) <div id="app"> <!--重用性--> <my-awsome></my-awsome> <my-awsome></my-awsome> <my-awsome></my-awsome> <!--组件中使用数据--> <my-awsome2></my-awsome2> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> //全局组件: 1,定义 2,使用 Vue.component( 'my-awsome', { template: "<h1>全局组件: maomao</h1>" } ); Vue.component( 'my-awsome2', { template: "<h1>自己的模板里取自己的数据: {