Vue基础

Posted 2023-03-30 MoYuP_ENG

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础相关的知识，希望对你有一定的参考价值。

Vue简介

Vue是什么

是一套用于构建用户界面的渐进式javascript框架

简单应用：只需一个轻量小巧的核心库

复杂应用：可以引入各式各样的Vue插件

渐进式：Vue可以自底向上逐层的应用（从简单应用到复杂应用就是渐进式）

Vue特点：

1、采用组件化模式，提高代码复用率、且让代码更好维护

2、声明式编码，让编码人员无需直接操作DOM，提高开发效率

3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

初始Vue

1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

      const vm = new Vue(
            el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:  //data中用于存储数据，数据供el所指定的容器去使用
                name: '我恁爹'
            
        );

2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法

<h1>Hello,name</h1>

3、root容器里的代码被称为【Vue模板】

4、Vue实例和容器是一一对应的

5、真实开发中只有一个Vue实例，并且会配合着组件一起使用

6、XXX中的XXX要写js表达式，且XXX可以自动读取到data中的所有属性

7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

Vue模板

插值语法

功能: 用于解析标签体内容

语法: xxx

xxxx 会作为 js 表达式解析，且可以直接读到data中的所有属性

例：

<h3>你好，name</h3>

指令语法

功能: 解析标签属性、解析标签体内容、绑定事件。。。

语法：v-bind:href = 'xxxx'

xxxx 会作为 js 表达式被解析（可以简写为：href=“xxxx”）

说明：Vue 中有很多的指令，形式都是v-？？？，此处只是用 v-bind 举个列

<a v-bind:href="url">点我去尚硅谷学习</a>

数据绑定方式

单向数据绑定

语法：v-bind:href ="xxx" 或简写为 :href

特点：数据只能从 data 流向页面

<input type="text" v-bind:value="name">

双向数据绑定

语法：v-mode:value="xxx" 或简写为 v-model="xxx"

特点：数据不仅能从 data 流向页面，还能从页面流向 data

注：双向绑定一般都应用在表单元素上（如input、select）

v-model：value可以简写为v-model，因为v-model默认收集的就是value值

<input type="text" v-model:value="name">

el和data的两种写法

el

1、new Vue时配置el属性

  new Vue(
            el: '#root',//第一种
            data: 
                name: 'sb'
            
        )

2、先创建Vue 实例，随后通过vm.$mount('#root')指定el的值

v.$mount('#root') //第二种

data

1、对象式

  data的第一种写法，对象式
             data: 
                 name: 'sb'

2、函数式

使用组件时，data必须使用函数式，否则会报错

//data的第二种写法，函数式
            data() 
                console.log(this);
                return 
                    name: 'sb'

注：由Vue管理的函数，一定不要写箭头函数，因为箭头函数的this指向不是Vue实例

mvvm模型

M：模型(Model) ：对应 data 中的数据

V：视图(View) ：模板

VM：视图模型(ViewModel) ： Vue 实例对象

注：data中所有的属性，最后都出现在了vm身上

vm身上所有的属性及Vue原型上的所有属性，在Vue模板中都可以直接使用

数据代理

Object.defineProperty()方法

        let number = 18;
        let person = 
            name: 'sv',
            sex: 'man'
        
        Object.defineProperty(person, 'age', 

            // enumerable: true, //控制属性是否可以枚举（遍历），默认值是false
            // writable: true, //控制属性是否可以被修改，默认值是false
            // configurable: true //控制属性是否可以被删除，默认值是false
            //当有人读取person对象的age属性时，get函数（getter）就会被调用，且返回值就是age的值
            get() 
                console.log('有人读取age属性了');
                return number;
            ,

            //当有人修改person对象的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
            set(value) 
                console.log('有人修改了age属性，且值是', value);
                number = value;
            
        )

通过一个对象对另一个对象中属性的操作（读/写）就是数据代理

