![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue基础知识
文章平均质量分 58
vue基础知识
贝贝小菜鸟
这个作者很懒,什么都没留下…
展开
-
vue基本知识—10.统一状态管理Vuex
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以可预测的方式发生改变10.1安装vue add vuex10.2起始State:将应用全局状态定义在state中state{ isLogin:false}Mutation:修改state只能通过mutationmutations:{ login(state){ state.isLogin = true } logou原创 2021-02-22 11:32:10 · 264 阅读 · 0 评论 -
vue基础知识—9.路由
9.1安装vue add router9.2基础9.2.1 起步<nav> <router-link to="/">首页</router-link> <router-link to="/about">管理</router-link></nav><router-view></router-view><template> <div> &原创 2021-02-23 13:14:01 · 254 阅读 · 1 评论 -
Vue基础知识—8.工程化
8.1快速原型开发你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发。8.1.1 安装@vue/cli-service-global扩展npm install -g @vue/cli-service-global8.1.2 vue serve启动一个服务并运行原型vue serve Hello.vue8.2创建项目8.2.1 vue createvue create 项目名8.2.2 vue ui图像化管理vue ui8.3原创 2021-02-24 09:33:03 · 341 阅读 · 0 评论 -
Vue基础知识—7.可复用性
7.1过滤器过滤器常用在两个地方的后面:双括号插值和v-bind表达式(2.1.0+支持)<!-- 在双花括号中-->{{message|capitalize}}<!--在v-bind中 --><div v-bind:id="rawId|formatId"></div><template> <div id="ReusableComponent"> <!-- 过滤器 --> {{price|c原创 2021-02-24 10:24:54 · 175 阅读 · 0 评论 -
Vue基本知识—6.过渡&动画
6.1css过度动画vue在插入、更新或者移动DOM时,提供多种不同方式的应用过渡效果。包括以下工具:在css过渡和动画中自动应用class 可以配合使用第三方css动画库,如:Animate.css在过渡钩子函数中使用Javascript直接操作DOM可以配合使用第三方Javascript动画库,如 Velocity.jstransition组件会为嵌套元素自动增加class,可用于做css过渡动画<script>Vue.component('message', { //原创 2021-02-19 09:45:09 · 173 阅读 · 0 评论 -
Vue基本知识—5.vue必会api盘点
5.1数据相关api5.1.1 Vue.set向响应式对象中添加一个属性,并且确保这个新的属性同样是响应式的,且触发视图更新使用方法:Vue.set(target,propertyName/index,value)<template> <div id="app"> <!-- vue.set --> <p> <input v-model.number="price"/> <button @原创 2021-02-18 14:22:29 · 162 阅读 · 0 评论 -
Vue基本知识-4.组件化
4.1组件基础组件是可复用的vue实例,带有一个名字,我们可以通过在new Vue创建的Vue根实例,把这个组件作为自定义元素来使用4.1.1 组件注册、使用、数据传递Vue.component(name,options)可注册组件Vue.component('course-list',{ data(){ return { selectedCourse:'' } }, props:{ courses:{ type:Array,原创 2021-02-18 10:45:05 · 120 阅读 · 0 评论 -
vue基本知识—3.生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程,例如:需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时,更新DOM等,这些都称为Vue实例的生命周期。3.1使用生命周期钩子在VUE实例的生命周期过程中会运行一些叫做生命周期的钩子函数,这给用户在不同阶段添加自己代码的机会<template> <div id="app"> <p v-if="courses.length==0">没有任何课程信息</p> <ul>原创 2021-02-10 14:53:14 · 143 阅读 · 0 评论 -
vue基础知识—2.模板语法
2.1vue模板语法Vue.js使用基于HTML的模板语法,允许开发者声明式地将Dom绑至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML,所以能够被遵循的浏览器和HTML解析器解析2.1.1 插值文本数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值<template> <div id="app"> {{title}} </div></template><script>expor原创 2021-02-10 14:15:02 · 205 阅读 · 0 评论 -
vue基础知识—1.HelloWorld
1.1引入vue安装vuenpm install vue -g下载vue的最新版本npm install -g @vue/cli创建项目vue create study-vuevue2.0和vue3.0的区别1.打包方式:2.0是通过:npm run dev3.0是:npm run serve2.文件夹目录:3.0取消掉了config目录、build目录、static目录 ,还有最重要的一点,3.0的安装项目时自动下载node-model,vue.config.js也没了,需原创 2021-02-10 11:03:07 · 161 阅读 · 0 评论