vue基础

最新推荐文章于 2023-05-17 19:46:30 发布
最新推荐文章于 2023-05-17 19:46:30 发布
阅读量120 收藏 2
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49314397/article/details/112212429
版权

vue的安装

  1. 安装node.js
  2. 安装npm:npm install -g cnpm --registry=https://registry.npm.taobao.org
  3. 使用cnpm安装vue:cnpm install vue -g
  4. 安装vue命令行工具：cnpm install vue-cli -g
  5. 安装vue-devtools调试工具：
  6. 创建vue脚手架:vue init webpack myproject
    1. vue init webpack myproject
    2. cd myproject // 进入目录
    3. cnpm install // 安装依赖
    4. cnpm run dev // 开启服务
    - src 主开发目录，所有的单文件组件都会放在这个目录下
- static 项目静态目录，所有的css、js都会放在这个文件夹下
- dist 项目打包发布文件夹，最后要上线单文件夹项目都在这个文件夹中 - node_modules node的包目录
- config 配置目录
- build 项目打包时依赖的目录
  7. 常用命令
    1. v-html:将内容按照html格式进行插入
    2. v-text:将内容按照文本格式进行插入，但会覆盖原有标签内的内容，不会有加载的闪烁问题
    3. v-cloak:解决加载时的闪烁问题
  8. 绑定属性:v-bind 或者 直接写 冒号 如果我们需要设置的模板变量是一个属性，比如a标签的href属性
  9. 绑定事件：v-on 或者 @ 符号:给元素绑定对应事件。
  10. 表单绑定 v-model：
  11. 动态绑定

当某些情况下，无法确定表单中所代表的属性值，可以使用v-bind进行动态绑定，v-> model获取到的表单输入 此时则是我们定义的v-bind属性值

  1. v-if 指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候渲染
  2. 与v-if不同的是: v-show 的元素始终会被渲染并保留在 DOM 中 v-show 只是简单地切换元素的 CSS 属性 display
  3. Vue实例生命周期
- beforeCreate 数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象 
- created 数据已经绑定到了对象实例，但是还没有挂载对象
- beforeMount 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 $el属性
---------------------------------------------------------------------
$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段， 准备注入到我们vue实例指明的el属性所对应的挂载点 -------------------------------------------------------------------------- 
- mounted 将$el的内容挂载到了el，相当于我们在jQuery执行了$(el).html($el),生成页面上真正的dom
-------------------------------------------------------

上面我们就会发现页面的元素和我们$el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进 行各种操作 ----------------------------------------------------------------------------

- beforeUpdate 数据发生变化时调用
- updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
- beforeDestroy Vue实例销毁前 - destroyed Vue实例销毁后
  1. 过滤器
{{ 0 | myfilter }}


  //过滤器
  filters: {
            myfilter: function (value) {

                if(value==1){
                    return '已支付';
                }else{
                    return '未支付';
                }
　　　　　　
　　　　}
　　},
  1. 子组件
    components: {
       // 'mh_test':mh_test
  },
  1. 计算属性
data () {
      return {
        message:'hello world 你好',
        },
    //计算属性
    computed:{

        reverse_message:function(){

            return this.message.split('').reverse().join('')

        }

    },
  1. 监听属性
    //监听属性
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    },
  1. 函数
