Vue

Vue入门

步骤

• 导入vue.js

• 创建Vue实例对象，并绑定el和data属性

  var app = new Vue({
      el: "#app",
      data: {
          message:"hello word!",
          name:"张三"
      }
  })
  

• 用模板语法将数据渲染到页面中去

  
      {{ message }}
      
  
      {{ name }}
  
  

el-挂载点

• el表示Vue对象的作用范围
• 使用的选择器与css选择器一致 （不能挂载到html，body标签上）
• Vue建议使用ID选择器进行挂载

data-数据对象

• 用于定义页面中使用到的数据
• 渲染复杂类型的数据时，遵守js的规则即可

示例代码：

    {{ message }}
    
{{ person.name }} : {{ person.age }}
    

        
{{ city[0] }}
        
{{ city[1] }}
        
{{ city[2] }}
    

Vue指令

• v-text:设置标签的文本值

  		//将数据对象中的值设置为标签的文本值
  

  		//可以支持表达式运算 +4
  

• v-html：用法同上，当内容为html时，会被解析渲染。

• v-on：为元素绑定事件

  1. 方法定义在vue对象的methods属性中

     methods:{
         fun:function () {
             alert("这是一条提示信息")
         }
        }
     

  2. 在元素中通过v-on绑定事件

     v-on:可以简写为@

  重点：在vue中想要改变页面中的值，通过改变data属性中的值来改变，在vue对象中，通过this关键字来获取对象中的属性

  var vue = new Vue({
      el:"#app",
      data:{
        city:"北京"
      },
      methods:{
          fun:function () {
              alert("这是一条提示信息")
          },
          changeCity:function () {
              if (this.city === "北京"){
                  this.city = "重庆"
              }else {
                  this.city = "北京"
              }
          }
      }
  })
  

vue中常用的事件总结：

事件修饰符：vue中可以对触发的事件进行修饰，达到更加具体的事件效果

事件修饰符类别：

	//对键盘事件的回车进行修饰

• v-show:根据表达式的真假，判断元素是否显示。（通过是否添加display: none样式操作）

• v-if:根据表达式的真假，判断元素是否显示。（直接操作dom元素）

• v-bind:为元素绑定属性

  	//imgSrc：data对象中的图片地址
  

  v-bind:可以简写为：

  为元素绑定class属性写法

  //active：为元素添加的样式 isActive：样式是否生效的布尔值
  内容
  

• v-for:根据数据生成列表结构

  // arr：数组数据（被循环的数据），item：每次取到的数据，index：循环的角标
  
      {{ index+1 }}----{{ item }}
  
  
  //对象数据通过.属性 调用属性的值
  {{ item.name }}:{{ item.age }}
  
  
  methods:{
              add:function () {
                  this.persons.push({name:"赵六",age:42})	//添加数据
              },
              remove:function () {
                  this.persons.shift()	//移除数组最左边的元素
              }
          } 
  

• v-model：获取和设置表单元素的值（双向数据绑定）

//通过与data中的message数据双向绑定，数据或者表单中的值会一起改变

? 注：splice方法：删除功能，第一个参数为第一项位置，第二个参数为要删除几个。arr.splice(1,5);

Vue组件

• 含义：将复用性高的内容，编写为模板，通过标签的形式引入。

• 写法：

  • 遍历出的item值通过 v-bind指令和data双向绑定，模板中可以用data取到遍历出的值

• 组件命名规则

  帕斯卡命名方式：ComponentName
  短横线分隔：component-name
  使用自定义元素的时候，两种命名方式都允许，但是当应用到dom的时候，应该使用短横线分割命名方式

  （把组件写为标签时，用短横线分割）

钩子函数

• 含义：在vue的不同生命周期过程中，到达某个阶段，系统会自动调用的方法。

• vue有8种生命周期函数：

  钩子函数	触发的行为	在此阶段可以做的事情
  beforeCreadted	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。	加loading事件
  created	vue实例的数据对象data有了，$el还没有	结束loading、请求数据为mounted渲染做准备
  beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。	..
  mounted	vue实例挂载完成，data.filter成功渲染	配合路由钩子使用
  beforeUpdate	data更新时触发
  updated	data更新时触发	数据更新时，做一些处理（此处也可以用watch进行观测）
  beforeDestroy	组件销毁时触发
  destroyed	组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	组件销毁时进行提示

Axios通信

• 解决vue闪烁问题

  • 在vue挂载的标签上，添加v-clock属性

  • 给v-clock属性添加样式

    [v-clock]{
        display: none;
    }
    

• 何时通过axios请求数据

  在mounted钩子函数中使用

  mounted(){//钩子函数 支持链式编程 ES6支持语法
      axios.get("../data.json").then(response=>(
          this.info=response.data
      ));
  }
  

• 数据通过data()方法获取 返回的info属性与请求结果中的data绑定

  data(){
    return {
        info:{
            name:null,
            url:null,
            address:{
                street:null,
                city:null,
                country:null
            }
        }
    }
  }
  

计算属性

• 含义：在计算属性中，计算方法的结果，可以当做属性使用。

