Vue项目创建

本文阅读量：次

0 安装脚手架

npm install -g @vue/cli
使用命令创建项目
vue create xxxx
运行项目
npm run serve（Vue CLI 3+ 创建的标准化项目，基于Vue CLI内置的vue-cli-service工具链启动，集成更高效的编译和热更新功能）

1.创建项目

在默认配置都有的情况下：
vue init webpack 项目名称
cd 项目
npm install
npm run lint – –fix
npm run dev(Vue CLI 2.x及早期项目或自定义配置项目，调用webpack-dev-server启动本地开发服务器，配置路径由webpack.dev.conf.js定义)

feature/ELIM-16’ into ‘hotfix/1.3.1’ in 2020-09-07 16:34:22

遇到问题

报错“ vue-cli · connect ECONNREFUSED ”
cnpm -v
查看到prefix=/usr/local,
于是 npm config set prefix=/usr/local 设置下
最后vue list 查看到

vue2内容

绑定:vm.$mount()

1
@click="xxx(??,$event)"

数据属性data

1
2
3
4
5
6
7
8
9
10
--script
//数据
data:{
    return{
        xxx:"sss",
        window:window,//简写直接写window
        isxx:true,
        ...
    }
},

方法属性methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
--script
methods:{
    xxx(event){ //event==事件对象
        console.log(this) //this==vue实例对象

    },
    xxxx(??,event){ //event==事件对象
        console.log(this) //this==vue实例对象

    },
    xxx:(event)=>{ //event==全局window对象

    }
}

v-指令

v-bind,单项绑定:用法:v-bind:x="value",简写:x="value"
v-model,双向绑定,用于表单数据:用法:v-model:x="value",简写v-model="value"
v-on:click,点击@click
keyup,keydown,键盘起落

v-text

会替换文字框中的文字
不会解析html
<div v-text=">

v-html

可以解析html
<div v-html="">

v-cloak

<h2 v-cloak>
vue实例会接管这个标签,直到页面加载后删除该标签,和css配合

1
2
3
4
//[]意思是选中所有带cloak的标签，标签里面的信息消失
[v-cloak]{display:none}


v-once

初次动态渲染后,就视为静态资源,后续在改,不会变
<h2 v-once>

v-pre

这个标签,vue会无法解析

修饰符

1
2
3
4
5
@click.prevent  阻止事件
@click.stop 阻止冒泡事件(放在你需要阻止的位置,比如你点击的按扭)
@click.once 页面打开后,只执行一次
@click.capture  捕获事件(正常是从里到外,先执行你点击的按扭,再执行冒泡外层的事件,这个可以先执行外层的事件,需要在外层添加)
.passion 立即执行,不用等回调函数完毕

按键别名

1
2
3
4
5
6
7
8
9
10
11
keyup.enter, 回车后按键弹起时触发, (keyup.13,很多浏览器已经移除该方式)
keyup.caps-lock 大小写键,两个单词必须小写,中间一个`-`
.delete
.esc
.space
.tab
.up
.down
.left
.right
keyup.ctrl.y

数据代理

_data底层使用的是数据代理方式,通过vm对象来代理data对象中的属性操作
通过Object.defineProperty()方法,将data对象中所有属性添加到vm中,都指定getter/setter

1
2
3
4
5
6
7
8
Object.defineProperty(obj, 'xxx', {
    get(){
        return obj2.xxx
    },
    set(value){
        obj2.xxx=value
    }
})

数据劫持

数据可以反馈到页面上

计算属性computed

有缓存,需要即时读取,methods是没有缓存的,效率不好
计算属性需要返回值,所以要return

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
--html
//直接调用
{{xxxx}}

--script
computed(){
    xxxx:{
        get(){
            //this 此处的this就是vue对象
            return ??
        },
        //数据被修改时,调用
        set(value){
        }
    }
}

计算属性简写

1
2
3
4
5
6
//只读不改可以简写
computed:{
    xxxx(){
        return ??
    }
}

监视属性watch

可以进行异步操作
vm.$watch('isxxx',{})//这个作用域在script,不能写在vue对象中
vue监测数据内部值,但watch 默认不监测数据内部的值,可以使用deep参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
watch:{
    isxxx:{
        immediate:true,//初始化时,立即执行handler
        //当参数变化时调用
        handler(newValue, oldValue){
            console.log()
        }
        deep:true//可以查看多级数据中内部的数据变化,深度观察监听
    }
    //例子
    xxxx(newValue){
        setTimeout((){
            console.log(this)//这里的this是window对象,是定时函数内部自己定义的对象
        });
        setTimeout(()=>{
            console.log(this)//这里的this是vue对象,箭头海曙自身没有this,向外找watch对应的对象
        });
    }
    //多级形式中watch
    'number.a':{}
}