data () {
      return {
            datalist:[],
        },

    totalCount : function(){
      var total = 0;
      for (var i = 0,l = this.datalist.length;i<l;i++) {
        total+=this.datalist[i].num;
      }
      return total;
    },
  1. 样式
<style>

.on {
			background: #cdcbff;
		}
.off {
    background: #fefdff;

}

</style>

一 路由拦截器

项目中，用户不登录只能去登录页面，不可以访问别的页面，这种情况的话，可以用路由拦截器

  1. 先说下区分下route与router
  • route：相当于当前正在跳转的路由对象。可以从里面获取name，path，params，query等。
    如取路由带来的参数：this.$route.params
  • router：VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样
//带参数路由跳转
this.$router.push({path:'/home',params:{id:123}})
//取参数
this.$route.params.id //123
  1. 言归正传说路由拦截
//路由拦截器
//to为向后走的路由对象，包括路由的完整信息
//from为从哪跳来的路由对象
//next()控制路由向下走，重新定义路由跳转的路由next(‘路由路径)
/** 验证用户是否登录 **/
router.beforeEach((to,from,next) => {
    if(to.matched.some( m => m.meta.auth)) {
        // console.log("先判断是否登录");
        if(to.name=='Login'){
            next();
        }else{
          if(localStorage.getItem('token')){

          //访问服务器缓存数据，判断当前token是否失效
            Vue.http.get("http:xxxx/Login/UserIsLogin?token="+localStorage.getItem('token')+"&url="+to.name,{withCredentials: true}).then(response => response.json()).then(num => {
                    // console.log('是否登录',num);
                    if(num.code==1001){
                        next();
                    }else{
                        alert('您的token已超时，请重新登录');
                        next('/Login');
                    }
            })
          }else{
            next('/Login');
          }

        }
  　} else {
        console.log("请先登录");
        next()
    }
})

//或者简洁的可以：
router.beforeEach((to,from,next)=>{
    if(localStorage.getItem('token')||to.name=='login'){
          next()
    }else{
          //如果没有token值,则跳到登录页面
          next({path:'/login'})
    }
   next()
})

二 请求拦截

统一处理错误及配置请求信息

  1. 安装 axios , 命令： npm install axios --save-dev
  2. 在根目录的config目录下新建文件 axios.js ，内容如下：
    import axios from ‘axios’
    // 配置默认的host,假如你的API host是：http://api.htmlx.club
    axios.defaults.baseURL = ‘http://api.htmlx.club’
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
　　return config
}, function (error) {
　　// 对请求错误做些什么
return Promise.reject(error)
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
　　// 对响应数据做点什么
　　return response
}, function (error) {
　　// 对响应错误做点什么
　　return Promise.reject(error)
});

请求拦截 根据自己的需求加对应的代码

三、父子组件传参

  • 父组件
<template>
    <div>
         <h1>hello</h1>
         <v-child :msg='msg' @cmsg="cmsg"></v-child>
         {{childmsg}}
    </div>
</template>

<script>
import child from '@/components/child'
export default {
    name:'parent',
    data:function(){
        return {
            'msg': 'hello everybody',
            childmsg: ''
        }
    },
    methods:{
        cmsg:function(obj){
            this.childmsg =obj
        }
    }
    ,
    components:{
        'v-child': child
    }
}
</script>
  • 子组件
<template>
    <div>
       
            {{msg}}
           <button @click="toparent">传值到父组件</button>
    </div>
</template>

<script>
export default {
    name:'child',
    data:function(){
        return {

        }
    },
    methods:{
        toparent:function(){
            this.$emit("cmsg", "来自子组件的数据")
        }
    }
    ,
    props:['msg']
}
</script>

四、Vuex状态管理

  • 使用场景：大型项目
  • 安装： cnpm install --save vuex
  • 使用：
    import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.prototype.axios = axios
Vue.use(Vuex);

// vuex的配置
const store = new Vuex.Store({
    
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  // 使用vuex.任何组件使用同一个store的数据时，只要store的数据变化，对应的组件也会更新。
  store: store,
  components: { App },
  template: '<App/>',
})
  • 任何组件使用同一个store的数据时，只要store的数据变化，对应的组件也会更新。
  • 数据保存在vuex的state字段内。
    // vuex的配置
const store = new Vuex.Store({
  state:{
    // 计数器。在任何组件内，可以直接通过$store.state.count读取
    count: 0
  }
});
    • 可以直接通过$route.state.count读取。也可以用一个计算属性来显示
    <template>
    <div>
      {{ $store.state.count }}
      <br>
      {{ count }}
    </div>
</template>

<script>
    export default {
        name: "x1",
      computed:{
          count: function () {
            // 通过计算属性显示
            return this.$store.state.count;
          }
      }
    }
