vue概念及使用,vue-cli搭建环境及应用_vue与vue-cli用法-优快云博客

本文链接：https://blog.youkuaiyun.com/BeiBeiTian/article/details/84244667

vue

是单页面应用程序

#VueJs 读音(view)
1.简介:
前端MVVM框架,
2.作者:

中国江苏人:尤雨溪,现在Google公司
3.官网
http://cn.vuejs.org/index.html
(也是学习vuejs最好的素材)
4.前端的三大框架(MVVM框架)
Angular 2009年现在Google团队维护
React 2011年 Facebook团队维护最流行
Vue 2014年个人维护最火
5.Vuejs为什么火?

jquery之前很火
Dom操作很给力
Dom操作性能低,耗费CPU资源

Vue很火
1.不提倡Dom操作

核心思想:
2.数据驱动视图
数据变了,视图跟着变
3.组件化

6.使用Vue

1.下载vuejs源码
2.script src="vue.js"
3.使用
<div id="app">
{{msg}}
</div>
new Vue({
el:'id选择器',//告诉vue接管的范围
data:{
msg:"Vue",
arr:[]
//data中声明的数据是响应式的,这个响应是指只要 data中声明的数据改变,
//视图层自动更新
},
methods:{

},
watch:{

}
})
选项:
el:

vue接管的范围 :

html,body除外,一般放id,
VUEjs内部选元素的机理:
document.querySelector
data:
存放普通数据,在页面中需要用到的数据

{{msg}}
插值表达式:
1.放在一对双标签之间渲染出来
2.能做算数运算
3.三目运算
4.调用方法

5.禁止定义变量,使用for循环之类的...
指令:
在Vuejs中,以v-开头的,作为标签的属性出现的,称为指令,
指令扩展了html标签的功能,

v-bind 绑定属性的
简写为 :title='title'
v-on 绑定事件
简写为 :@click='handleClick'

事件修饰符:
.stop
.prevent
.capture
.self
.once
.passive
v-for
v-show
v-if
v-else
v-model
v-on
v-html
v-text
v-pre
v-cloak
v-once

#事件修饰符:

.stop 阻止冒泡
.prevent 阻止默认行为
.capture 添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self e.target是自身的时候才会触发
.once 触发一次
.passive 结合scroll事件,常用来提升移动端滚动的性能

#按键修饰符:

结合键盘事件使用,当你加了按键修饰符之后,按相应的键,才会触发

.enter 回车键
.tab tab键(制表键)
.delete (捕获“删除”和“退格”键) 删除键
.esc 返回键
.space 空格键
.up 上
.down 下
.left 左
.right 右

#指令 v-

v-bind 单向的
数据变了,视图跟着变
视图变了,数据不跟着变
v-on stop,prevent,self,passive,once,capture

v-show 控制元素的display属性,这两个都是控制显示与隐藏的,这个是由display:blcok;display:none实现的,
在页面上能看见.
v-if 移除或插入dom节点,从页面上移除了.看不见

v-if
v-else-if
v-else

v-for 遍历:数组,对象,字符串,数字 item in 数据名

v-model 配合表单元素使用,绑定元素的value元素,双向绑定

数据变了,视图跟着变
视图变了,数据也跟着变

v-html 解析标签
v-text 不解析标签

优化:

//后面不需要跟数据
v-pre 禁用{{msg}}
v-cloak 掩饰{{}} 需要加个样式:[v-cloak]{display:none;/visibility:hidden;/opacity:0}
当数据渲染出来之后,v-cloak属性自动从元素身上移除

v-once 数据只渲染一次

虚拟Dom 内存中
v-for遍历的时候,需要给每个元素加个key属性,
用来标识这个DOM的位置
从而当个这个数据变了之后,vue只局部更新虚拟dom,
从而映射到真实的dom上,局部视图更新

3.class和style
动态绑定class
对象表示法:
:class='{class1:条件1,class2:条件2,class3:条件3,...}' ***
数组表示法:
:class='[class1,class2]'

动态绑定style
对象表示法:
:style="{color:color,background:bg,...}"
数组表示法:
:style="[style1,style2,styl3,...]"

4.computed,watch,methods区别:

