入门vue,以及常见的知识点总结
1 安装（安装环境需要在node环境下，如果没有安装node.js请到官网安装）
1）直接打开cmd（此时不需要进入项目）
2）npm -v（查看版本，需要3.0版本才可以，如果低于3.0可以在安装淘宝镜像之后执行cnpm install npm -g升级版本即可）
3）npm install -g cnpm --registry=https://registry.npm.taobao.org（安装淘宝镜像速度更快 ）
4）cnpm install vue（安装vue，如果安装vue-cli脚手架的话可忽略此步，因为vue-cli会帮我们安装好）
5）cnpm install --global vue-cli(初学者建议安装vue-cli脚手架，只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目)
6）vue init webpack my-project （yes）（初始化并创建项目my-project，一直按yes即可；此时你在什么路径下创建的项目也在此目录下）
7) cd my-project（进入项目）
npm install (生成node-modules依赖)
npm run dev(开发模式下运行，默认端口号8080打开)
npm run build(生产环境打包,需要把config/index.js文件夹下的build的改为assetsPublicPath: './',才能打包，不然会空白，打包之后的文件dist以放在ngnix的html低下，然后修改配置文件 ngnix.conf的localhost，端口号，还有
location / {
root html/dist;
index index.html index.html;
}
)就可以代理查看项目啦
安装以上命令时可能会有报错的情况，这个时候可以看一下报错内容，一般是缺少某个内容或者是版本不对导致的，按照报错内容进行改正即可（ESLint的作用是检查代码错误和统一代码风格的 ，为了规范，建议安装使用）
2 项目目录
安装完毕后项目中默认产生了一些文件夹，代表的意思：
build : 里面是一些配置文件，webpack.dev.config.js（开发模式下使用），webpack.prod.config..js(生产模式使用)，webpack.base.config.js(基本配置文件)这些可以点进去看一看基本内容了解一下
index.html ：项目总入口html文件
src : 开发模式下我们写代码的地方，这里我的代码结构为
线下开发目录
1）assets放一些css，js，img，fonts文件；components放组件；router、index.js是对路由的配置；
2）main.js : 项目js入口文件，引入vue以及总组件，实例化组件
new Vue({
el: '#app', //挂载的元素对应index,html页面的id
components: {App},//注册组件
template: '<App/>'//加载的模板，将el标识的元素替换成<App></App>,APP是此实例注册的App组件
})
3）App.vue: 总的组件入口
所有的组件都在这里，包括三部分
<template></template> <script></script> <style></style>
其中template是模板，将代替#app这个元素的内容，注意里面必须有一个最外层的div或者其他标签包裹不然会报错，此时我的最外层用app1包裹，例如
模板
script标签里面，以es6语法，写引入的组件，例如
import : 引入你所需要的东西
export default : 导出你需要调用的内容
components : 引入的子组件，然后在html中使用如<Header></Header>
import './assets/lib/common.css'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Header,
Footer
}
}
当然以上export default{}中也可以加入其他字段如ｍethods，data等
3 基础知识点
接下来是一些基础知识点总结：
1）data字段必须是一个函数 es6写法为 data （）{return {}} 原因 ：
因为组件可能被用来创建多个实例。如果 data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象，如果是 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
2）var const let 什么时候用（es6）？
const一般用来定义常量，let变量（无法重复声明覆盖），var（能重复声明变量），所以一般不变的内容用const，变量用let，var少用
3）computed methods 的联系和区别
computed计算属性会依赖缓存，只有相关依赖发生改变时候才会重新求值，也就是说data属性中的相关内容没有发生改变的话，访问computed将不会执行此函数，methods则会重新渲染，调用该函数
综上所述，当有一个性能开销比较大，需要大量的计算或者遍历一个极大的数组时候可以用computed，缓存也有自己的缺点：
意味着下面的计算属性不会再更新，因为Date.now()不是响应式依赖：
computed: {
data: function () {
return Date.now()
}
}
总之：数据量大，需要缓存用computed，每次需要重新加载不需要缓存时候，用methods
4)生命周期主要内容
主要包括8个状态
beforeCreate : $data数据与$el结点都是undefined不可用
created：$data可用，但是DOM没生成，所以$el为undefined
beforeMount:即将挂载，$el不再是undefined成功关联到指定的dom结点，但是此时还没有成功渲染data中的数据
mounted ：挂载完毕，数据已经成功渲染
beforeUpdate：当我们修改data时候，vue会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate钩子，检测到我们要修改数据的时候，更新渲染视图之前会触发钩子beforeUpdate，此阶段视图并未渲染更新
updated：视图已经更新
beforeDestroy：调用实例的destroy()方法可以销毁当前组件，在销毁前，会触发这个钩子
destroyed：此时实例和其他实例的关联已经被清楚，他与视图之间也被解绑
5) 一些常见指令总结
v-bind:xx=""简写为:xx=""
v-on:click=""简写为@click
v-if(dom结点是否存在)，v-show(display)
v-for="todo in todos"(注意key的使用，key是必须的v-bind:key,当v-for与v-if同时使用v-for权重更大)
v-once执行一次的插值
v-html=""解释为html代码
6）父组件传递数据给子组件 props的使用
当props：[]里面的内容使用驼峰命名（不支持短线分割式命名）的时候，父组件使用它时应该改成短线分割式命名，props是单向绑定，父组件属性变化会传导给子组件，反过来不会，案例如下
父组件
父组件数据
子组件内容
7）子组件使用$emit触发父组件自定义事件，案例如下
父组件数据和方法
父组件
子组件
7）路由router(建议参考https://www.cnblogs.com/nangxi/archive/2017/08/11/7345109.html)
配置路由文件 router/index.js
路由使用 import Vue from 'vue'
import Router from ‘vue-router’（安装vue-router之后引用进来）
Vue.use(Router)
router-link router-view使用
8）模拟json数据，用v-resource获取（官网已经不维护v-resource，建议使用axios）
对build/webpack.dev.conf.js文件进行配置
//增加express,利用express书写接口，前端去调用接口
const express = require('express')
const app = express()
//加载本地数据文件
var appData = require('../src/assets/js/genus_percentage.js')//获取json对象
var goods = appData.percent_yhj //获取字段名
var apiRoutes = express.Router()
//为了统一管理API接口，一般要在请求的路由前面加上'/api'，来表明这个路径是专门来提供api的
app.use('/api',apiRoutes)
接下来就可以通过vue-resource引入模拟的json数据(vue文件)
<ul>
<li v-for="items in goods">我的百分数为{{items.percent}}</li>
</ul>
mounted () {
this.getData()
},
methods: {
getData: function () {
let _this = this
this.$http.get('/api/good',{}).then(response => {
_this.goods =repsonse.body.data
}, response => {
console.log(response)
})
}
}
9)axios的使用以及注意事项
基本使用：
安装axios,然后import axios from 'axios'
Vue.proptotype.$ajax =axios//其他组件可以通过this.$ajax直接使用，修改了vue对象的原型属性
为了兼容ie9+以上的建议安装使用es6-promise
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
然后组件中这样写
mounted () {
this.$ajax({
methods: 'get',
url: '/api/goods',//请求的本地地址，
data: {
}
}).then(response => {
let _data =response.body.data
}).catch(function (err) {})
}
注意事项：
axios不支持Vue.use(axios)，应该使用Vue.prototype.$axios =axios，在其他组件可以用this.axios调用使用
10）什么是跨域？解决跨域问题
浏览器具有同源策略，同源指的是域名，协议和端口如果不相同就要跨域了
跨域的方法有：
10.1）jsonp动态添加script标签来调用服务器提供的js脚本,支持get不支持post
script标签的src属性是可以跨域的,传递一个callback参数给跨域服务端，但是怎么让远程js知道他调用的本地函数叫什么名字呢？办法如下
跨域服务器 提供的js脚本动态生成，这样调用者可以传一个参数过去告诉跨域服务器“”“我想要一段调用xxx函数的js代码，请你返给我”，于是跨域服务器就可以按照客户端的需求来生成js脚本并相应啦
10.2）vue 开发环境下跨域,配置config/index.js里面的proxyTable:{},
dev: {
加入以下
proxyTable:{
'/api': {
target:'http://10.00.100.100:8002/',//设置你调用的接口域名和端口号，别忘记加http
changeOrigin: true,//为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin
pathRewrite:{
'^/api':'/' //用‘/api’代替target的地址，后面组件调用接口时可以直接用api代替，比如我要调用http://10.00.100.100:8002/user，可以直接写'/api/user'即可
}
}
}
}
10.3）生产环境下解决跨域问题：
10.3.1）后端配置服务器cors，在响应头添加Access-Control-Allow-Origin
10.3.2）用jsonp,axios不支持jsonp所以要下载jsonp包才可以
npm install jsonp --save-dev(安装)
import jsonp from 'jsonp'（引入）
使用例子：
getList: function () {
jsonp(url, null, (err, data) => {
if (err) {
console.error(err.message);
} else {
if (data.list.length > 0) {
console.log(data);
}
}
})
}
10.3.3）ngnix配置反向代理，代理到api服务器
11）vue router怎么传参
params: /router1/:id,/router1/123,这里的id叫做params
query: /router1?id=123,/router1?id=456,这里的ID叫做query
query不设置也可传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种情况
this.$router.push()方法中path不能与params一起使用，否则params无效path与query一起（在目标页面通过this.$route.query获取参数），params与name一起（目标页面通过this.$route.params获取参数）
12）用的同一个组件时，路由参数变化，但是并不会刷新数据怎么办？
例如从user/foo导航到user/bar，原来的组件实例会被复用，因为这两个路由渲染同个组件，比起销毁再创建，复用显得更加高效，不过这也意味着组件的生命周期钩子不会再调用，也就是路由参数发生了变化，但是组件还是那个组件，此时并不会刷新数据，不过官网提出了相应的解决方案：复用组件时候，想对路由参数的变化做出响应的话，可以简单的watch $route对象
watch :{
'$route': (to, from) {
//对路由变化做出响应...
}
}
还有一个新的方案，我还没有实践，大家可以试一试：
也就是key,key是来阻止服用的，vue为你提供了一种方式来声明这两个元素是完全独立的，不要复用他们，只需要添加一个具有唯一值的key属性即可，所以给<router-view></router-view>添加一个key,如下
<router-view :key="key"></router-view>
computed: {
key () {
return this.$route.name!undefined?this.$route.name+new Date():this.$route+new Date()
}
}
网友评论