监视属性简写

vm.$watch('isxxx', function(){})

1
2
3
4
5
watch:{
    isxxx(newValue, oldValue)){
       console.log() 
    }
}

变更样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
--html
<div class="xxx" :style="font" :style="['xxx','xxx']" :style="{fontSize:fsize+'px';}" :class="mood" :class="classarr" :class="classobj" @click="changeMode">{{name}}</div>
--script
data:{
    name:'hahaha',
    mood:'aaaa',
    classarr:['xxx','ddd'],
    //可以根据boolean来使class生效和失效
    classobj:{xxx:true,yyy:false},
    fsize:40,
    font:{fsize:40}
},
methods:{
    changeMode(){
        this.mood='dddd'
    }
}

条件渲染

v-show显示隐藏,底层是display
v-if,v-else-if,v-else

1
2
3
4
5
<h2 v-show="true"></h2>
<div v-if="1"></div>
<div v-else-if="1"></div>
<div v-else-if="1"></div>
<div v-else></div>

template模板与v-if配合使用,最后解析时会自动去掉

1
2
3
<template v-if="true">
    <ddddd>
</template>

列表渲染

遍历渲染,key是标识
数组遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
    <li v-for="p in persons" :key="p.id">{{p.id}}</li>
    <li v-for="(p,index) in persons" :key="index">{{p.id}}</li>
    <button @click.once="add"></button>
</ul>
data:{
    persons:[
        {id:'01',name:'aa',age:'19'}
    ]
},
methods:{
    add(){
        const p={id:'02',name:'bbb',age:'20'}
        //往数组persons添加一个p
        this.persons.unshift(p)
    }
}

对象遍历

1
2
3
4
5
6
7
8
9
<ul>
    <li v-for="p in persons" :key="p.id">{{p.id}}</li>
    <li v-for="(value,key) in cars" :key="key">{{p.id}}</li>
</ul>
data:{
    cars:
        {name:'aaa',price:'110',color:'blue'}
    
}

列表过滤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
watch:{
    keyword:{
        immediate:true,//初始化执行
        handler(){
            this.filPersons = this.persons.filter((p)=>{
                return p.name.indexof(val) !== -1
            })
        }
    }
}
computer:{
    filPersons(){
        return this.persons.filter((p)=>{
            return p.name.indexof(this.keyword) !== -1
        })
    }
}

列表排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
computer:{
    filPersons(){
        const arr = this.persons.filter((p)=>{
            return p.name.indexof(this.keyword) !== -1
        })
        //type !== 0 进逻辑
        if (this.sortType) {
           arr.sort(p1, p2) {
                return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
            }
        }
        return arr
    }
}

vue监测数据原理

对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let data={x:'ddd'}
const obs = new Observer(data)

//准备一个vm实例
let vm = {}
vm._data = data = obs

function Observer(obj) {
    //将对象中所有属性组成一个数组
    const keys = object.keys(obj)
    //遍历
    keys.forEach((k)=>{
        Object.defineProperty(this, k, {
            get(){return obj[k]}
            set(val){obj[k]=val}
        })
    })
}

vue.set()

可以后添加
vue.set(vm._data.xxx,属性,value)
vm.$set(vm._data.xxx,属性,value)

数组

通过一下方法进行修改数据

1
2
3
4
5
6
7
push
pop
shift
unshift
splice
sort
reverse

收集表单

1
2
<form @submit="xxx"></form>
JSON.stringify()

过滤器(vue3移除)

已经从vue3中移除了, 官方建议用compter或methods来实现相关功能
只能用在插值语法和v-bind

1
2
3
4
5
6
7
8
9
10
//按顺序执行
<h2>{{time | timeformater('YYYY') | slice}}</h2>
<h2 :x="xxx | slice">
//局部
filters:{
    timeformater(value){return formate}
    slice(){return}
}
//全局
Vue.filter('slice', function(value){return xxx})

自定义指令-函数式

指令中this指向的不是vue,而是window,因为直接操作页面元素了
两个时机调用:
1.指令和元素成功绑定时,就会响应
2.指令所在的模板重新解析时会调用自定义指令
全局:vue.directive('',{functions})