</script>
    • store的数据只能读取，不能手动修改。改变方式是：定义mutations.
    • 在组件内，通过this.#store.commit()方法来执行在mutations中定义的函数。
    • mutations可以接受第二个参数。
        // vuex的配置
    const store = new Vuex.Store({
      state:{
        // 计数器。在任何组件内，可以直接通过$store.state.count读取
        count: 0
      },
      mutations:{
        increment(state){
          state.count++;
        },
        // ES6： n=1是当参数没有传值时，使用的默认值
        // 当一个参数不够用时，可以传入一个对象
        decrement(state, n=1){
          state.count-=n;
        }
      }
    });

      {{ count }}
  <br>
  <button v-on:click="handlIncrement">+1</button>
  <button v-on:click="handlDecrement">-2</button>
  
  
  methods:{
      handlIncrement:function () {
        this.$store.commit("increment");
      },
    handlDecrement:function () {
      this.$store.commit('decrement', 2)
    }
  }
    • 提交mutation的另一种方式是直接使用包含type属性的对象。比如：
    // vuex的配置
const store = new Vuex.Store({
  state:{
    // 计数器。在任何组件内，可以直接通过$store.state.count读取
    count: 0
  },
  mutations:{
    increment(state, params){
      state.count+= params.count;
    }
  }
});

      methods:{
      handlIncrement:function () {
        // this.$store.commit("increment");
        this.$store.commit({
          type:'increment',
          count: 10
        })
      }
  }

高级用法。getters、actions、modules

  • 仅仅获取小于10的数字。常规用法
// main.js
// vuex的配置
const store = new Vuex.Store({
  state:{
    list: [1, 5, 8, 10, 30, 50]
  },
  mutations:{
    
  }
});

<template>
    <div>
      <h3>vuex高级用法</h3>
    <li v-for="i in list">{{i}}</li>
    </div>
</template>

<script>
    export default {
        name: "vuex2",
      computed:{
          list:function () {
            // 过滤数组，仅仅显示小于10的数字
            return this.$store.state.list.filter(item => item < 10);
          }
      }
    }
</script>

<style scoped>

</style>
  • getters的使用
const store = new Vuex.Store({
  state:{
    count++,
    list: [1, 5, 8, 10, 30, 50]
  },
  getters:{
    filterList:state=>{
      return state.list.filter(item => item < 10);
    },
    listCount:function (state, getters) {
      // getters的依赖,一个getters可以依赖于另一个getters
      return getters.filterList.length;
    }
  }
  ,
  mutations:{
    increments(state){
        state.count++;
    }
  }
});
  • actions的使用
    • 多此一举的操作。actions中context.commit('increment', {count: 2});。vue组件中this.$store.dispatch('increment')
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.prototype.axios = axios
Vue.use(Vuex);

// vuex的配置
const store = new Vuex.Store({
  state:{
    // 计数器。在任何组件内，可以直接通过$store.state.count读取
    count: 0,
    list: [1, 5, 8, 10, 30, 50]
  },
  getters:{
    filterList:state=>{
      return state.list.filter(item => item < 10);
    },
    listCount:function (state, getters) {
      // getters的依赖
      return getters.filterList.length;
    }
  }
  ,
  mutations:{
    increment(state, params){
      state.count+= params.count;
    },
    decrement(state, n=1){
      state.count-=n;
    }
  },
  actions:{
    increment(context){
      context.commit('increment', {count: 2});
    }
  }
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  // 使用vuex.任何组件使用同一个store的数据时，只要store的数据变化，对应的组件也会更新。
  store: store,
  components: { App },
  template: '<App/>',
})



<template>
    <div>
      <h3>vuex高级用法</h3>
      {{listCount}}
    <li v-for="i in list">{{i}}</li>
      <br>
      {{this.$store.state.count}}
      <br>
      <button v-on:click="handleActionIncrement">+2</button>
    </div>
</template>

<script>
    export default {
        name: "vuex2",
      methods:{
          handleActionIncrement:function () {
            this.$store.dispatch('increment');
          }
      },
      computed:{
          list:function () {
            // 过滤数组，仅仅显示小于10的数字
            // return this.$store.state.list.filter(item => item < 10);
            return this.$store.getters.filterList;
          },
        listCount:function () {
          return this.$store.getters.listCount;
        },

      }
    }
</script>

<style scoped>

