Vue 的完整学习(Updateing)

v-html  : 

1.v-bind用来绑定数据和属性以及表达式,缩写为':'

2.v-model

使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用

// 计算属性 因为是内部get方法所以调用时不用加小括号

//

计算属性比方法好 因为不管做多少次 内部只调用一次做缓存

 

@是v-on的缩写 监听dom事件 比如 @input监听输入事件

@click 监听点击事件

 

Webpack配置注意

 

Path 引用node里的包

Path调用resolve函数可以动态获取绝对路径

 

在package.json中的scripts中 引用变量名

然后 用npm run 变量名 去运行 build:”wenpack”

Npm run

bulid 运行时 优先去找本地的

npm init 初始化webpack

 

一般全局webpack在开发中不用

本地webpack根据项目需求的版本去安装对应的版本  

Npm install

webpack@对应版本--save-dev    3.6.0

 

DevDependencies开发时依赖

 

 

打包css时 直接在入口require 然后安装对应的依赖在webpack配置

 

对于打包不同的文件 有不同的规则需要

 

打包图片时因为找不到路径 需要在webpack中配置

publicPath:'dist/'

对图片的格式进行hash处理 防止冲突 在图片配置中设置

img/[name].[hash:8].[ext]'

 

 

网页兼容性

Es6转换es5

npm install--save-dev babel-loader@7 babel-core babel-preset-es2015

 

修改presets: ['es2015']

 

 

 

安装vue后要去webpack中配置vue 因为vue默认是用runtime vue.js

要编译 网页显示 需要用esm.js

 

 

开发vue文件 需要install vue-loader vue-template-complier

然后配置webpack  才可以识别 vue的版本改为13.0.0 合适的版本 看需要

 

在webpack配置文件中的resolve中 配置extendions [‘.js’] 文件可以实现不加后缀名引入

 

 

plugins

:插件 用来扩展webpack的功能

 

 

打包html的plugins

Npm install html-webpack-plugin–save-dev

 

需要在webpack配置文件中引入html-webpack-plugin

然后进行模板配置

 

 

Js压缩所需要的plugin 丑化是要发布的时候才用开发阶段不推荐

Npm install [email protected]–save-dev

 

若安装不了 则npm i -D uglifyjs-webpack-plugin

然后再package.json改版本号为1.1.1 然后npminstall

 

 

Cli2脚手架中使用对应的 webpack版本是3.6.0  dev-sever对应版本是2.9.3

Vue init

webpack 项目名称

 

搭建本地服务器

Npm install [email protected]–save-dev

contentBase 决定为哪个文件夹服务 默认是根文件夹

port 端口号

inline页面实时刷新

historyApiFallback:在Spa页面 依赖html的history模式

 

在webapck配置文件的script配置命令"dev": "webpack-dev-server--open",

--open自动打开

 

 

Webpack配置之配置分离

开发时的依赖dev

生产时依赖prod

公共依赖base

 

npm install

webpack-merge --save-dev 安装工具进行合并依赖

 

在devconfig.js中配置 拉取对应

const WebpackMerge= require('webpack-merge');

const baseConfig = require('./base.config.js')

module.exports = WebpackMerge(baseConfig,{

  devServer:{

    contentBase:'./dist',

    inline:true,

  }

})

 

然后再package.json中配置

"dev":"webpack-dev-server --open --config ./build/dev.config.js"

              打包指定的上一层目录下../     

path :path.resolve(__dirname,'../dist'),

 

 

vuecli 脚手架安装

npm install-g @vue/cli

 

拉取旧版本

Npm install-g @vue/cli-init

 

初始化

Vue init

webpack 项目名称

 

初始化 ES-lint是只编程规范限制 关掉限制的话 到index.js改为false

 unit单元测试 一般不用

Js以前在浏览器才能跑起来 现在直接用node加js名称 跑

 

Babelrc 是对浏览器兼容的一些配置

 

两种模式

Runtime-coplier之后的开发如果还想用到template 就使用它

Runtime-only:之后的开发使用的是.vue文件开发 就使用它

[if !supportLists]1.     [endif]性能更高2. 代码量更少

 

 

Vci3的创建 vue  create项目名称    

Vue ui 实现用户界面管理项目

 

若想在js文件实现配置 则需要新建一个vue.config.js  在里面进行配置 导出modules.export

 

 

 

 

箭头函数中的this是如何查找

向外层作用域中 一层层的查找this  知道this有定义

 

 

Vuerouter学习

 

首先 必须要安装对应的vuerouter 插件 然后 引入 安装

//配置路由信息

import Vue from 'vue'

import Router from 'vue-router'

// 1.

通过vue.use安装插件 导入vue

Vue.use(Router);

//2.

创建vuerouter对象

const routes = [];

constrouter = new VueRouter({

  routes

})

// 3.

将router对象传入到vue实例中

export default  router

 

最后在main.js中使用配置router  配置映射关系 一个映射就是一个对象

 

使用vuerouter的步骤是1.创建路由的组件2.配置路由的映射3.使用router-view和router-link

 

Router-link渲染为一个a标签

Tag=button 是渲染成一个按钮 就不是默认渲染成a标签了replace不可返回按钮

active-class="active" 意思是把默认的激活类名改为active或者在配置文件改

 

 >首页

关于

 

Redirect属性:默认跳转的网页

在newrouter里 mode:history 可以去掉网页url上的#

 

