组件基础基本示例这里有一个 Vue 组件的示例：// 定义一个名为 button-counter 的新组件 Vue.component(‘button-counter‘, {data: function () {return {count: 0}},template: ‘<button v-on:click="count++">You clicked me {{ count }} times.</button>‘ })组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：<div i...
Vue.js在设计上使用MVVM模式。通过MVVM的模式拆分为视图和数据两部分，并将其分离。因此，你只需关心数据即可，DOM的事情Vue会帮你自动搞定。Vue的生命周期钩子比较常用的有：created 实例创建完成之后钓鱼，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。在需要初始化处理一些数据时会比较有用mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始beforeDestroy 实例销毁之前调用。主要解绑一些使用addEve...
文中例子代码请参考github父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据<script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: ‘#app‘,data: {msg: ‘这是父组件中的消息‘},components: {son: {template: ‘<h1>这是子组件 --- {{finfo}}</h1>‘,props: [‘finfo‘]}}});</script>使用v-bind或简化指令，将数据传递到子组件中：<div ><son :finfo="msg"></son></div>完整...
计算属性：计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。如果我们需要缓存，可用计算属性v-if中key的作用：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，可以使用key已避免这种情况发生；v-if控制元素的销毁和重建；有惰性，直到为真时，渲染条件块；v-show控制元素的显示和隐藏；原文：https://www.cnblogs.com/llmatch/p/9428666.html
目录第一个点第二个点总结阅读这一章。每个vue应用，都需要通过实例化vue来实现。这句话就是说，想要在html当中用vue，都要创建vue对象。这篇文章里，主要是读这一篇代码：<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body><div id="vue_det"><h1>site : {{site}}</h1><h1>url : {...
一、环境搭建：1.安装node.js从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，要意的是npm的版本最好是3.x.x以上，以免对后续产生影响。 2.安装淘宝镜像npm install -g cnpm --registry= https://registry.npm.taobao.org，安...
目录1、MVVM思想2、Vue简介3、入门案例4、概念1）、创建Vue实例2）、插值表达式①、说明②、插值闪烁3）、Vue指令①、单向绑定： v-bind②、双向绑定： v-model③、事件处理： v-on④、单向绑定：v-text 和 v-html⑤、遍历循环：v-for⑥、判断与显示：v-if 和 v-show4）、计算属性5）、侦听器6）、过滤器7）、组件化①、全局声明一个组件：②、局部声明一个组件：8）、生命周期钩子函数9）、vue的Live Template1、MVVM思想M：即Mod...
vue扩展插件(1) vue-cli 脚手架(2) vue-resource(axios) : ajax请求(3) vue-router 路由(4) vuex 状态管理(5) vue-lazyload 图片懒加载(6) vue-scroller 页面光滑动相关(7) mint-ui : 基于vue的ui组件库(移动端)(8) element-ui : 基于vue的ui组件库(pc端) <div id="test"><input type="text" v-model="msg"><p>Hello {{msg}}</p> </div> <script type="text/javascript" src="../lib/vue.min.js"></script> <script>var v = new V...
在家的闲暇时间来完善自己的前端知识。经过两三天的学习，按照webpack文档学习，vue文档学习，最后实现了两者结合的目标。webpack按照网站上guide的流程依次学习1、使用npm安装webpack2、设置输入文件，比如怎样引入css，images，fonts，data3、设置输出文件，比如可以根据自己的设置来决定输出脚本的名称，生成新的页面，在每次生成新页面之前先把旧的页面进行清理4、开发过程中，使用source maps来显示提示信息，方便开发者定位错...
一.前端开发工具包node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。官网：https://nodejs.org/en/下载最新版本安装，疯狂点击下一步，就可以了！安装完成后，打开cmd控制台，输入命令node -v 查看版本：C:\Users\john>node -v v10.7.0本质上还是JS，跑在V8引擎上的，让JS能够和操作系...
1、插槽（1）插槽内容像 HTML 元素一样，我们常常需要给组件传递内容比如在下面的例子中，我们给自定义组件 prompt-info 传入 出错啦 的文本<!DOCTYPE html> <html><head><title>Demo</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> </head><body><div id="app"><prompt-info>出错啦</prompt-info></div><script>Vue.component('prompt-info', {template: `<div><h3>提示信息</h3></div>`})new Vue({el: '#app'...
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>vue</title><link rel="stylesheet" href=""><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- <script type="text/javascript" src="../js/vue.js"></script> --></head> <body><div ><input type="text" v-model="n1">+<input type="text" v-model="n2">=<input type="text" v-mode...
Vue学习 数据绑定 {{ msg }} 双向 {{* msg }} 只绑定一次 {{{ htmlInfo }}} 表示htmlinfo里 有html标签 ，里面的{{}}将不可用 Vue.partial(‘my-partial‘, ‘<p>This is a partial! {{msg}}</p>‘) 可以动态html并包含{{}} {{number+1}} {{ok?‘yes‘:‘no‘}} {{message.split(‘‘).reverse().join(‘‘)}} 支持js表达式，不支持语句，if,支持三元 {{ message | filterA | fi...
网上有些贴子少了至关重要的一步导致我一直没装上， 切记！！install后还需build，且install和build都在vue-devtools文件夹内执行github下载地址 点击跳转 具体步骤：第一步：找到vue-devtools的github项目，并将其clone到本地 vue-devtoolsgit clone https://github.com/vuejs/vue-devtools.git 第二步：安装项目所需要的npm包（进入vue-devtools编译项目文件目录，很重要！！）建议使用npm淘宝镜像按照依赖包。地址：http://np...
vue过渡使用transition的封装组件，有4个（css）类名在 enter/leave的过渡状态中切换1，v-enter:定义进入过渡的开始状态，在元素被插入时生效，在下一帧时移除2，v-enter-active定义进入过渡的结束状态，在元素被插入时生效，在 transition/animation完成之后移除。3，v-leave定义离开过渡的开始状态，在离开过渡被触发时生效，在下一帧移除。4，v-leave-active定义离开过渡的结束状态，在离开过渡被触发时生效，在transition/ani...