1
2
3
4
5
6
7
8
9
10
11
12
<span v-xxx="n"/>
directives:{
   //v-xxx=""
    //'xx-xxx':{}
    //这是简写方式
    //element是html的dom元素,即例子中的span元素
    //binding是value,即例子中的n
    xxx(element,binding){
       //控制元素,为span添加显示text,结果就是这个例子会在页面显示n所定义的值
        element.innerText = binding.value
    }
}

自定义指令-对象式

1
2
3
4
5
6
7
8
9
10
11
12
<input type="text" v-fbind:value="n">
directives:{
    fbind:{
        //指令与元素成功绑定时调用
        bind(){}
        //指令所在元素被插入到页面上时
        inserted(){}
        //指令所做模板重新被解析时
        update(){}
        
    }
}

生命周期

生命周期回调函数
vue的一生

将要创建=>调用beforeCreate函数
创建完毕=>调用created函数
挂载完毕=>调用mounted函数 ======>重要的钩子
将要更新=>调用beforeUpdate函数
更新完毕=>调用updated函数
将要销毁=>调用beforeDestroy函数 =====>重要的钩子
销毁完毕=>调用destroyed函数

1
2
3
4
//vue完成模板解析并把初始的真实dom放入页面后(完成挂载)调用mounted
mounted(){

}

生命周期-挂载流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//初始化生命周期\事件,但数据代理未开始
init...
//无法通过vue访问到data中的数据,methods中的方法
beforeCreate(){}
//初始化数据监测\数据代理
init...
//可以通过vue访问到data和methods
created(){}
//接下来阶段vue开始解析模板,生成虚拟dom(内存中),页面还不能显示解析好的内容
...
//页面呈现的未经vue编译的dom结构,所有对dom的操作都不奏效
beforeMount(){}
//将内存中虚拟dom转为真实dom插入页面
...
//页面呈现的是经过vue编译的dom结构,对dom操作均有效,至此初始化过程结束,一般在此进行:开启定时器,发送网络请求,订阅消息,绑定自定义事件等初始化操作
mounted(){}
//这里是生命周期-更新流程
mounted...

生命周期

生命周期-更新流程

在mounted和beforeDestroy之间

1
2
3
4
5
6
//此时数据是新的,但页面是旧的,即页面尚未和数据保持同步
beforeUpdate(){}
//根据新数据,生成新的虚拟dom,随后与旧的虚拟dom进行比较,最终完成页面更新,即:完成Model->view的更新
...
//数据是新的,页面也是新的,页面与数据保持同步
updated(){}

更新流程

生命周期-销毁流程

当vm.$destroy() is called时

1
2
3
4
5
6
7
//vue中所有的data,methods,指令等都处于可用状态,马上要执行销毁过程,一般进行:关闭定时器,气消订阅消息
beforeDestroy(){}
//
...
//
destroyed(){}

销毁流程

组件化编程

组件–实现应用中局部功能代码和资源的集合

组件化编程-非单文件组件

1.创建组件
2.注册组件
3.编写组件标签
全局:Vue.components('组件名', {})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//编写组件标签
<xxx/>

//创建组件
Vue.component('xxx', xxx)//全局组件，所有vue都能用，ds\dd两个都能用
const xxx = Vue.extend({
    //el:'#root',//组件一定不要写el配置项，因为所有组件都要被一个vm管理，
    template:`
        <div>{{a}}<div>
        <button>
    `
    //data必须使用函数方式
    data(){
        return{
            a:10
        }
    },
    methods:{}
})
let dd = new Vue(){
    el:'#root'
    components:{
        xxx
    }
}
let sd = new Vue(){
    ...
    components:...
}

组件嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
//组件2要写在组件1中
const 组件2 = Vue.extend()

//创建组件
const 组件1 = Vue.extend({
    template:`
        <组件2/>
    `
    //组件中嵌套组件
    components:{
        组件2
    }
})

Vuecomponent

组件本质上是一个Vuecomponent的构造函数,是vue.extend生成的。
每次调用一个vue.extend都会生成一个全新的Vuecomponent函数
Vuecomponent实例是可以访问到Vue实例上的属性方法，原因是vuecomponent原型属性指向了vue的原型属性

组件化编程-单文件组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- xxx.vue -->
<template>
    <!--组件的结构-->
    <div>{{a}}<div>
    <button>
