vue初体验

由于开发需求，需要在原有的pc端基础上写=开发一套移动端系统。最后选择使用vue+vant比较成熟的组件库。记录一下学习的经历。
一．搭建环境
1.安装node.js
地址：https://nodejs.org/zh-cn/
安装完成后可以通过 npm -version 查看版本来确认是否安装成功
2.安装 淘宝镜像
操作：打开cmd 输入以下指令

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

3.安装 webpack

cnpm install webpack webpack-cli -g

4.安装 构建工具vue-cli

cnpm install --global vue-cli

安装完成后可以通过 vue --version 查看版本来确认是否安装成功

5.安装 css预编译工具stylus (随意)

npm install stylus

二．构建项目
1.构建vue项目
进入你要创建项目的目录 打开cmd窗口

输入命令

然后见到这样的页面

然后进入项目目录下
输入命令
Cnpm install
cnpm run dev 启动项目

看见这个就说明构建成功

三．相关语法
1.数据的渲染
在vue原始中的data 内定义变量

data(){
　 retrun {
　　　newMsg: “刘毅”
　}
}

在当前的页面中显示

效果

2.给元素绑定属性
使用v-bind

webUrl 在data中定义

data(){
　 retrun {
　　　newMsg: “刘毅”,
　　　webUrl: “http://www.4399.com”
　}
}

3.事件绑定
v-on:click

在method 中定义方法

methods:{
　　showMsg: function(){
　　　　this.newMsg: “刘小毅”
　　}
}

其他可以绑定的方法还有
mouseleave
submit
等等
4.数据双向绑定
在标签中 添加v-model


随着input框中的 数据变化
Data 中vmodel 的数据也在变化
5.属性驱动样式
给dom元素添加样式

通过v-bind:class 来添加样式 可以添加多个

6.判断语法v-if和 v-show
v-if 和 v-show 都是显示dom元素显隐的 同样也是属性驱动
区别就是v-if 是直接干掉dom元素 而v-show 只是隐藏
7.属性监听

监听这个vmodel

watch:{
　　vmodel:function(value){
　　　　　console.log(value);
　　}
}

添加watch

可以监听到每一次属性的变化
8.页面传参
跳转页面时传递数据

注册一个点击事件

chuanzhi: function(){
　　console.log(‘页面传值’);
　　this.$router.push({path: ‘/liuyi’, query: {zhuanzhishuju: this.chuanzhishuju}});
}

通过$router.push() 方法中的 query传值

第二种 通过params来传值

this.$router.push({ name:“liuyi”, params: this.chuanzhishuju })

这一种传值的方式 不能通过 path 找到目标页面 只能通过name属性跳转
所以使用时 必须要在route中配置路由的name

9.组件及组件之间传参
调用组件

在helloWorld中调用liuyi

impor liuyi from ‘…/components/liuyi’
export default{
　　name: “HelloWorld”,
　　components: {
　　　　LIUYI: liuyi
　　}
}

在helloWorld中使用import liuyi
并在 components中 添加liuyi

就可以在helloWorld中使用标签来引用liuyi的内容

父组件给子组件传值

data(){
　 retrun {
　　　newMsg: “刘毅”,
　　　webUrl: “http://www.4399.com”,
　　　liuyiData: “这是父组件中的数据”
　}
}

在父组件中定义一个数据

绑定到父页面的 子组件的一个属性中
在子组件页面中接受（注意名称对应）

props: [‘superData’],
　　data: function () {
　　　　return {
　　　　　　counter: this.superData
　　　　}
}

10.生命周期函数（钩子函数）
beforeCreate vue实例创建之前
created vue实例创建完成后
beforeMount 元素挂载前
mounted 元素挂载后
beforeUpdate 元素更新前
updated 元素更新后
beforeDestroy vue实例销毁前
destroyed vue实例销毁后

11.路由router
Vue-router其实是一个组件 但是一般会在构建项目时就安装
如果没有选择安装的话 请自行安装
在package.json中

使用vue-router
在main.js中



接下来就可以在url中添加后缀进行页面跳转
等等
路由跳转
使用router-link 标签

使用js跳转
在methods中

或者

Push方法和replace有区别
Push方法会在history栈中添加 返回的话会返回到上一个页面
Replace则不会

路由守卫

在main.js中

To 代表将要去的路由
From 代表从哪个路由来的
Next是一个方法 可以通过 false 来阻止路由跳转

Router相关文档
https://router.vuejs.org/zh/

四．常用组件
1.跨域请求（fetch/axios/proxy）
这里使用axios
首先 使用

npm install axios
安装成功后会在 node-modules中显示

解决跨域问题

进入config文件下的 index.js 文件

做如下修改

进入main.js 使用 axios

刷新页面 数据获取成功

2.VUEX
安装vuex

npm install vuex --save

创建store 文件夹

编写 store .js

在main.js中 引入这个store.js文件

在别的组件中 使用 vuex的数据

Mutation的使用
在store.js中

在组件中调用

使用commit方法提交
Action的使用
在store.js中

在组件中