Vue2---

Vue2

简介

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

特点

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

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

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

安装

官网：Vue.js

学习——教程——安装——用<script>引入——选择开发版或生产版

使用前准备

<script src="../../Vue/vue.js">

将文件引入后打开浏览器测试，f12中会出现两个提示，第一个是提示安装开发者工具：

将vue_dev_tools.crx文件拖入到谷歌浏览器的扩展程序（设置—扩展程序）中

安装完毕后如果还是提示就在扩展中打开vue，设置允许访问文件地址！

如果另一个提示不想显示：在官网中点击API，找到全局配置productionTip。在html页面中引入

<script>
    Vue.config.productionTip = false;//阻止Vue在启动时生成生产提示
</script>

插件

Vue3 Snippets：vue代码提示

初识Vue

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

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

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

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

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

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

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

注意区分：js表达式和js代码(语句)

1）表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

(1). a

(2). a+b

(3). demo()

(4). x === y ? 'a' : 'b'

2）js代码(语句)

(1). if () {}

(2). for () {}

创建Vue实例：

<div id="root">
    你好！{
 {name}}<!-- 调用改动的值 -->
</div>
<script>
    const vm = new Vue({
        el:'#root',
        data: {//data中用于储存数据，数据供el所指定容器去使用，值可以写成对象或函数
                name: '世界'//存入要改动的值,如果有多个值，用逗号隔开
            }
    });
    //只传入一个参数—配置对象
    //el:'#root'：el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串(与id为root的元素建立联系)
    //            或者可以写成document.querySelector('#root');
</script>

el与data的两种写法

el：

const vm = new Vue({
    el:'#root'//第一种
})
console.log(vm);
vm.$mount('#root');//第二种.vm原型上的方法

data:

const vm = new Vue({
    //第一种:对象式
    data:{
        name:'刘德华'
    },
    //第二种：函数式
    data:function(){//简写为data(){}
        console.log(this);//this指向Vue的实例对象vm
        return{
            name:'刘德华'
        }
    }
})
console.log(vm);

由Vue接管的函数，一定不要写成箭头函数，一旦写了箭头函数，this就不再是Vue实例了

模板语法

插值语法：

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

写法：{ {xxx}},xxx是js表达式，且可以直接读取到data中的所有属性

指令语法：

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件....）

举例：v-bind:href="xxx" 或简写为:href="xxx"，xxx同样要写js表达式。且可以直接读取到data中的所有属性

备注：Vue中有很多指令，且形式都是：v-xxxx形式

<div id="root">
    <a v-bind:href="url">百度</a>
    <!-- v-bind: 可以简写成 : -->
    <a :href="url">百度</a>
</div>
<script>
    const vm = new Vue({
        el:'#root',
        data: {
                url:'https://www.baidu.com/'
            }
    });
</script>

数据绑定

Vue中由两种数据绑定的方式：

1、单向绑定(v-bind)：数据只能从data流向页面

2、双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data

备注：

(1)双向绑定一般都应用在表单类元素上（如：input、select等）

(2)v-model:value可以简写为v-model，因为v-model默认收集的就是value值

MVVM模型

M：模型（Model）：对应data中的数据

V：使徒（View）：模板

VM：视图模型（ViewModel）：Vue实例对象

备注：

(1)data中所有的属性，最后都出现在vm身上

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

数据代理

Object.definePropery()方法

定义

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

Vue中的数据代理

事件处理

事件的基本使用：

v-on:click简写：@click

<div id="root">
    <h1>学校</h1>
    <button v-on:click="show">
        提示信息
    </button>
</div>
<script>
    const vm = new Vue({
            methods: {
                show() { //show可以传参
                    alert('你好')
                }
            }
        });   
</script>

事件修饰符

1）prevent：阻止默认事件

2）stop：阻止事件冒泡

3）once：事件只触发一次

4）capture：使用事件的捕获模式

5）self：只有event.target是当前操作的元素时才触发事件

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

7）native: 组件上也可以绑定原生DOM事件，需要使用native修饰符

修饰符可以连写

<!--阻止默认事件 -->
<div id="root">
    <a href="https://www.baidu.com" @click.prevent="show">提示信息</a>
</div>
<script>
    const vm = new Vue({
            methods: {
                show() { //show可以传参
                    alert('你好')
                }
            }
        });   
</script>

键盘事件

Vue中常用的按键别名：

回车 => enter

删除 => delete（捕获退格和删除键）

退出 => esc

空格 => space

换行 => tab（特殊，要配合keydown使用）

上 => up

下 => down

左 => left

右 => right

Vue.config.keyCodes.自定义键名 = 键码 可以自定义案件名，如：

Vue.config.keyCodes.huiche = 13

<!-- 也可以使用keycode去指定具体的按键，比如回车的键码是13(不推荐) -->
<input type="text" placeholder="按下回车提示" @keydown.enter="show">
<input type="text" placeholder="按下回车提示" @keydown.13="show">

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转换为kebab-case(短横线命名--如：CapsLock转换为caps-lock)，可以通过e.key获得键名