例：通过obj2操作obj1中的x

        let obj1 = 
            x: 100
        
        let obj2 = 
            y: 200

        
        Object.defineProperty(obj2, 'x', 
            get() 
                return obj1.x
            ,
            set(value) 
                obj1.x = value
            
        )

Vue中的数据代理

通过vm对象来代理data对象中属性的操作（读/写）

好处：更加方便的操作data中的数据

原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性

事件处理

事件的基本使用

语法：使用v-on：xxx 或 @xxx 绑定事件，其中xxx是事件名

事件的回调需配置在methods对象中，最终会在vm上

methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象

@click=“demo” 和 @click=“demo（$event）” 效果一样，但后者可以传参

   <div id="root">
        <h2>你是来name的吧！</h2>
        <button v-on:click="showInfo1">需要手纸吗(不传参)</button>
        <button @click="showInfo2($event,'老六')">需要手纸吗（传参）</button>
    </div>

  new Vue(
            el: '#root',
            data: 
                name: '拉屎'
            ,
            methods: 
                showInfo1() 
                    alert('叫爸爸！')
                ,
                showInfo2(event, number) 
                    alert(number + '叫爸爸！！')
                
            
        )

事件修饰符

prevent：阻止默认事件（常用）

<a href="http://www.baidu.com" @click.prevent="showInfo">快张嘴</a>

stop：阻止事件冒泡（常用）

<div class="demo1" @click="showInfo">
    <button @click.stop="showInfo">给我张开！</button>
    <!-- 修饰符可以连续写 -->
    <!-- <a href="http://www.baidu.com" @click.stop.prevent="showInfo"></a> -->
</div>

once：事件只触发一次（常用）

<button @click.once="showInfo">我最后说一次！张开！</button>

capture：使用事件的捕获模式（外层执行）

<div class="box1" @click.capture="showMsg('靓仔')">
    div1
    <div class="box2" @click="showMsg('吊毛')">div2</div>
</div>

self：只有event.target是当前操作的元素时才触发的元素（也可以阻止冒泡）

<div class="demo1" @click.self="showInfo">
    <button @click.stop="showInfo">给我张开！</button>
</div>

passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!-- scroll是给滚动条添加滚动事件，wheel是给滚轮添加滚动事件 -->
<ul class="list" @wheel.passive="demo">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>

     new Vue(
            el: '#root',
            data: 
                name: '小飞棍'
            ,
            methods: 
                showInfo(e) 
                    alert('啊！！！')
                ,
                showMsg(msg) 
                    console.log(msg);
                ,
                demo() 
                    for (let i = 0; i < 1000000; i++) 
                        console.log('#');
                    
                    console.log('一滴都没了');
                
            
        )

键盘事件

1、Vue中常用的按键别名：

回车：enter

删除：delete（捕获’删除‘和’退格’键）

退出：esc

空格：space

换行：tab（特殊，必须配合keydown去使用）

上：up

下：down

左：left

右：right

2、Vue为提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3、系统修饰键（特殊）：ctrl、alt、shift、meta

配合keyup使用：按下修饰键的同时，在按下其他键（可以固定一个键生效，例如@keyup.ctrl.y），随后释放其他键，事件才被释放

配合keydown使用：正常触发事件

4、也可以使用keyCode去指定具体的按键（不推荐）

5、Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

计算属性

定义：要用的属性不存在，要通过已有的属性计算得来

原理：底层借助了Object.defineproperty方法提供的getter和setter

get函数什么时候执行？

1、初次读取时执行一次

2、当依赖的数据发生改变时会被再次调用

优势：与methods实现相比，内部有缓存机制（复用），效率更高

注：

1、计算属性最终都会出现在vm上，直接读取使用即可