</template>
<script>
//组件交互相关的代码（数据，方法）
//-----------第一个书写方式-------------
const xxxmethod = vue.extend({
    data(){},
    method:{}
})
//将这个组件文件暴露出去，好方便别的文件引用
// export {xxxmethod}
export default xxxmethod
//-------------第一个方式结束-------------------

//-----------第二个书写方式-------------
export defalue {
    name: "xxx",//最好和文件名相同，并且使用大驼峰写法
    data(){},
    method:{}
}
//-------------第二个方式结束-------------------
</script>
<style>
    /*组件的样式 */
</style>

写完组件后，开始引入组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--App.vue-->
<template>
    <div>
        <!--使用组件-->
        <xxx></xxx>
    <div>
</template>

<script>
//组件交互相关的代码（数据，方法）
import xxx from './xxx'

export defalue {
    name: "App",//最好和文件名相同，并且使用大驼峰写法
    components:{
        xxx
    }
}
</script>
<style>
</style>

写完App.vue后,需要引入到main.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
import App from './App.vue'
new Vue({
    el:'#root',
    components:{
        App
    }
})
//或者这样
new Vue({
    components:{
        App
    }
}).$mount('#root')

index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  </head>
  <body>
    <div id="root">
        <App/>
    </div>
  </body>
</html>

vue脚手架(vue cli)

vue command line interface 命令行工具
vue开发的标准工具

目录结构

babel.config.js ES6->ES5
package.json 依赖
package-lock.json 包版本控制

npm run后，第一时间加载main.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from "vue";//这个vue指向了哪个文件？看node_modules/vue/package.json文件中的module属性
new Vue({
  store,
  router,
  render: (h) => h(App),
  //使用render创建容器
//   render(createElement){
//     return createElement('h1','你好')
//   }
//  render: createElement => createElement('h1','你好'),
  data: {
    // 空的实例放到根组件下，所有的子组件都能调用
    Bus: new Vue(),
  },
}).$mount("#app");

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <!-- 针对ie浏览器，表示使用ie最高渲染级别渲染， -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 开启移动端的理想端口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <!-- 页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>xxx.ico" />
    <!-- 从package.json中获取项目的name，作为网页标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时，显示以下报错 -->
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

webpack相关配置

vue隐藏了所有webpack相关的配置，如果想看，需要执行如下命令
vue inspect > output.js
如果需要给这些相关的配置，需要建文件vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  pages:{
    index:{
        //入口
        entry:'src/main.js'
    },
  },
  lintOnSave:false //关闭检查
}

ref属性

这个属性是被用来给元素或子组件注册引用信息（id的替代）
应用在html标签中是dom元素，应用在组件中，则是组件的实例对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
    <div>
        <!-- ref的使用方法 -->
        <h1 v-text='msg' ref='title'></h1>
        <button @click="showDom">ok</button>
        <xxx ref='shxx'></xxx>
    <div>
</template>

<script>

export defalue {
    name: "App",//最好和文件名相同，并且使用大驼峰写法
    components:{
        xxx
    }
    data(){
        return {
            msg='欢迎你'
        }
    },
    methods:{
        showDom(){
            //给那个页面标签添加，ref,this.$refs就能获取到哪个页面标签
            this.$refs.title //获取到的是真实dom元素
            this.$refs.shxx //获取的是子组件实例对象
        }
    }
}
</script>

props属性

props可以从主组件传入数据
主组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <div>
        <!-- age使用v-bind，说明是动态绑定，所以在组件中-+1,就能识别是字符串 -->
        <xxx name='谢谢' :age='18'></xxx>
    <div>
</template>

<script>

export defalue {
    name: "App",//最好和文件名相同，并且使用大驼峰写法
    components:{
        xxx
    }
}
</script>

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
    <div>
        <!-- ref的使用方法 -->
        <h1>姓名：{{name}}</h1>
        <h1>年龄：{{age+1}}</h1>
    <div>
</template>

<script>
export defalue {
    name: "xxx",//最好和文件名相同，并且使用大驼峰写法
    data(){
        return {
            // 因为props里面的参数优先级是高于data中的参数的，所以可以使用this.
            myAge:this.age
        }
    },
    props:['name', 'age']
    //还有中写法,可以确认类型，如果传的类型不对，会报错
    props:{
        name:String
        age:number
    }
    //还有种写法
    props:{
        name:{
            type:String
            required:true//说明是必填
        },
        age:{
            type:number
            default:31 //说明是默认值
        }
    } 
}
</script>

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一个弱小的程序员<br><br>慢慢成长中<br>