逐步认识VUE

环境配置

1. 安装node.js

   （1）官网：https://nodejs.org/zh-cn/下载并安装

   （2）利用node -v和npm -v可以查看到版本号即安装成功

2. 安装淘宝加速器

   （1）命令：npm install cnpm -g

   （2）利用cnpm -v可以查看到版本号即可

3. IDEA安装vue插件

导入vue

1. cdn方式导入

2. npm安装

   # 最新稳定版
   $ npm install vue
   

基本语法

• v-bind绑定参数，意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。当通过浏览器的console页面的命令修改message的参数值时，页面上的提示可以同步进行修改。

    
    


你好啊 VUE



   
       鼠标悬停试试！
   

• v-if v-else-if v-else 当通过浏览器的console页面的命令修改type的参数值时，页面上的展示信息会同步进行显示type经过if-else判断之后的结果。

    
    


你好啊 VUE


   
A
   
B
   
C
   
D

• v-for 遍历数组信息并逐条显示在前台

    
    


你好啊 VUE


  

    {{item.message}}---{{index}}
  

• v-on绑定事件

    
    


你好啊 VUE


  click Me

• v-model:参数 双向绑定。无论是前台修改还是通过命令修改参数的值，前后台的参数都会同步修改。

    
    


你好啊 VUE


  下拉框：
    
        --请选择--
        A
        B
        C
    
    value:{{selected}}

• 引入组件的概念component

    
    


你好啊 VUE


  

• Axios实现异步通信

    
    

    


你好啊 VUE


    
{{info.name}}
    
{{info.address.street}}
    点我

data.json

{
  "name":"夜月",
  "url":"https://www.cnblogs.com/shenyeanyue-study/",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "春华街",
    "city": "天津",
    "country": "中国"
  },
  "links": [
    {
      "name":"博客园",
      "url": "https://www.cnblogs.com/shenyeanyue-study/"
    },
    {
      "name": "csdn",
      "url": "https://blog.csdn.net/weixin_47587613?type=blog&spm=1001.2100.3001.5348"
    }
  ]
}

• 计算属性computed，可以理解为缓存。计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

    
    

    


你好啊 VUE


    
currentTime1 {{currentTime1()}}
    
currentTime2 {{currentTime2}}

• 插槽slot 实现动态的渲染效果

    
    


你好啊 VUE



    
        
        
    

• 自定义事件 组件中用this.$emit('remove',index)调用vue中的function

    
    


你好啊 VUE



    
        
        
    

第一个VUE-CLI程序

安装vue-cli

? （1）命令：cnpm install vue-cli -g

? （2）利用vue list可以查到信息即可

初始化一个工程

? （1）cmd管理员方式打开

vue init webpack myvue

  （2）遇到选项一直选NO即可

运行

? 执行命令

npm run dev

展示（浏览器中访问该url即可显示初始页面）

WEBPACK

创建项目

新建一个空白的文件夹用IDEA打开即可

创建目录models

1. 新建hello.js暴露一个方法

//暴露一个方法
exports.sayHi = function (){
    document.write("
夜月学VUE
")
}

2. 新建main.js调用暴露的方法hello.js

var hello = require("./hello");
hello.sayHi();

webpack打包成bundle.js

1. 项目下新建webpack.config.js(配置打包的参数)

module.exports = {
    //入口
    entry:'./modules/main.js',
    //输出路径
    output:{
        filename:"./js/bundle.js"
    }
}

2. 执行打包命令

webpack
或
webpack --watch //可以监听程序的变化实时打包

项目目录下新建index.html引用bundle.js

展示效果

VUE-ROUTER

安装vue-router

cmd管理员打开并进入到工程目录，执行命令

npm install vue-router --save-dev

创建要展示的单个组件

Content.vue

Main.vue

Yeyue.vue

配置路由

在项目目录新建router目录用于存放路由配置，新建index.js配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from "../components/Content";
import Main from "../components/Main";
import Yeyue from "../components/Yeyue";
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径
      path:'/content',
      name:Content,
      //跳转的组件
      component:Content
    },
    {
      //路由路径
      path:'/Main',
      name:Main,
      //跳转的组件
      component:Main
    },
    {
      //路由路径
      path:'/Yeyue',
      name:Yeyue,
      //跳转的组件
      component:Yeyue
    }
  ]
})

App.vue中配置视图

main.js中导入路由并配置路由

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里边的路由配置
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: ''
})

运行

npm run dev

展示

VUE + element-ui

初始化项目

vue init webpack hello-vue

安装vue-router

npm install vue-router --save-dev

安装axios

npm install axios

安装element-ui

（1）npm安装

npm i element-ui -S

（2）cdn引入

main.js中引入element-ui

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

安装依赖

npm install

安装sass加速器

cnpm install sass-loader node-sass --save-dev

运行

npm run dev

修改原始项目

1. 新建VUE组件(./views)

• Login.vue

• Main.vue

• NotFound.vue(当访问路径不存在时报404)

2. 新建嵌套路由组件

• Profile.vue

• List.vue

3. 修改路由配置（./router/index.js）

import Vue from 'vue';
import VueRouter from "vue-router";

import Main from '../views/Main'
import Login from '../views/Login'
import NotFound from "../views/NotFound";

// 用于嵌套的路由组件
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'

Vue.use(VueRouter);

export default new VueRouter({
  mode:'history',
  routes:[
    {
      //首页
      path:'/Main',
      name:Main,
      component:Main,
      // 配置嵌套路由
      children: [
        {
          path: '/user/profile/:id',
          name:UserProfile,
          component: UserProfile,
          props:true
        },
        {
          path: '/user/list',
          component: UserList
        },
        {
          //路由跳转
          path: '/goHome',
          redirect:'/Main'
        }
      ]
    },
    {
      //配置Login.vue
      path:'/Login',
      name:Login,
      component:Login
    },
    {
      //配置404页面
      path:'*',
      component:NotFound
    }
  ]
})

4. App.vue添加展示视图

5. Main.js导入依赖并配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

6. 运行

npm run dev

7. 展示

遇到问题

Vue报错Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.解决方案

解决方案：

这个问题是因为Sass的版本过高导致，所以根据提示将版本改为对应的版本就可以了，我这里是改为4.0.0版本。然后，cnpm install重新安装一下依赖即可。