2、如果计算属性要被修改，那必须写set函数去响应修改，且set中引起计算时依赖的数据发生改变

    <div id="root">
        姓：<input type="text" v-model="firstName"><br> 
        名：<input type="text" v-model="lastName"><br> 
        全名：<span>fullName</span>
    </div>

        new Vue(
            el: '#root',
            data: 
                firstName: '张',
                lastName: '三'
            ,
            computed: 
                fullName: 
                    //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    //get什么时候调用？1.初次读取fullName时 2、所依赖的数据发生变化时
                    get() 
                        //此处的this是vm
                        return this.firstName + '-' + this.lastName
                    ,
                    //set什么时候调用？当fullName被修改时
                    set(value) 
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    
                
            
        )

只考虑读取不考虑修改的时候就可以使用简写形式

        new Vue(
            el: '#root',
            data: 
                firstName: '张',
                lastName: '三'
            ,
            computed: 
                fullName() 
                    return this.firstName + '-' + this.lastName
                
            
        )

监视属性watch

当被监视的属性变化时，回调函数自动调用，进行相关操作

    <div id="root">
        <h2>今天天气很info</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

监视的属性必须存在，才能进行监视！！

监视的两种方法：

new Vue时传入watch配置

 const vm = new Vue(
            el: '#root',
            data: 
                isHot: true
            ,
            computed: 
                info() 
                    return this.isHot ? '炎热' : '冻人'
                
            ,
            methods: 
                changeWeather() 
                    this.isHot = !this.isHot
                
            ,
             watch: 
                 isHot: 
                     handler(newValue, oldValue) 
                         // immediate:true,//初始化时让handler调用一下 
                         console.log('isHot被修改了', newValue, oldValue);
                     
                 
             
        )

通过vm.$watch监视

        vm.$watch('isHot', 
            handler(newValue, oldValue) 
                console.log('isHot被修改了', newValue, oldValue);
            
        )

深度监视

Vue中的watch默认不监测对象内部值的改变（一层）

配置deep：true可以监测对象内部值改变（多层）

注：

Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

使用watch时根据数据的具体结构，决定是否采用深度监视

watch简写

            watch: 
                isHot(newValue, oldValue) 
                    console.log('isHot被修改了', newValue, oldValue);

vm.$watch简写

        vm.$watch('isHot', function(newValue, oldValue) 
            console.log('isHot被修改了', newValue, oldValue);
        )

computed和watch之间的区别

1、computed能完成的功能，watch都可以完成

2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则：

1、所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象

2、所有不被Vue所管理的函数（定时器的回调、ajax的回调等），最好写成箭头函数，这样this的指向才是vm 或组件实例

绑定样式

class样式

语法： :class="xxx"

xxx可以是字符串、对象、数组（这三个数据类型是指在vm的data中存储的数据类型）。

字符串写法适用于：类名不确定，要动态获取。

<div class="basic" :class="mood" @click="changeMood">name</div>

 mood: 'normal',

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

<div class="basic" :class="classArr">name</div>

classArr: ['atguigu1', 'atguigu2', 'atguigu3'],

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

<div class="basic" :class="classObj">name</div>

classObj: 
     atguigu1: false,
     atguigu2: false,
,

style样式

语法：:style="fontSize: xxx"

其中xxx是动态值

<div class="basic" :style="styleObj">name</div>

styleObj: 
    fontSize: '40px',
    color: 'red',
,

语法：:style="[a,b]"是（数组对象）

其中a、b是样式对象。

<div class="basic" :style="styleArr">name</div>

styleArr: [
    fontSize: '40px',
    color: 'blue',
, 
    backgroundColor: 'gray'
]

条件渲染

v-if

写法：

(1).v-if="表达式"

<h2 v-if="false">欢迎来到name</h2>

(2).v-else-if="表达式"

<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>

(3).v-else="表达式"

<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”（中间不能插入其他元素），v-else-if、v-else不能单独使用，要配合v-if一起使用。

v-show

语法：v-show="表达式"

<h2 v-show="false">欢迎来到name</h2>

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

v-if与template的配合使用，template不影响结构，渲染时自动脱掉

<template v-if="n === 1">
		<h2>你好</h2>
		<h2>尚硅谷</h2>
		<h2>北京</h2>
</template>

基本列表