系统修饰符(用法特殊)：ctrl、alt、shift、meta（win键）：

（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放修饰键，事件才能被触发（如果想绑定按下的另一个键，可以@keyup.ctrl.y）

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

计算属性

conputed

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

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

备注：计算属性最终会出现在vm上，直接读取即可({ {xxx}})

const vm = new Vue({
    conputed:{
        xxx:{
            get(){//当有人读取了xxx时，get就会被调用，且返回值就是xxx的值
                return 1
            }
            set(){//如果不需要修改可以不写
                
             }
        }
                   }
})

get调用：

1、初次读取xxx时

2、所依赖的数据发生变化时

set调用：当xxx被修改时

简写：

只有只读不修改的时候才可以使用

const vm = new Vue({
    conputed:{
        xxx(){//当做get使用
            
        }
    }
})

监视属性

watch

监视属性watch：

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

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

3.监视的两种写法：

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

深度监视：

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

(2).配置deep:true可以监测对象内部值改变（多层）。

备注：

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

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

<!-- 准备好一个容器-->
        <div id="root">
            <h2>今天天气很{
 {info}}</h2>
            <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
            <!-- <button @click="isHot = !isHot">切换天气</button> -->
            <button @click="changeWeather">切换天气</button>
        </div>
    </body>
​
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        
        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true,
                number:{
                    a:1,
                    b:2
                }
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            watch:{//第一种写法
                isHot:{
                    immediate:true, //初始化时让handler调用一下
                    //handler什么时候调用？当isHot发生改变时。
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue)
                    }
                }
                //监视多级结构中某个属性的变化
                 'numbers.a':{
                    handler(){
                        console.log('a被改变了')
                    }
                } 
                //监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
                    handler(){
                        console.log('numbers改变了')
                    }
                }
            }
        })
        //第二种写法

        vm.$watch('isHot',{
            immediate:true, //初始化时让handler调用一下
            //handler什么时候调用？当isHot发生改变时。
            handler(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue)
            }
        })
    </script>

简写

不使用immediate和deep时使用

isHot(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
//第二种
vm.$watch('isHot',(newValue,oldValue)=>{
            console.log('isHot被修改了',newValue,oldValue)
        })

conputed和watch区别

computed和watch之间的区别：

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

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

两个重要的小原则：

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

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，

这样this的指向才是vm 或 组件实例对象。

绑定CSS、style样式

:class :style

*绑定样式：

1. class样式

写法:class="xxx" xxx可以是字符串、对象、数组。

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

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

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

2. style样式

:style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

<style>
            .basic{
                width: 400px;
                height: 100px;
                border: 1px solid black;
            }
            
            .happy{
                border: 4px solid red;;
                background-color: rgba(255, 255, 0, 0.644);
                background: linear-gradient(30deg,yellow,pink,orange,yellow);
            }
            .sad{
                border: 4px dashed rgb(2, 197, 2);
                background-color: gray;
            }
            .normal{
                background-color: skyblue;
            }
​
            .atguigu1{
                background-color: yellowgreen;
            }
            .atguigu2{
                font-size: 30px;
                text-shadow:2px 2px 10px red;
            }
            .atguigu3{
                border-radius: 20px;
            }
        </style>
​
​
                                <div id="root">
            <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
            <div class="basic" :class="mood" @click="changeMood">{
 {name}}</div> <br/><br/>
​
            <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
            <div class="basic" :class="classArr">{
 {name}}</div> <br/><br/>
​
            <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
            <div class="basic" :class="classObj">{
 {name}}</div> <br/><br/>
​
            <!-- 绑定style样式--对象写法 -->
            <div class="basic" :style="styleObj">{
 {name}}</div> <br/><br/>
            <!-- 绑定style样式--数组写法 -->
            <div class="basic" :style="styleArr">{
 {name}}</div>
                                </div>
​
<script>        
        const vm = new Vue({
            el:'#root',
            data:{
                name:'尚硅谷',
                mood:'normal',
                classArr:['atguigu1','atguigu2','atguigu3'],
                classObj:{
                    atguigu1:false,
                    atguigu2:false,
                },
                styleObj:{
                    fontSize: '40px',
                    color:'red',
                },
                styleObj2:{
                    backgroundColor:'orange'
                },
                styleArr:[
                    {
                        fontSize: '40px',
                        color:'blue',
                    },
                    {
                        backgroundColor:'gray'
                    }
                ]
            },
            methods: {
                changeMood(){
                    const arr = ['happy','sad','normal']
                    const index = Math.floor(Math.random()*3)
                    this.mood = arr[index]
                }
            },
        })
    </script>

条件渲染

条件渲染指令：

• v-if、v-else、v-else-if

写法：

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

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

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

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

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

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

• v-show

v-show

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

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

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

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

<!-- 准备好一个容器-->
        <div id="root">
            <h2>当前的n值是:{
 {n}}</h2>
            <button @click="n++">点我n+1</button>
            <!-- 使用v-show做条件渲染 -->