vue学习小总结

Vue配置
npm config set prefix “C:\nodejs\node_global”
npm config set cache “C:\nodejs\node_cache”
配置环境变量

npm install express -g 
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install vue -g
cnpm install -g @vue/cli

卸载：npm uninstall -g @vue/cli

查看版本以及创建项目

vue -version
vue list
vue init webpack demo

首先下载node.js要求版本在8.9以上 官网：https://nodejs.org/zh-cn/

下载完可检查在windows任务命令行里输入node -V

使用淘宝NPM镜像源下载比较快 命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli（全局安装vue-cli） 命令：cnpm install vue-cli -g

检查环境是否安装上：vue -V

在命令行里输入命令：vue init webpack vue_demo（创建名字为‘vue_demo’的文件夹）

然后进入此文件夹：cd vue_demo

然后手动下载依赖：cnpm install

最后运行程序：npm run dev

http://localhost:8080

原因（Node Sass找不到您当前环境的绑定）

npm install node-sass --save-de

原因（npm ERR! Failed at the node-sass@4.13.0 postinstall script.）node-sass 的数据源没设置

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
npm istall

（安装依赖）

npm install --registry=https://registry.npm.taobao.org

打包：

npm run build

发布 1:使用静态服务器工具包
npm install -g serve
serve dist
访问：http://localhost：5000

发布 2: 使用动态 web 服务器(tomcat)
修改配置: webpack.prod.conf.js

output: {
publicPath: '/xxx/' //打包文件夹的名称
}

重新打包:

npm run build

修改 dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
访问: http://localhost:8080/xxx

常用的生命周期方法

1. created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务
2. beforeDestory(): 做收尾工作, 如: 清除定时器

vue 生命周期分析

1. 初始化显示

• beforeCreate()
• created()
• beforeMount()
• mounted()

2. 更新状态: this.xxx = value

• beforeUpdate()
• updated()

3. 销毁 vue 实例: vm.$destory()

• beforeDestory()
• destoryed()

常用内置指令

1. v:text : 更新元素的 textContent
2. v-html : 更新元素的 innerHTML
3. v-if : 如果为 true, 当前标签才会输出到页面
4. v-else: 如果为 false, 当前标签才会输出到页面
5. v-show : 通过控制 display 样式来控制显示/隐藏
6. v-for : 遍历数组/对象
7. v-on : 绑定事件监听, 一般简写为@
8. v-bind : 强制绑定解析表达式, 可以省略 v-bind
9. v-model : 双向数据绑定
10. ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
11. v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

自定义指令

1. 注册全局指令

Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})

2. 注册局部指令

directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}

3. 使用指令

v-my-directive='xxx'

vue-resource 的使用
下载

npm install vue-resource --save

编码

// 引入模块
import VueResource from 'vue-resource' // 使用插件
Vue.use(VueResource)
// 通过 vue/组件对象发送 ajax 请求
this.$http.get('/someUrl').then((response) => {
// success callback
console.log(response.data) //返回结果数据
}, (response) => {
// error callback
console.log(response.statusText) //错误信息
})

axios 的使用
下载:

npm install axios --save

3.4. 编码

// 引入模块
import axios from 'axios' // 发送 ajax 请求
axios.get(url)
.then(response => {
console.log(response.data) // 得到返回结果数据
})
.catch(error => {
console.log(error.message)
})

vue-router
下载: npm install vue-router --save

相关 API 说明

1. VueRouter(): 用于创建路由器的构建函数

new VueRouter({
// 多个配置项
})

2. 路由配置

routes: [
{ // 一般路由
path: '/about', component: About
},{ // 自动跳转路由
path: '/', redirect: '/about' }
]

3. 注册路由器

import router from './router' new Vue({
router
})

4. 使用路由组件标签

1. <router-link>: 用来生成路由链接

<router-link to="/xxx">Go to XXX</router-link>

2. <router-view>: 用来显示当前路由组件界面

<router-view></router-view>