1. Vue 项目初步总结（在项目中遇到的问题以及解决办法）
注意点：建议不要使用ESLint 后面选No 就ok 大神跳过此处，否则在项目中只要编码格式有问题就会一直拨错！
1、推荐使用Visual Studio Code工具打开testproject文件夹即可进行开发。
（1）（打开终端快捷键 control+~）在终端里面输入npm install命令安装依赖包， npm install 执行可以进行vue已经vue的插件安装，在第三步的时 候，已经初始化了项目，并且在 package.json 里面已经有相关配置，所以在这里可以直接安装；
（2）终端执行命令npm run dev 运行，然后览器输入localhost://8080即可看到vue初始界面
补充：使用vue 框架时尽可能的不要使用jq，但是有些地方确实需要使用jq的话下面是在vue中引入jq的方卜饥法
1：首先安装jquery
npm install jquery --save
2：在webpack.base.conf.js里加入
var webpack = require("webpack")
3：在mole.exports的最后加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
4：在main.js中引入
import $ from 'jquery'
5.最后 npm run dev就可以了
首先给图片地址绑定变量
在script中设置变量
//方法1.直接将图片引入为模块
require imgUrl from "../assets/test.png"
//方法2.将imgUrl放在数据里
data(){
return {
imgUrl:require("../assets/test.png")
}
}
//方法3.在生命周期函数中设置
data(){
return {
imgUrl:""
}
}
created(){
this.imgUrl = require("@/"+urlTemp)
}
传送门：https://www.cnblogs.com/aimiss/p/7396986.html
传送门：https://www.json.cn/
基于 Promise 的 HTTP 请型谨返求客户端，可同时在浏览器和 node.js 中使用
在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
自动转换 JSON 数据
客户端支持保护安全免受 XSRF 攻击
使用 bower:
$ bowerinstallaxios
使用 npm:
$ npminstallaxios
例子
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (response) {
console.log(response);
});
传送门：https://www.jianshu.com/p/e36956dc78b8；
一、污染是如何产生的？
得益于 Vue-loader，在 Vue 中可以使用类似于 Web Component 的组件化写法, ，在大多数情况下，我们希望组件间定义的样式是相互隔晌猛离的，在 Weex 当中的确如此，组件天生隔离，可是在 Vue 当中，运行的载体还是浏览器，所有的样式类还是会通过 style 标签插入头部，影响全局，交叉污染
二、增加 Scoped 标识
依然是 Vue-loader，通过为组件中的 style 标签增加一个 scoped 标识，Vue-loader 在编译的过程中会为组件每一个元素节点增加 scopeId 作为属性，同时为所有的样式类加上属性选择器 scopeId，从而达到隔离的效果。
传送门：https://www.jb51.net/article/122535.htm
假如，我们在A组建中声明了一个定时器进行倒计时此时 我们在定时器中一直打印时间戳，此时我们通过路由跳转到下一个组件页面，按照正常理论来说，A组件在跳转后整个组件就会被销毁，到达B组件时A组件已经没有了。
但是在我们有定时器的情况下 此时跳转过后 定时器依然会存在。所以我们要在页面销毁时候将当前页面的定时器clear掉。
格式转换
服务器给的格式是 2016-6-16 10:50:00 正则替换成 2016/6/16 10:50:00 即可；
var time = '2016-6-16 10:50:00'
var times = time.replace(/-/g,"/"); //2016/6/16 10:50:00
完美解决。
原因：因为当我们切出到任务管理器后台时，此时在客户端中的浏览器里面，浏览器就会终止定时器因为消耗性能，当我们返回的时候此时倒计时才会恢复正常。
解决：h5有一个监听浏览器页面是否隐藏的事件 visibilitychange 两种状态 hidden和visity hidden时候页面切出此时我们要将定时器销毁，visity时候再次恢复定时器。
解决 this.$router.push(0)
原因：因为低版本安卓不支持es6
（1）安装依赖包
> cnpm install --save-dev babel-polyfill 或者 > npm install --save-dev babel-polyfill
（2）webpack配置修改
/* 添加 babel-polyfill */
entry: {
app: ["babel-polyfill", "./src/main.js"]
},
但是：我的项目上面的操作都进行了，也就是对es6进行了转化但是失败了。所以我就白有关es6的我写的东西都改掉了。结果就好了。
传送门：https://blog.csdn.net/qq_16559905/article/details/60755174
总结：初入前端，继续踩坑。
2. Vue基本用法
Vue:渐进式javascript框架
声明式渲染-->组件系统-->客户端路由-->集中状态管理-->项目构建
Vue的基本使用
Vue的两种挂载方式:
模板语法:
1.插值表达式
存在闪动问题:快速刷新浏览器时,有时会氏橡显示{{xxx}}内容,然后替换为要显示的值.解决的办法-->指令(先隐藏,替换好值之后再显示)
2.指令(指令的本身就是自定义属性)
以v-开头 例如v-cloak
html:
js
效果:
使用v-cloak
html:
css:
效果:
在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。
双向数据绑定:v-model
2.MVVM私享
M(model)
V(view)
VM(view-model)
mvc,mvp和mvvm的区别:
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
3.事件绑定
事件冒泡和事件捕获
3.1v-on指令
示例:
效果:
3.2事件函数的调用方式
html:
js
3.3事件函数参数传递
普通参数和事件对象
3.4事件修饰符
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,如果接受到内部羡模的冒泡事件传递信号触发,会忽略兄核缓掉这个信号
.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。
html:
js:
e.prevent等同于
event.preventDefault()
3.5按键修饰符
在Vue中可以通过 config.keyCodes 自定义按键修饰符别名
示例:Vue.config.keyCodes.aaa = 65;
自定义按键:
4.属性绑定
v-bind指令:被用来响应地更新 HTML 属性
html:
js:
效果:
5.v-model的实现原理分析
①
等价于
②
第一种实现只是后面两种写法的语法糖.
当在input元素中使用v-model实现双数据绑定，其实就是在输入的时候触发元素的input事件，通过这个语法糖，也能够实现父子组件数据的双向绑定.
父组件:
子组件:
6.样式绑定v-bind:class
1️⃣class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
①动态切换多个class
html
css
js
效果:
②样式绑定到对象
③数组语法:
默认class会被保留合并
2️⃣style
三元表达式:
7.分支循环结构
7.1
v-show与v-if的区别:
v-show:
v-if:
1.原理
2.应用场景
7.2 循环结构
为什么需要独一无二的key的简单示例:
效果:
点击查看更多:
v-for:需要key的原因:
v-for遍历对象