v-for指令（遍历）

用于展示列表数据

语法：v-for="(item, index) in xxx" :key="yyy"

可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

面试题：react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

对比规则：

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到到页面。

用index作为key可能会引发的问题：

若对数据进行：逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

如果结构中还包含输入类的DOM：

会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key?

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

列表过滤（案例）

    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPerons" :key="index">
                p.name-p.age-p.sex
            </li>
        </ul>
    </div>

watch（监视属性）实现

          new Vue(
        	el:'#root',
        	data:
        		keyWord:'',
        		persons:[
        			id:'001',name:'马冬梅',age:19,sex:'女',
        			id:'002',name:'周冬雨',age:20,sex:'女',
        			id:'003',name:'周杰伦',age:21,sex:'男',
        			id:'004',name:'温兆伦',age:22,sex:'男'
        		],
        		filPerons:[]
        	,
        	watch:
        		keyWord:
        			immediate:true,
        			handler(val)
        				this.filPerons = this.persons.filter((p)=>
        					return p.name.indexOf(val) !== -1
        				)
        			
        		
        	
        )

computed（计算属性）实现

        new Vue(
            el: '#root',
            data: 
                keyWord: '',
                persons: [
                    id: '001',name: '马冬梅',age: 19,sex: '女', 
                    id: '002',name: '周冬雨',age: 20,sex: '女', 
                    id: '003',name: '周杰伦',age: 21,sex: '男', 
                    id: '004',name: '温兆伦',age: 22,sex: '男'
                ]
            ,
            computed: 
                filPerons() 
                    return this.persons.filter((p) => 
                        return p.name.indexOf(this.keyWord) !== -1
                    )
                
            
        )

列表排序（案例）

    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPerons" :key="p.id">
                p.name-p.age-p.sex
                <input type="text">
            </li>
        </ul>
    </div>

        new Vue(
            el: '#root',
            data: 
                keyWord: '',
                sortType: 0, //0原顺序 1降序 2升序
                persons: [
                    id: '001',
                    name: '马冬梅',
                    age: 30,
                    sex: '女'
                , 
                    id: '002',
                    name: '周冬雨',
                    age: 31,
                    sex: '女'
                , 
                    id: '003',
                    name: '周杰伦',
                    age: 18,
                    sex: '男'
                , 
                    id: '004',
                    name: '温兆伦',
                    age: 19,
                    sex: '男'
                ]
            ,
            computed: 
                filPerons() 
                    const arr = this.persons.filter((p) => 
                            return p.name.indexOf(this.keyWord) !== -1
                        )
                        //判断一下是否需要排序
                    if (this.sortType) 
                        arr.sort((p1, p2) => 
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        )
                    
                    return arr
                
            
        )

Vue监视数据的原理

vue会监视data中所有层次的数据。

如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName/index，value)

或

vm.$set(target，propertyName/index，value)

如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法：

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性！！！

收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

若：<input type="checkbox"/>

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

注册过滤器

Vue.filter(name,callback) 或 new Vuefilters:

使用过滤器

xxx | 过滤器名或 v-bind:属性 = "xxx | 过滤器名"

备注：

1.过滤器也可以接收额外参数、多个过滤器也可以串联

2.并没有改变原本的数据, 是产生新的对应的数据

内置指令

学过的指令

v-bind : 单向绑定解析表达式, 可简写为 :xxx

v-model : 双向数据绑定

v-for : 遍历数组/对象/字符串

v-on : 绑定事件监听, 可简写为@

v-if : 条件渲染（动态控制节点是否存存在）

v-else : 条件渲染（动态控制节点是否存存在）

v-show : 条件渲染 (动态控制节点是否展示)

v-text指令

作用：向其所在的节点中渲染文本内容。

与插值语法的区别：v-text会替换掉节点中的内容，xx则不会。

v-html指令

作用：向指定节点中渲染包含html结构的内容。

与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，xx则不会。

(2).v-html可以识别html结构。

严重注意：v-html有安全性问题！！！！

