计算属性：计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。如果我们需要缓存，可用计算属性v-if中key的作用：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，可以使用key已避免这种情况发生；v-if控制元素的销毁和重建；有惰性，直到为真时，渲染条件块；v-show控制元素的显示和隐藏；原文：https://www.cnblogs.com/llmatch/p/9428666.html
一、环境搭建：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，安...
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...
Vue.js可以灵活的控制样式我们首先随便写2个样式<style>.divCss {background-color: green;width:400px;height:400px;}.fontCss {font-size: large;color:red;}</style>直接在元素中class="divCss"这样，是老办法了，在Vue中，可以更加灵活<div id="appDiv" v-bind:class="{divCss:divFlag,fontCss:fontFlag}"> 我是Div中的文字</div><script>var v = new Vue({el: ‘#appDiv‘,data: {divFlag: true,fontFlag: false},methods: {}...
vue安装：$ npm install vue vue-cil安装：$ npm install -g vue-cli 创建webpack实例：$ vue init webpack projectNametips：（摘自https://blog.csdn.net/Marian96/article/details/73603844）①、Project name (sanfeng1)；项目名称（sanfeng1）。（确定按enter，否按N） ②、 Project description (A Vue.js project)；项目描述（一vue.js项目）。（随意输入一段简短介绍，用英文） ③、Author (sunsanfeng)；作者（sunsanfen...
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'...
vue.js最强大的，应该是自动更新DOM了。只要把变量包裹在{{ }}里面，就会在处理完毕后，直接显示处理后的结果。貌似所有变量都可以放在一个vue对象的data属性里面，然后就可以在储存函数的computed , methods 属性里面通过this关键字来使用这些变量。this 就是vue对象了。至于绑定属性，可以:link=“varHref” :style=“{height: varHeight +px}” 这种简单的操作来做。其实是v-bind的简写。甚至可以@click 代替 v-on:click 。可以...
{{xxx}} 基本的插值表达式插值表达式 使用两个大括号 {{ data中定义的数据名 }} 可以将数据插入到指定的位置这种写法不仅可以显示data属性里定义的值，也可以书写js中的表达式，可以使用methods中定义的函数等等其他数据渲染指令v-text：指定元素的内容（纯文本）v-html：指定元素的内容（解析html）v-pre：用于跳过这个元素和它的子元素的编译过程，用于显示原本的Mustache语法（{{xxx}}）v-once：只进行一次渲染，不进行响应式，...
1.Vue的介绍Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 2.Vue的安装方式1.独立版本我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。2、使用 CDN 方法以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。BootCDN（国内...
1、启动页面：index.html<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>hcmanage</title></head><body><div id="app"></div><!-- built files will be auto injected --></body> </html>其中 <div id="app"></div> 是用于挂载页面的2、启动js: main.jsimport Vue from‘vue‘//引入vue.js import App from‘./App‘//引入App.vue import route...
接着前面的内容：https://www.cnblogs.com/yanggb/p/12584237.html。事件处理使用javascript当然少不了事件处理，即使是vue也不会例外。监听事件在vue中可以使用【v-on】指令监听dom事件，并在触发的时候运行一些javascript代码。<div id="example-1"><button v-on:click="counter += 1">Add 1</button><p>The button above has been clicked {{ counter }} times.</p></div>var example1 = new Vue({el: ‘#example-1‘,data: {co...
一、起步1.安装npm install vue-router2.使用main.jsimport Vue from ‘vue‘ import App from ‘./App.vue‘ import router from ‘./router‘new Vue({router,render: h => h(App) }).$mount(‘#app‘)router.jsimport Vue from ‘vue‘ import Router from ‘vue-router‘ import Home from ‘./views/Home.vue‘Vue.use(Router)export defaultnew Router({routes: [{path: ‘/‘,name: ‘home‘,component: Home},{path: ‘/ab...
主体 实例方法归类: 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 ...