• 用法：

  // 将三门学科分数的和，计算后存入sum属性中，后续可以作为属性使用
  computed:{
      sum:function () {
          return this.language + this.math + this.english;
      },
      avg:function () {
          return this.sum/3;
      }
  }
  

插槽slot

• 含义：使用标签在组件中占位置，其他组件在使用该组件的时候，会将对应的内容填充到该位置。

• 入门使用：

  • 子组件Children

    
      
    这是子页面的标题
      
    
    

  • 父组件Parents

    
      
    这是父页面传入的内容
    
    

• 具名插槽：给留出的插槽通过name属性进行命名，在使用时，可以通过名称填充到指定的位置。

  • 写法：

    • 子组件Children

      
        
        
      这是子页面的标题
        
      
      

    • 父组件Parents

      
        
      这是在子页面标题上方的插槽
        
      这是在子页面标题下方的插槽
      
      

• 作用域插槽：可以进行数据传输的插槽。

  • 写法：

    • 子组件Children

    • 父组件Parents

Vue脚手架环境搭建

• 安装Node.js

  • 下载地址：http://nodejs.cn/download/
  • 安装结束后在，在命令行窗口使用：node -v 和 npm -v 查看是否安装成功。
  • 安装淘宝镜像加速器（不是必须）：npm install cnpm -g

• 安装vue-cli 脚手架

  • cmd命令：cnpm install vue-cli -g
  • 使用vue list 命令能显示出模板信息，则表示脚手架安装成功。

• 创建vue项目

  • 在cmd窗口进入存放项目的目录

  • 使用命令：vue init webpack 项目名

  • 选项选择：(不开启任何功能)

    ？Project name :	项目名
    ？Project description :	项目描述
    ？Author：作者
    ？Vue build : 选择Runtime + Compiler
    ？Install vue-router : no
    ？Use ESLint to lint your code : no
    ？Set up unit tests : no
    ？Setup e2e tests with Nightwatch : no
    ？Should we run "npm install".... : 选择No,I will handle that myself
    

• 初始化vue项目

  • 进入vue项目
  • 使用命令：npm install 初始化项目

• 运行vue项目：npm run dev

• 停止项目：Ctrl+C

vue项目目录结构

• vue项目结构

  • build：用来存放项目构建脚本
  • config：存放项目的一些基本配置信息，最常用的就是端口转发
  • node_modules：存放的是项目的所有依赖，即 npm install 命令下载下来的文件
  • src：存放项目的源码，即开发者写的代码放在这里
    • assets：存放css和js文件，编译后会被webpack处理解析为模块依赖只支持相对路径形式
    • components：存放组件
    • router：存放路由的配置文件
    • App.vue：一个Vue组件，也是项目的第一个Vue组件
    • main.js：相当于Java中的main方法，是整个项目的入口js
  • static：存放静态资源，不会被Webpack处理,支持绝对路径
  • index.html：项目的首页，入口页，也是整个项目唯一的HTML页面
  • package.json：项目的所有依赖，包括开发时依赖和发布时依赖

• assets目录和static目录的区别

  编译之后：
  assets下的文件如（js、css）都会在dist文件夹下面的项目目录分别合并到一个文件下面去，
  
  而static文件下面的文件则会原封不动的放到dist文件夹下面的目录中去；
  
  所以第三方插件等放在static目录下面；css、js等放在assets目录下面；
  
  而image等本地图片等放在static目录下面，build编译后不会出现路径问题
  

Webpack学习

• 含义：webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)*。

• webpack安装：

  • npm install webpack -g //全局安装webpack打包工具

  • npm install webpack-cli -g //全局安装webpack脚手架

  • 检查webpack是否安装成功：

    • webpack -v
    • webpack-cli -v