(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

v-cloak指令（没有值）

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

使用css配合v-cloak可以解决网速慢时页面展示出xxx的问题。

v-once指令

v-once所在节点在初次动态渲染后，就视为静态内容了。

以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令

跳过其所在节点的编译过程。

可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

定义语法：

局部指令：

new Vue(      directives:指令名:配置对象 )

或

new Vue( directives指令名:回调函数 )

全局指令（new Vue外）：

Vue.directive(指令名,配置对象)

或

Vue.directive(指令名,回调函数)

配置对象中常用的3个回调

(1).bind：指令与元素成功绑定时调用。

(2).inserted：指令所在元素被插入页面时调用。

(3).update：指令所在模板结构被重新解析时调用。

注：一般来说，bind和update中的内容基本一致

例：创建一个fbind自定义属性

 fbind: 
                //指令与元素成功绑定时（一上来）
                bind(element, binding) 
                    element.value = binding.value
                ,
                //指令所在元素被插入页面时
                inserted(element, binding) 
                    element.focus()
                ,
                //指令所在的模板被重新解析时
                update(element, binding) 
                    element.value = binding.value

备注：

1.指令定义时不加v-，但使用时要加v-；

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名，出现这种情况使用引号将名字括住，不然会报错。

生命周期

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或组件实例对象。

生命周期分析

1) 初始化显示

beforeCreate()数据代理、数据监测前

此时，无法通过vm访问到data中的数据、methods中的方法

created()数据代理、数据监测后

此时，可以通过vm访问到打data的数据、methods中配置的方法

beforeMount()虚拟DOM转为真实DOM前

此时：页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作都不奏效

mounted()虚拟DOM转为真实DOM后

此时：页面呈现的是经过Vue编译的DOM结构，所有对DOM的操作都奏效（尽量避免操作），一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件

2) 更新状态: this.xxx = value

beforeUpdate()数据更新前

此时，数据是新的，页面是旧的。即：页面和数据未保持同步

updated()数据更新后

此时，数据与页面都是新的。即：页面和数据保持同步

销毁 vue 实例: vm.$destory()

beforeDestory()

此时：vm中所有的data、methods、指令等都处于可用状态（可用但不再进行数据更新），马上执行销毁过程。一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾工作

destoryed()

常用的生命周期钩子

1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

vue基础1--脚手架的使用与vue基础指令

安装 vue-devtools

vue控制台插件我上传到百度网盘了

链接：https://pan.baidu.com/s/1MQ06uvpibKJGD5joO1DIAg
提取码：yd26

咋装：

在谷歌浏览器中输入chrome://extensions/，
直接把下载解压的东西拖进去即可

安装vscode插件

vue文件代码高亮插件-vscode中安装

代码提示插件-vscode中安装

1. Vue基本概念

1.1 Vue是什么

渐进式javacript框架, 一套拥有自己规则的语法

官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)

1.2 Vue学习的方式

传统开发模式：基于html/css/js文件开发vue

工程化开发方式：在webpack环境中开发vue，这是最推荐, 企业常用的方式

2. @vue/cli脚手架

2.1 @vue/cli 脚手架介绍

@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目

脚手架是为了保证各施工过程顺利进行而搭设的工作平台

2.2@vue/cli的好处

开箱即用
0配置webpack
babel支持
css, less支持
开发服务器支持

2.3 @vue/cli安装

全局安装命令

yarn global add @vue/cli
# OR
npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl c

停止重新来
换一个网继续重来

查看vue脚手架版本

vue -V

如果出现版本号就安装成功, 否则失败

2.4 @vue/cli 创建项目启动服务

注意: 项目名不能带大写字母, 中文和特殊符号

创建项目

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

选择模板

可以上下箭头选择, 弄错了ctrl+c重来

选择用什么方式下载脚手架项目需要的依赖包

回车等待生成项目文件夹+文件+下载必须的第三方包们
进入脚手架项目下, 启动内置的热更新本地服务器