Vuerouter在全局加了一个$router属性用来跳转url this.$router.push

 

 

动态路由学习p

path: '/user/:userId',

component: User,

 

User组件中

// route当前哪个活跃

return this.$route.      .userId;

 

动态绑定

 

懒加载 用的时再加载 加快速度

const Home = () =>  import('../components/Home')

const About = () => import('../components/About')

const User = () => import('../components/User')

 

 

query查询 ?

档案或者通过button事件

再通过

{{$route.query.id}}

 

 

Router全局守卫

router.beforeEach((to,from,next)=>{

  document.title =to.matched[0].meta.title;

  next(); //next必须有

})

 

meta为每个组件的属性

aftereach 后置钩子

 

 

beforeRouterleave  记录离开之前 当前组件的状态 下次回来时回到这个时刻

有next一般都要用next  要在homevue中路径加入activated() {

  console.log('activated');

  this.$router.push(this.path)

},

 

beforeRouteLeave (to, from, next) {

  //导航离开该组件的对应路由时调用

  //

可以访问组件实例`this`

}

actived和disactived 只有在组件保持了keep-alive时才有效 keepalive保持只创建一次

 

keep-alive的两个属性

include 包含的才不会重复渲染 exclude 排除组件

 

tagbar项目

[if !supportLists]1.     [endif]在style 标签中引入css @import指令

 

Css样式

Flex 水平 分布

vertical-align: middle; //设置图片与文字直接无缝隙

 

components里面放公共的组件

独立的组件放在view里面

 

 

indexOF  注释:indexOf() 方法对大小写敏感!用来判断path是否为当前活跃route

注释:如果要检索的字符串值没有出现,则该方法返回 -1

 

v-bind : 如果过于复杂 可以放在一个methods或者计算属性中

ActiveStyle是一个计算属性 动态绑定 然而v-model是和表单有关的动态绑定

 

 

路径取别名 在webpack公共配置里 respsolve 配置 用的时候加~

 

 

Promise学习

[if !supportLists]1.     [endif]// promise本身是一个函数 两个参数也是函数 resolve里面参数data 代码放在then里面进行处理 箭头函数只有一个参数时可以省略括号

[if !supportLists]2.     [endif]Reject处理请求失败 失败后用catch捕获接收

 

All方法传入的是一个数组 []可以放入多个请求 当多个请求都完成时才执行then

 

Vuex

[if !supportLists]1.     [endif]安装2.使用3.挂载在main.js

 

[if !supportLists]2.     [endif]直接通过mutation来修改公共属性 详情见代码 两种提交风格

 

State  公共属性

mutations 一些处理方法

getters 类似于计算属性 处理好的值放在里面 再由$store调用

getters里面的属性要传参数 必须返回一个函数 该函数的参数就是动态填入的值

       fifter过滤函数 过滤一些不满足条件的 find找到条件符合的函数

[if !supportLists]3.     [endif]修改store里的state 都是通过action 添加到state里

Mutation里的函数的第二个参数 是一个值 而getters中的第二个参数是getters本身

incrementCount(state,count){

  state.counter +=count;

}

4.Vuex的响应式系统中  新添加的属性不会响应虽然可以添加到数组中 若想要响应直接用 vue的set方法 删除则用Vue的 delete方法

// 官方推荐写法

this.$store.commit(INCREMENT) 

在另外一个js文件定义好并导出

 

[if !supportLists]4.     [endif]action 类似于mutation 就是帮mutation 处理异步操作的

看图线上的方法 action通过dispatch

Action里面的参数是$store

 

[if !supportLists]5.     [endif]modules可以模块化 每个模块对应state mutation acition

module里的东西 自动添加到整个的state

关于 每个module里的getters 第三个参数是根state

fullName3(state,getters,rootState){

  return getters.fullName2 +rootState.counter

}

[if !supportLists]6.     [endif]对项目结构进行分解

Axios学习 通过npm安装npm install axios –save 运行时用到 所以加save

 

[if !supportLists]1.          [endif]Promse方式相关

[if !supportLists]2.          [endif]抽取axios相关共同配置 若不想用公共配置 可以用axios的create方法进行配置 具体看文档   

[if !supportLists]3.          [endif]当请求方式为post 时 查询对象要放在请求体里

 

购物商城开发

[if !supportLists]1.     [endif]一般css会有normalize这个css  在github引入 还有base.css

[if !supportLists]2.     [endif]取别名 html引用要加~ 创建一个vue.config.js 进行配置  然后从vuecli2中复制editorconfig 统一编程风格

[if !supportLists]3.     [endif]Home.vue 面向home.js请求开发

[if !supportLists]4.     [endif]在vue中请求来的数据 保存在当前组件的data中 方便使用 通过浏览器插件vuedevtool进行查看

[if !supportLists]5.     [endif]Iview ui组件

[if !supportLists]6. [endif].tab-control{


position: sticky;


top: 44px;

}

这个sticky属性

[if !supportLists]7.     [endif]将一个数组与另外一个数组连接

const nums1=[1,2,3,4]

const nums2 = [5,6,7]

nums2.push(...nums1);

8. display: flex;

/*布局包裹*/

flex-wrap: wrap;

justify-content: space-around; 均等分padding: 2px;

商品样式进行展示包裹样式

你可能感兴趣的:(Vue 的完整学习(Updateing))