• webpack入门案例：

  • 1、新建一个空白项目

  • 2、新建一个modules包，在包下创建hello.js文件，在里面暴露一些方法。

    //暴露一个方法
    exports.sayHi = function () {
        document.write("
    hello webpack!!!
    ")
    };
    

  • 3、在modules包下，创建一个main.js文件，当做模块的入口文件

    //接收一个模块
    var hello = require("./hello");
    //调用模块中暴露的方法
    hello.sayHi();
    

  • 4、在项目根目录下创建一个webpack配置文件：webpack.config.js

    //将模块打包导出
    module.exports = {
        //打包的程序的入口
        entry:'./modules/main.js',
        //输出地址
        output:{
            filename:'./js/bundle.js'
        }
    };
    

  • 5、在命令行窗口进入该项目目录，执行打包命令：webpack

  • 6、打包成功后，会自动生成一个dist目录用于存放打包后的模块文件

  • 7、在页面中，引入打包后的文件

vue-router路由

• 含义

  vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。路由模块的本质 就是建立起url和页面之间的映射关系。
  

• 安装vue-router组件

  • 进入项目，使用命令：npm install vue-router --save-dev
    • --save-dev :将该组件保存到开发的配置中
    • cnpm install vue-router --save-dev（淘宝镜像安装命令）

• 自定义一个vue组件

  • 在components目录中新建一个vue文件

• 使用vue-router建立前端路由

  • 1、在项目的src目录下新建一个router包用于存放路由配置文件，在router包内新建index.js（默认名）文件

    • 路由配置信息

      //导入vue插件
      import Vue from "vue";
      //导入vue-router路由插件
      import Router from 'vue-router'
      
      //导入自定义组件
      import Content from "../components/Content";
      
      //安装路由
      Vue.use(Router);
      
      //配置路由
      export default new Router({
        routes:[
          //配置一个路由
          {
            //路由路径
            path:'/content',
            //路由名称
            name:'Content',
            //跳转的路由
            component:Content
          }
        ]
      });
      

  • 2、在main.js文件中引入路由配置（加注释的为引入代码）

    import Vue from 'vue'
    import App from './App'
    //导入vue-router配置，如果配置文件为index.js，会自动扫描router包下的配置
    import router from './router'
    
    Vue.config.productionTip = false;
    
    new Vue({
      el: '#app',
      //配置路由
      router,
      components: { App },
      template: ''
    });
    

  • 3、在项目入口文件app.vue的页面模板中使用路由进行跳转

vue+elementUI组合开发

• 1、新建一个vue项目

• 2、安装项目所需的插件

  //进入项目
  cd 项目名
  //安装vue路由
  npm install vue-router --save-dev
  //安装element-ui
  npm i element-ui -s
  //初始化vue项目
  npm install
  //安装 sass 加载器
  cnpm install sass-loader node-sass --save-dev
  //启动项目
  npm run dev
  

• 3、新建包

  • router：存放路由配置文件（index.js）
  • views：存放页面

• 4、在views包下创建页面组件（以登录页面为例）

  • 引用element-ui的样式

  • Login.vue

• 5、配置路由

  • import Vue from "vue";
    import router from "vue-router";
    
    //引入Login组件
    import Login from "../views/Login";
    
    Vue.use(router);
    
    export default new router({
      //配置路由
      routes:[
        {
          path:'/login',
          name:'Login',
          component: Login
        }
      ]
    });
    

• 6、在入口文件main.js中引入插件和路由配置

  • import Vue from 'vue';
    import App from './App';
    
    //引入路由配置
    import router from "./router";
    //引入element-ui
    import ElementUI from 'element-ui';
    //引入element-ui的样式
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.config.productionTip = false;
    
    //显示声明引入的插件
    Vue.use(router);
    Vue.use(ElementUI);
    
    new Vue({
      el: '#app',
      router,
      //挂载组件到id为app的DOM元素上
      render: h => h(App),
    });
    

• 7、在app.vue组件中通过标签显示路由跳转的组件。

路由嵌套

• 作用：在页面中通过路由不是跳转到新页面，而是把跳转的组件，显示到页面的指定位置。

• 写法：

  • export default new router({
      //配置路由
      routes:[
        {
          path:'/main',
          name:'Main',
          component:Main,
          //在/main下配置子路由
          children:[
            {
              path:'/toBlogList',
              name:'BlogList',
              component:BlogList
            },
            {
              path:'/toWriteBlog',
              name:'WriteBlog',
              component:WriteBlog
            }
          ]
        }
      ]
    });
    

参数传递+重定向

• 参数传递

  • 跳转路径

    
    博客列表
    

  • 路由配置

    {
      path:'/toBlogList/:name',
      name:'BlogList',
      component:BlogList
    }
    

  • 页面取值

    
    
      {{$route.params.name}}
    
    

• 重定向

  //通过redirect重定向到/main路径
  {
    path:'/goHome',
    redirect:'/main'
  }
  

路由模式和404配置

• 路由模式

  • hash：路径中带#号 ----http://localhost:8080/#/main

  • history：路径中不带#号 ----http://localhost:8080/main

  • 设置：在路由配置中

    export default new router({
      //配置路由模式
      mode:'history',
      //配置路由
      routes:[]
    });
    

• 404配置

  • 1、创建NotFound组件

  • 2、在路由配置最后，通过通配符*匹配到为设置的路径为404组件

    //配置路由
    routes:[
      .....
      {
        path:'*',
        component:NotFound
      }
    ]
    

路由钩子

• 路由钩子（配置在组件中）

  beforeRouteEnter: (to, from, next) => {
    //进入路由之前执行
    console.log("之前执行");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    //进入路由之后执行
    console.log("不放行");
    //参数为false，跳转到其他页面会被阻止
    next(false);
  }
  

• 参数说明

  • to:路由将要跳转的路径信息，信息是包含在对象里边的。

  • from:路径跳转前的路径信息，也是一个对象的形式。

  • next:路由的控制参数，常用的有next(true)和next(false)。

• 全局有效钩子

  • beforeEach ：路由跳转之前执行

  • afterEach ：路由跳转之后执行

  • 在app.vue组件中，配置全局守卫

    //vue实例挂载完成后触发的构子函数
    mounted(){
      //进入路由之前触发
      this.$router.beforeEach((to, from, next) => {
        console.log(new Date() + "全局路由守卫触发");
        next();
      })
    }