cd vuecil-demo

npm run serve
# 或
yarn serve

只要看到绿色的 - 你成功了

打开浏览器输入上述地址

2.5 @vue/cli 目录和代码分析

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json  # 依赖包列表
    ├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址

主要文件及含义

node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件

2.6 @vue/cli 项目架构了解

2.7 @vue/cli 自定义配置

目标：项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js

src并列处新建vue.config.js

/* 覆盖webpack的配置 */
module.exports = 
  devServer:  // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000

2.8 eslint了解

目标: 知道eslint的作用, 和如何暂时关闭, 它是一个代码检查工具

例子: 先在main.js 随便声明个变量, 但是不要使用

观察发现, 终端和页面都报错了

记住以后见到这样子的错误, 证明你的代码不严谨

方式1: 手动解决掉错误, 以后项目中会讲如何自动解决

方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务

2.9 @vue/cli 单vue文件讲解

Vue推荐采用.vue文件来开发项目

template里只能有一个根标签

vue文件-独立模块-作用域互不影响

style配合scoped属性, 保证样式只针对当前template内标签生效

vue文件配合webpack, 把他们打包起来插入到index.html

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default 
  name: 'App'

</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>

最终: Vue文件配合webpack, 把他们打包起来插入到index.html, 然后在浏览器运行

2.10 @vue/cli 欢迎界面清理

src/App.vue默认有很多内容, 可以全部删除留下框
assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)

3. Vue指令

3.0_vue基础-插值表达式

别称: 声明式渲染/文本插值

语法: 表达式

<template>
  <div>
    <h1> msg </h1>
    <h2> obj.name </h2>
    <h3> obj.age > 18 ? '成年' : '未成年' </h3>
  </div>
</template>

<script>
export default 
  data()  // 格式固定, 定义vue数据之处
    return   // key相当于变量名
      msg: "hello, vue",
      obj: 
        name: "小vue",
        age: 5
      
    
  

</script>

<style>
</style>

3.1 vue基础-MVVM设计模式

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。

MVVM，一种软件架构模式，决定了写代码的思想和层次
- M： model数据模型 (data里定义)
- V： view视图（html页面）
- VM： ViewModel视图模型 (vue.js源码)

MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM
- V（修改视图） -> M（数据自动同步）
- M（修改数据） -> V（视图自动同步）

在vue中，不推荐直接手动操作DOM！！！
在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！

3.2 vue指令-v-bind

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个指令, 都有独立的作用

语法：v-bind:属性名="vue变量"
简写：:属性名="vue变量"

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

3.3 vue指令-v-on

语法
- v-on:事件名=“要执行的少量代码”
- v-on:事件名=“methods中的函数”
- v-on:事件名=“methods中的函数(实参)”
简写: @事件名=“methods中的函数”

<!-- vue指令:   v-on事件绑定-->
<p>你要买商品的数量: count</p>
<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>

<button @click="subFn">减少</button>

<script>
    export default 
        // ...其他省略
        methods: 
            addFn() // this代表export default后面的组件对象(下属有data里return出来的属性)
                this.count++
            ,
            addCountFn(num)
                this.count += num
            ,
            subFn()
                this.count--
            
        
    
</script>

3.4 vue指令-v-on事件对象

语法:
- 无传参, 通过形参直接接收
- 传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default 
  methods: 
    one(e)
      e.preventDefault()
    ,
    two(num, e)
      e.preventDefault()
    
  

</script>

3.5 vue指令-v-on修饰符

语法:
- @事件名.修饰符=“methods里函数”
  - .stop - 阻止事件冒泡
  - .prevent - 阻止默认行为
  - .once - 程序运行期间, 只触发一次事件处理函数

<template>
  <div @click="fatherFn">
    <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
    <button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
  </div>
</template>

<script>
export default 
  methods: 
    fatherFn()
      console.log("father被触发");
    ,
    btn()
      console.log(1);
    
  

</script>

3.6 vue指令-v-on按键修饰符