1.computed 计算属性
1.它可以对data中的普通数据进一步加工(处理/计算)
2.声明的时候是函数,用的时候是个属性
所以计算属性不接受参数
3.计算属性return的结果是什么,在模版中就渲染什么
4.计算属性有缓存,只要计算属性依赖的数据不变,多次调用计算属性,
之后的计算属性结果直接从第一次得到的结果去取.
5.只要计算属性依赖的数据发生了改变,计算属性都会重新执行一次
6.不适合异步操作
7.对数据进行可控制的访问
get:function(){},
set:function(value){}
8.可以根据多个依赖得出一个结果

2.watch --监听
1.监听data中的数据,
(a)如果是基本数据类型:数据名:function(to,from){}
(b)如果是引用类型:
数据名:{
deep:true//深度监视
handler:function(newVal){

}
}
2.可以进行异步操作

3.单个监听

3.methods --方法
1.用来声明普通的函数

vue生命周期:

##组件
html+css+js(vue实例)

###VUE(组件)生命周期钩子
1.定义:vue实例从创建-->挂载-->更新-->销毁
这四个阶段的经历就叫做vue的生命周期

在不同的阶段,vue会执行一些函数,这些函数被称为钩子函数

四个阶段对应8个钩子(函数),
钩子函数的特点:就是不需要人为调用,
Vue在不同的阶段自动调用,
这就给了我们开发者在不同的时机有添加自己代码的机会,
钩子函数里面的this都指向vue实例

beforeCreate 实例(组件)创建前无法操作data中的数据,也拿不到根元素(dom还没有挂载到vue上)
** created 实例(组件)创建后可以获取操作data中的数据,但拿不到根元素

操作数据
1.操作data中的数据
2.发起ajax请求(最适合,操作数据的时机最早)

beforeMount 实例(组件)挂载前,vue不管事可以获取到根元素,dom还没被渲染
** mounted 实例(组件)挂载后,vue管事了可以获取到根元素,dom已被渲染

可以操作渲染后的dom

初次渲染的时候不会执行
配合数据变化而执行的
beforeUpdate 实例(组件)更新前数据变了,dom还没有更新
updated 实例(组件)更新后数据变了,dom也完成更新

beforeDestroy 实例(组件)销毁前做优化操作:1.关闭定时器 2.移除事件监听器 3.实例一旦被销毁,vue就不管事了
destroyed 实例(组件)销毁后

vm.$destroy()//销毁/卸载

keep-alive
activated 组件激活时
deactivated 组件停用时当组件不可用时,可以在这里做优化操作

##keep-alive
vue提供的内置组件之一
transition
transition-group
template
slot

内置组件定义:vue提供好的,有特定功能的组件,直接使用即可
keep-alive 保持有生命力(活着)的状态
作用:避免组件被重复的渲染(频繁的创建和销毁)
会触发激活和停用的钩子

##ref
1.获取元素 ref='xxx'
2.获取组件 ref='xxx'

this.$refs.xxx

打包的时候需要改路径接口(在config文件夹中index.js)

config文件夹中