</style>
  • module将一个store分割到不同的模块。
const moduleA = {
  state:{
    msg: 'moduleA'
  },
  mutations:{},
  actions:{},
  getters:{}
};

const moduleB = {
  state:{
    msg: 'moduleB'
  },
  mutations:{},
  actions:{},
  getters:{}
};

// vuex的配置
const store = new Vuex.Store({
  state:{
    // 计数器。在任何组件内，可以直接通过$store.state.count读取
    count: 0,
    list: [1, 5, 8, 10, 30, 50],
    a: moduleA,
    b: moduleB
  },
  getters:{
    filterList:state=>{
      return state.list.filter(item => item < 10);
    },
    listCount:function (state, getters) {
      // getters的依赖
      return getters.filterList.length;
    }
  }
  ,
  mutations:{
   
  },
  actions:{
    
  }
});
三皮 先生
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue基础1
01-07
基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的...
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue基础
lijieling123的博客
04-09 3036
Vue遵循SoC关注度分离原则 前端基础 结构层：HTML 表现层：CSS –CSS预处理器：用一种专门的语言，进行Web样面设计，再通过编译器转化为正常的CSS 常用的：SASS(基于Ruby), LESS(这个是基于NodeJS,使用简单，一般用这个) 行为层：JS Vue概念 Augular特点：将后台的MVC模式搬到前端并增加了模块化开发的理念（MVVM）(VM双向绑定相当于控制层) React特点： 提出新概念虚拟DOM, 用于减少真实的DOM操作，在内存中模拟DOM操作，提升前端的渲染效率 Vu
Vue 基础
roydon
10-11 4420
vue2基础
vue基础教程
shiyzhang
07-24 2798
vue基础教程，带你走进vue
vue基础知识汇总
yuandawang的博客
01-06 5850
vue基础知识汇总
Vue基础知识测试
简单点的博客
10-18 7251
Vue基础知识测试
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
Vue基础入门题库
qq_46556714的博客
09-22 1万+
Vue基础入门作业(含参考答案） 单选题 1、 下列选项中，代表视图部分的是（）。 1分 A、Element B、DOM C、Model D、View 参考答案 : D 答案说明 : MVVM主要包含3个部分，分别是Model、View和ViewMode。 Model指的是数据部分，主要负责业务数据；View指的是视图部分，即DOM元素，负责视图的处理。 2、 下面选项中，是基于Chrome V8引擎的JavaScript运行环境，它可以让JavaScript运行在服务器端的是（）。 1分 A、npm.
vue基础入门
weixin_47124112的博客
06-08 4625
vue是什么，以及vue的基本指令
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基础项目
09-11
本资源是vue项目基本需要用到的依赖，有axios、babel-polyfill、jquery、vue-wechat-title、sass-loader、url-search-params-polyfill等
Vue基础培训培训资料.ppt
最新发布
06-06
MVVM（Model-View-ViewModel）模式是Vue.js的基础架构。在MVC（模型-视图-控制器）模式的基础上，MVVM将Controller改为了Presenter，并实现了双向数据绑定。在MVVM中，View的变化会自动反映到ViewModel，反之亦然。...
Vue基础配置讲解
10-15
Vue的基础配置是每个开发者在开始项目时必须了解的关键步骤。本文将详细讲解如何在CentOS7环境下设置Vue开发环境。 首先，你需要安装Node.js和NPM（Node Package Manager），它们是Vue运行的基石。你可以从官方网站...
vue基础-品牌列表案例.zip
12-28
在“vue基础-品牌列表案例”中，我们将深入探讨如何利用Vue.js实现一个品牌列表的增删功能。 首先，让我们了解Vue的基础概念。Vue的核心是一个可观察的数据模型，它允许开发者通过声明式地绑定数据到DOM（文档对象...
Vue基础demo代码.zip
04-14
这个"Vue基础demo代码.zip"压缩包包含了帮助初学者理解Vue基本语法的示例代码。让我们深入探讨一下Vue的基础知识和这些示例可能涵盖的内容。 1. **Vue实例**： - 在Vue中，每个应用都是通过创建一个Vue实例开始的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值