目标: 给键盘事件, 添加修饰符, 增强能力

语法:
- @keyup.enter - 监测回车按键
- @keyup.esc - 监测返回按键

更多修饰符

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default 
 methods: 
   enterFn()
     console.log("enter回车按键了");
   ,
   escFn()
     console.log("esc按键了");
   
 

</script>

3.7 vue指令 v-model

目标: 把value属性和vue数据变量, 双向绑定到一起

语法: v-model=“vue数据变量”
双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
演示: 用户名绑定 - vue内部是MVVM设计模式

<template>
  <div>
    <!-- 
    	v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
    -->
    <div>
      <span>用户名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码:</span>
      <input type="password" v-model="pass" />
    </div>
    <div>
      <span>来自于: </span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
      <span>爱好: </span>
      <input type="checkbox" v-model="hobby" value="抽烟">抽烟
      <input type="checkbox" v-model="hobby" value="喝酒">喝酒
      <input type="checkbox" v-model="hobby" value="写代码">写代码
    </div>
    <div>
      <span>性别: </span>
      <input type="radio" value="男" name="sex" v-model="gender">男
      <input type="radio" value="女" name="sex" v-model="gender">女
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      username: "",
      pass: "",
      from: "",
      hobby: [], 
      sex: "",
      intro: "",
    ;
    // 总结:
    // 特别注意: v-model, 在input[checkbox]的多选框状态
    // 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
    // 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
  
;
</script>

3.8 vue指令 v-model修饰符

语法:
- v-model.修饰符=“vue数据变量”
  - .number 以parseFloat转成数字类型
  - .trim 去除首尾空白字符
  - .lazy 在change时触发而非inupt时

<template>
  <div>
    <div>
      <span>年龄:</span>
      <input type="text" v-model.number="age">
    </div>
    <div>
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto">
    </div>
    <div>
      <span>自我介绍:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      age: "",
      motto: "",
      intro: ""
    
  

</script>

3.9 vue指令 v-text和v-html

语法:
- v-text=“vue数据变量”
- v-html=“vue数据变量”
注意: 会覆盖插值表达式

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default 
  data() 
    return 
      str: "<span>我是一个span标签</span>"
    
  

</script>

3.10 vue指令 v-show和v-if

语法:
- v-show=“vue变量”
- v-if=“vue变量”
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上移除
高级
- v-else使用

<template>
  <div>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <p v-if="age > 18">我成年了</p>
      <p v-else>还得多吃饭</p>
    </div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      isOk: true,
      age: 15
    
  

</script>

3.11 vue指令-v-for

目标: 列表渲染, 所在标签结构, 按照数据数量, 循环生成

语法
- v-for="(值, 索引) in 目标结构"
- v-for=“值 in 目标结构”
目标结构:
- 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
注意:

v-for的临时变量名不能用到v-for范围外

<template>
  <div id="app">
    <div id="app">
      <!-- v-for 把一组数据, 渲染成一组DOM -->
      <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
      <p>学生姓名</p>
      <ul>
        <li v-for="(item, index) in arr" :key="item">
           index  -  item 
        </li>
      </ul>

      <p>学生详细信息</p>
      <ul>
        <li v-for="obj in stuArr" :key="obj.id">
          <span> obj.name </span>
          <span> obj.sex </span>
          <span> obj.hobby </span>
        </li>
      </ul>

      <!-- v-for遍历对象(了解) -->
      <p>老师信息</p>
      <div v-for="(value, key) in tObj" :key="value">
         key  --  value 
      </div>

      <!-- v-for遍历整数(了解) - 从1开始 -->
      <p>序号</p>
      <div v-for="i in count" :key="i"> i </div>
    </div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        ,
        
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        ,
      ],
      tObj: 
        name: "小黑",
        age: 18,
        class: "1期",
      ,
      count: 10,
    ;
  ,
;
</script>

以上是关于Vue基础的主要内容，如果未能解决你的问题，请参考以下文章