在index.js中

   端口:

       module.exports = {

dev: {

assetsSubDirectory: 'static',

assetsPublicPath: '/',
proxyTable: {

'/apis': {

target: 'http://127.0.0.1:8000/',上线的时候需改为上线地址

changeOrigin: true,

pathRewrite: {

'^/apis': '/'
}
},

'/api': {

target: 'http://c.y.qq.com',

changeOrigin: true,

pathRewrite: {

    '^/api': '/'
   }
    },
   },

build:

把这个assetsPublicPath: '/',改为 assetsPublicPath: './',

package.json:

开发本地环境:

devDependencies

(1)内容：是一个对象，配置模块依赖的模块列表，key是模块名称，value是版本范围

(2)作用：该模块中所列举的插件属于开发环境的依赖（比如：测试或者文档框架等）

(3)部署来源：通过你npm install进行依赖安装时加上-save-dev，devDependencies对象中便会增加echarts安装配置，

实例安装echarts依赖代码如下
npm install echarts -save-dev

生产依赖环境:

dependencies

(1)内容：是一个对象，配置模块依赖的模块列表，key是模块名称，value是版本范围

(2)作用：该模块中所列举的插件属于生产环境的依赖（程序正常运行需要加载的依赖）

(3)部署来源：通过你npm install进行依赖安装时加上-save，dependencies对象中便会增加echarts安装配置，

实例安装echarts依赖代码如下
npm install echarts -save

build文件夹中

在webpack.base.conf中

有设置main.js的入口文件:

module.exports = {

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

entry: {

            app: './src/main.js'

           如果要写多个入口文件的话,可以在下边定义多个如:

           app1:'./src/main1.js'

}

Vue-cli环境--项目结构介绍:

   搭建Vue-cli环境时执行的命令:
   安装:vue-cli
   npm i -g vue-cli 全局安装vue-cli

vue init webpack 项目名称

cd 项目名称

       nmp start / npm run start

       npm run dev 启动项目

npm i 第三方模块

     如果想安装第三方模块执行的命令是: npm/cnpm i 第三方模块的名字(better-scroll) -S 之后用的时候还要引入,require就ok
   文件:
       .babelrc babel配置,将ES6转ES5

.editorconfig 编辑器的配置

.eslint是个JS检查工具,约束js代码编写风格

       .eslintignore eslint忽略的配置

        .eslintrc.js eslint本身的配置

.gitignore git忽略的配置

       .postcssrc.js postcss的配置做css3兼容浏览器的

       flex:1;

        -webkit-flex:1;
        -ms-flex:1;
        -moz-flex:1;
   -o-flex:1;

index.html HTML入口

       package.json node的配置(整个项目的身份证)

       README.md 项目的说明文件(说明书)

目录:

在build和config里改东西后,必须run一下才能实现

        bulid/ webpack的配置

           entry 设置入口里可以设置多个入口,后面讲
           output 出口 filename:"[name]".js build出来的js文件

       config/ 项目的配置(打包的配置)

           indexa.js中

               assetsSubDirectory:静态资源文件夹

               assetsPublicPath:静态资源路径.绝对路径 "/" 上线加 "./" (上线加点.)

           proxyTable: {
               '/apis': {
                target: 'http://127.0.0.1:8000/',
                changeOrigin: true,
           pathRewrite: {
                '^/apis': '/'
                }
           },
               //这里可以写多个,名字只要不一样就行.
                // '/api': {
               // target: 'http://c.y.qq.com',
               // changeOrigin: true,
               // pathRewrite: {
               // '^/api': '/'
               // }
               // },
           },

        node_modules/ 所有第三方的模块
       src/
            源代码
            开发者主要在这里面发挥

每个文件中带有 'use strict'代表代码的严格模式

        assets/ 静态资源,这里面的静态资源会被打包的

           中,图片解析为:base.64位

   components/ 存放所有组件
   router/ 整个项目路由的配置
   App.vue 根组件
   main.js 项目的入口文件

static/
静态资源,这里面的静态资源不会被打包的

test/
测试

单个文件:

       .babelre 一些插件,浏览器版本
       .editorconfig 代码,编码 utf-8
       .gitignore 如果自己写东西不想提交,就把文件名写在这里面,可备份
       .postcssrc.js 做css兼容做兼容
       package.json{

           dependencies 生产
           devDependencies 开发
           }

       入口文件是在build文件夹下的webpack.base.conf.js文件中entry:{

                                   app:"./src/main.js"
                                   }
       main.js中: Vue.config.productionTip=false的意思是:在生产环境下,让提示信息是关闭的

   打包:webpack

       执行命令:npm run build 会打包成一个: dist一个文件夹这里面有一个文件夹static,一个index.html文件

在打包中的js文件是成面条式(在一行显示),这是打包(压缩后的)这是由生产环境里merge:webpack-merge打包的

   三大主流框架:

       单页面应用程序:原理:只有入口的html文件,根据hash(哈希)值的不同显示不同的页面(组件),局部更新视图,不用刷新整个页面

angular 也是数据双向绑定,是单页面应用(SPA),但学习成本高,框架比较臃肿.

React 比较适合大型应用,web端和移动端原生App通吃,React是单向绑定,学习成本高

Vue 框架,模板和渲染函数的弹性选择,简单的语法和项目配置,更快的渲染速度和更小的体积更低的学习成本.

单页面和多页面的区别:

单页面应用多页面应用

组成一个外壳页面和多个页面片段组成多个完整页面构成

资源共用共用,只需在外壳部分加载不共用,每个页面都需要加载

刷新方式页面局部刷新或更改整页刷新

url模式 a.com/#/pageone a.com/pageone.html
a.com/#/pagetwo a.com/pagetwo.html