目录Vue2.0 【第四季】第2节 实例方法第2节 实例方法一、$mount方法二、$destroy()卸载方法三、$forceUpdate()更新方法四、$nextTick()数据修改方法Vue2.0 【第四季】第2节 实例方法第2节 实例方法一、$mount方法$mount方法是用来挂载我们的扩展的，我们先来复习一下扩展的写法。这里我们作了da0sy的扩展，然后用$mount的方法把da0sy挂载到DOM上，我们也生成了一个Vue的实例，直接看代码。<!DOCTYPE html>
<html lang="en">
<head>...
条件渲染v-if、v-show<template><div><a v-if="isPartA">partA</a><a v-show="!isPartA">partB</a><button v-on:click="toggle">toggle</button></div>
</template><script>export default {data () {return {isPartA: true}},methods: {toggle () {this.isPartA = !this.isPartA}}}
</script><style>html {height: 100%;}
</style>
点击按钮前点击按钮后v-if和v-show区别：v-if删除v-show用css控制 v-if、v-else<template><div><a...
Test1.vue<template><div class="test1"><h1>This is a test1 page</h1><Test1Top :add-person="addPerson"/><Test1Center :persons="persons":del-person="delPersonWithIndex":selected-all-persons="selectedAllPerson"/><Test1Bottom :persons="persons":del-checked-persons="delCheckedPersons"/></div></template><script>// @ is an alias to /srcimport Test1Top from ‘@/components/Test1Top.vue‘;
import Test1Center...
<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....
我们访问项目都是在浏览器输入 http://localhost:8080/#/打开一个命令行窗口，获取当前机器的内网IPwindow输入：ipconfigmac输入：ifconfig得到自己的内网ip后，按说输入 http://192.168.0.xxx:8080 一样可以访问到项目，但是却报错，显示无法访问。这是因为我们前端的项目，是通过 webpack 的 dev server启动的，但是 webpack 的 dev server 默认不支持通过IP的形式进行页面的访问。所以我们需要把它默认的配置项做一个修改。打开...
项目首页如上图所示：先说说我的想法吧，此页面共包含title，tabs（选项栏），materchart（仪表盘），loading（等待加载提示），btns（按钮）四个组件，1、表盘组件所用到的数据由首页以属性的方式传递，因为数据从服务器端是异步获取，因此直接写入请求数据会出错，因为在页面渲染时异步请求未完成，所以此处加入了loading模块，在请求的过程中显示loading状态，等待请求完毕时更改v-if的值，来达到异步显示图表的目的。这里先简单...
vue2x项目调优1.项目优化策略1.1. 加进度条动画1.github搜索nprogress2.安装nprogress$ npm i nprogress -S
3,配置main.js// 1、导入nprogress
import NProgress from ‘nprogress‘
import ‘nprogress/nprogress.css‘2、使用,在请求开始的时候
axios.interceptors.request.use((config) => {NProgress.start()config.headers.Authorization = window.sessionStorage.getItem("token")// 在最后必须 return configreturn config
...
vue中组件的引用嵌套通过export import语法链接 Nodejs中的 export importP1.jsexport default {name: ‘P1‘
} index.jsimport P1 from‘./P1.js‘alert(P1.name);P1.name的内容就是P1.js文件中name的值‘P1‘/opt/wks/vue/01_webpack/node_modules/.bin/webpack-cli index.js --output build.js$ cat index.html
<html><head><meta charset="utf-8"></head><body><script type="text/javascript" src="build.js" charset="utf-...
vue在插入、更新或移除dom时，提供了多种不同方式的应用过度效果。包括以下工具： 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库，如animate.css 在过渡钩子函数中使用javascript直接操作DOM 可以配合使用第三方javascript动画库，如Velocity.js一、单元素/组件的过渡Vue提供了transition的封装组建，在下列情形中，可以给任何元素和组建添加进入/离开过度 条件渲染（使用if） 条件展示（使用v-...
1.在webpack.base.conf.js添加如下配置 var webpack=require("webpack")plugins: [
new webpack.optimize.CommonsChunkPlugin(‘common.js‘),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
] 2.第二步 "jquery":"3.2.1" 3.第三步npm install -save 4.第四部在index引入jquery原文：http://www.cnblogs.com/zry2510/p/6919675.html
main.js文件添加如下：new Vue({ router, render: h => h(App),data: { eventHub: new Vue() }}).$mount(‘#app‘); 父组件：监听事件:this.$root.eventHub.$on(‘cart.add‘, (target) => { this._drop(target); });子组件：触发事件：this.$root.eventHub.$emit(‘cart.add‘, event.target); 原文：http://www.cnblogs.com/jhuang-com/p/6810283.html
<!DOCTYPE html>
<html>
<head><title>vue</title><!-- <script src="./vue.js"></script> --><script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body><div >{{msg}} {{num}}<div v-html="wocao"></div><div v-text="wocao"></div><div v-on:click="handleClick">{{content}}</div><div v-bind:title="title">title</div><input type="text" :value="neirong"> <!-- v-bind:可简写为: -->...
config 目录下好像都不需要相关配置,但是package.json里面下面的依赖必须有"css-loader": "^0.28.11","less": "^3.0.4", "less-loader": "^4.1.0","style-loader": "^0.21.0","vue-style-loader": "^3.0.1", 使用<style lang="less"> 还有一种使用sassconfig.base.js{ test: /\.sass$/, loaders: [‘style‘, ‘css‘, ‘sass‘] },css-loader,vue-style-loader,"sass-loader": "^6.0.7", 使用<style lang...
一、什么是懒加载 顾名思义，懒加载就是随用随加载，什么时候需要就什么时候加载。 二、为什么需要懒加载 在单页应用中，如果没有使用懒加载，webpack打包后的文件会很大，这时进入首页时的加载时间会很长，不利于良好的用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载所用的时间。 三、路由中懒加载机制的体现 const OldPhone = resolve => requ...
deep，默认值是 false，代表是否深度监听。immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。computed: {btnObj() {const { sign_img, check } = thisreturn {sign_img,check}}
},
watch: {btnObj: {handler: function(newVal,oldVal) {if(!!this.sign_img && this.check){this.submit_flag = truethis.sign_flag = ‘1‘}else{thi...
