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‘)...
Vue.js是一个用于创建web交互界面的库。Vue.js专注于MVVM模型的ViewModel层。它通过双向数据绑定把View层和Model层连接了起来。实际的DOM封装和输出格式都被抽象为了Directives和Filters。Vue希望通过一个尽量简单的API来提供反应式的数据绑定和可组合、复用的视图组件。它不是一个大而全的框架，它只是一个简单灵活的视图层。您可以独立使用它快速开发原型、也可以混合别的库做更多的事情。它同时和诸如Firebase这一类的BaaS服务有...
出现 Cannot GET/： 控制台中并没有报错；npm run dev命令行窗口也没有报错。 原因在网上查了一堆，发现这个问题还挺多呢，而且各个回答的解决方式都竟然有许多不同…于是把能改的地方都改了…（基本上相当于将配置信息改回来）关闭 history 模式关闭history模式，用/#/路由的方式开启，（history模式要跑在服务端里面）； 更改端口号更改端口号（没改的话打开原端口号自动加上登陆次数） config/index.js文件中修改assetsPublicPa...
实现样式 准备工作，先实现 树状组件的基本样式 <span style="height:500px; display:block; overflow-y:auto;" class="mytree"><el-tree:data="data"show-checkboxnode-key="id":default-expand-all="true":props="defaultProps"></el-tree></span> 接下来修改css ，注： 我使用的是 scss，less 也行 .mytree /deep/ {.el-tree > .el-tree-node:after {border-top: none;}.el-tree-node {position: relative;padding-left:...
<div class="ballContain"> <div v-for="ball in balls"> <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop" > <div class="ball" v-show="ball.show"> <div class="inner inner-hook"></div> </div> </transition> </div></div>methods:{ drop: function (el) { for (let i = 0; i < this.balls.length; i++) { let ball = this....
Vue 2.0 开始支持服务端渲染的功能，所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少，最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news。本人在公司做Vue项目的时候，一直苦于产品、客户对首屏加载要求，SEO的诉求，也想过很多解决方案，本次也是针对浏览器渲染不足之处，采用了服务端渲染，并且做了两个一样的Demo作为比较，更能直观的对比Vue前后端的渲染。话不多说，我们分别来看两个Demo:（欢迎st...
1.计算属性的特殊，只能当属性进行使用。2.计算属性由两部分，平常这样写 computed: {//计算有几个完成的事情add: function() {var sum = 0;this.todos.some(item => {if (item.completed == true) {sum++;}})return sum;}}实际上就是使用了get方法，当item.complete的值进行变化的时候，就会自动触发。当用全选按钮进行全选的时候， // 使用计算属性的方式处理全选的联动效果toggleStat: {get() {console.log("调用了get");retu...
<template slot-scope="scope" slot="hylxForm"> <el-radio-group v-model="radio" @change="hylxTabShow" > <el-radio-button id="hylx_gr" label="1" >个人</el-radio-button> <el-radio-button id="hylx_jg" label="2">机构</el-radio-button> </el-radio-group></template>data中：radio: ‘1‘,然后就是js按钮事件了，value形参接收到的就是点击该r...
直接上代码:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>vue.js 使用数组和对象控制Class </title><script src="vue.js"></script><script src="node_modules/axios/dist/axios.js"></script><script src="node_modules/lodash/lodash.js"></script></head><body><style>.red{color:red;}.font{font-size: 200px;}</style><div id="ask"><!--vue不能控制body和html的标签--><h1 :class="object">简单</h1>...
nodejs安装配置1.下载地址：https://nodejs.org/en/2.默认安装 安装完成后，执行npm -v 出现版本号则表示安装成功。3.配置在node安装目录下新建两个文件夹node_global和node_cache配置npm全局模块的存放路径以及cache的存放路径，执行如下命令：npm config set prefix "D:\Program Files\nodejs\node_global"npm config set prefix "D:\Program Files\nodejs\node_cache"配置环境变量，增加变量NODE_PATH D:\Program Files\n...
有一段时间没有更新技术博文了，因为这段时间埋下头来看Vue源码了。本文我们一起通过学习双向绑定原理来分析Vue源码。预计接下来会围绕Vue源码来整理一些文章，如下。一起来学Vue双向绑定原理-数据劫持和发布订阅一起来学Vue模板编译原理(一)-Template生成AST一起来学Vue模板编译原理(二)-AST生成Render字符串一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法这些文章统一放在我的git仓库：https://github.com/yzsunlei/java...
node.js / npm -- npm -- 管理工作目录 -- npm init -y -- 下载包 -- npm i xxxx@0.0.0 -- 卸载 -- npm uninstall xxxx -- 更新 - npm update xxxx webpack -- 下载 -- npm i webpack webpack-cli -- 打包默认的入口文件 --src目录下的 index.js -- 出口文件 -- dist目录的main.js vue-cli -- 帮助我们快速搭建项目的脚手架工具 -- 下...
1.子组件给父组件传递数据 <body><div id="app">父组件：{{total}}<br><son-component v-bind:total="total"></son-component></div><script>Vue.component('son-component',{template:'<div>子组件：{{total}}+{{num}}={{add}}</div>',props:{total:Number},data(){return {num:10}},computed:{add:function(){return num=this.total+this.num}}})var app=new Vue({el:'#app',data:{total:1},})</script> </body>通过v-bind动态绑...
我们访问项目都是在浏览器输入 http://localhost:8080/#/打开一个命令行窗口，获取当前机器的内网IPwindow输入：ipconfigmac输入：ifconfig得到自己的内网ip后，按说输入 http://192.168.0.xxx:8080 一样可以访问到项目，但是却报错，显示无法访问。这是因为我们前端的项目，是通过 webpack 的 dev server启动的，但是 webpack 的 dev server 默认不支持通过IP的形式进行页面的访问。所以我们需要把它默认的配置项做一个修改。打开...
一个构建用户界面的框架通过指令，来给DOM元素赋值或者其他操作。简单的指令及其作用：在HTML标签中显示数据： --> {{}} --> v-text --> v-html 这三条指令都是给HTML具体标签填充内容，可以是文本，也可以是其他标签 ------------------- --> v-if --> v-else 这两条命令配合使用，如果变量为true，则插入if所在的标签，否则就插入else所在的标签。 ------------------- --> v-show 如果变量为t...