初识Vue(1)

​
​

活动地址：CSDN21天学习挑战赛

1、Vue的基本使用

通过官网提供的Script 标签将Vue引入

然后通过实例化Vue开始编写代码

我们需要向实例化的Vue中提供一个对象，该对象是用来进行基础配置的

例如选定的容器，或者是需要指定的参数

代码演示如下:

<div id="root">
    <h1>Hello {{name}}!</h1>
</div>
<script>
    Vue.config.productionTip = false
    
    // 创建一个实例
    new Vue({
         // 用于指定当前vue实例的容器 ，值通常为css选择器
        el:"#root",
        // data用于存储数据,数据供el指定的容器使用
        data:{ 
            name:"CareeBy"
        },
    })
</script>

实例化的Vue中提供了两个基础配置 el 和 data

el: 用于指定当前vue的容器，其值通常为css选择器

data: 用于存储数据，其值通常为一个对象,其值都拥有对应的Key

在div 中通过“ {{ key }} ” 进行数据的改变 关键为{{ }} 这个插值语法

{{xxx}}中的xxx要写JS表达且xxx可以自动读取到data中的所有属性

一旦data中的数据发生改变，那么模板中要用到该数据的地方也会自动更新

---

2、Vue的注意事项

**注意一：**一个Vue实例只能接管一个容器，哪怕下面的类名一致也不行，接管循序是按照代码的先后顺所定

**注意二：**创建两个实例去同时接管一个容器，代码必定报错，还是那句话一个Vue实例只能接管一个容器

注意三：{{}}这个标志中用来接收data中的key值，意味着data中未定义的key不能写入其中，但是定义了的值可以不写

注意四：{{}}这个标记中虽然不能写未定义的key值但是可以写入JS格式的代码/JS语句，例如JS的data对象，JS的运算、

主语区分JS表达式和JS代码

JS表达式：一个表达式生成的值，可以放在任何一个需要值的地方

JS代码：语句

JS表达式为特殊的JS代码

---

3、模板语法

什么是模板语法？

其中之一就是我们刚刚使用的{{}}一个简单的 插值语法

另外一个就是指令语法

1、通过【 v-bing: 】对其属性进行绑定

该方法可以html中任意一个属性进行绑定

示例代码

<a v-bind:herf="url"></a>

简写v-bind：v-bind=> :

<a :herf="url"></a>

总结：

1、插值语法 {{ }}

功能：用于解析标签内容

写法：{{xxx}}

特点 xxx是技术表达式可以读取到data中的所有属性

2、指令语法

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

写法：v-bind:href=“xxx” or :href=“xxx”

特征：xxx同样是JS表达式，并且同样可以读取到data中的所有属性

注意：vue中指令有很多这里只用v-bind举例

---

4、数据绑定

单向数据绑定

单向数据绑定只能让数据流向页面

无法让页面的数据改变流向data

双向数据绑定

双向数据绑定则需要运用到我们一个新的指令 v-model

该指令可以将html的表单元素和Vue.data进行绑定

所绑定的任意一方的数据被改变都会影响其他的值

注意：双向绑定只适合表单等可以捕活数据改变的元素

其他无法实现对数据改变，因此v-modle也就失去了效果

简写：v-model;:value=“xxx”=> v-model=“xxx”

因为v-model默认就是收集Value的值

---

5、el 和 data的两种写法

1、el的两种写法

• 在new 实例化对象时直接配置el属性
• 在创建Vue 实例后 ，随后通过 vm.$mount(“#id”)来指定el的值

// el 第一种写法
new Vue({
    el:”#id“,
})
// el第二种写法
const v=new Vue({})
v.$mount("#id")

2、data的两种写法

• 对象式
• 函数式

代码示例

// data 的第一种写法 对象式
new Vue({
    el:”#id“,
    data:{
    name:"CareeBy"
	}
})
// data 的第二种写法 函数式
new Vue({
    el:”#id“,
    data(){
    	return{
            name:"CareeBy"
        }
	}
})

注意：由vue管理的函数一定不要使用箭头函数

因为箭头函数没有实例对象，this也就不再时vue实例，会出向函数的指向问题

---

6、理解MVVM模型

MVVM模型其实分成三个东西

1. M：模型（Model）：data中的数据
2. V：视图 （View）：模板代码
3. VM：视图模型（ViewModel）：Vue实例

注意：

data中的所有属性最后都出在了Vue的实例对象vm中

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

---

7、数据代理

1、方法回顾

回顾： Object.definePropenrty() 方法

该方法比较重要 在很多地方都会使用该方法 例如：

• 数据劫持
• 数据代理
• 计算属性

ES6中 该方法用于给对象添加属性 参数有三个

1. 对象：需要添加属性的对象
2. key：属性名
3. value：属性值

注意由该方法向对象添加的属性有几个特点

1. 不参与对象的迭代和枚举
2. 属性无法被修改
3. 属性无法被删除

但是可以通过属性 对其进行改变

enumerable：控制属性是否可以迭代，默认值为False

writable：控制属性是否可以被修改，默认值为Fasle

configurable：控制属性是否可以被删除，默认值为False

代码demo：

var person={
    name:"CareeBy",
    age:"18"
}
Object.defineProperty(person,"Gender",{
    value:18,
    enumerable:true, // 允许数据参加迭代
    writable:true,// 允许数据被改变
    configurable:true// 允许数据被删除
})

属性中的 Get 与 Set 方法

Get 函数：读取Person中的Gender属性时，get函数就会被调用，并且返回的值就是Gender值

Set函数：修改Person中的Gender属性时，set函数就会被调用，并且会返回给具体值

2 、什么是数据代理

通过一个对象代理对另外一个对象中属性的进行操作就称作数据代理

代码demo:

let Obj1={x:100}
let Obj2={y:100}
Object.defineProperty(Obj2,"x",{
    set(value){
        Obj1.x=value
    },
    get(){
        return Obj1.x
    }
})

上面的代码便实现了一个最简单的数据代理

通过Object.defineProperty方法向Obj2添加了一个x

然后又添加get和set方法，我们访问Obj2.x时实际返回的时Obj1.x

我们对Obj2.x进行修改的值也会传递给Obj1.x。这就是数据代理

3、Vue中数据代理

1、Vue中的数据代理：

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

2、Vue中数据代理的好处

​ 更加方便了用户操作了data中的属性

3、基本原理：

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

​ 为每一个Vm中的属性都去指定一个 getter&setter

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

---

8、事件处理

1、事件的基本使用

1. 使用 v-on:xxx=" " 或者 **@xxx=" " **绑定事件,其中xxx为事件名
2. 事件的回调需要配置在vm.data中的 methods 属性中
3. methods 中配置的函数依旧不能使用箭头函数，会影响this的指向
4. methods 中配置的函数，都是Vue所管理的函数，this的指向是vm 或者组件的实例的实例对象
5. @click=“demo” 和 @click=“demo($event)” 效果一致，后者可以进行传参

代码demo:

<div id="root">
    <h1>Hello {{name}}</h1>
    <button v-on:click="clik">点击提示1</button>
    <button @click="clik2(12)">点击提示2</button>
</div>
    
<script>
    new Vue({
        el:"#root",
        data() {
            return {
                name:"CareeBy"
            }
        },
        methods: {
            clik(){
                alert("CareeBy!")
            },
            clik2(sum){
                alert("CareeBy!!"+sum)
            }
        },
    })
</script>

2、事件修饰符

事件修饰符顾名思义用于修饰与事件

常用的修饰符有三个

1. 阻止事件的默认事件 ：prevent
2. 阻止事件冒泡：stop
3. 使事件只会触发一次：once

代码demo:

<div id="root">
    <h1>Hello {{name}}</h1>
    
    <div class="demo1">
        <p>第一个 阻止默认事件（常用）:.prevent</p>
        <a v-on:click.prevent="showInfo" href="https://ma-yasheng.gitee.io/">点击提示1</a>
    </div>
    
    <div class="demo1" v-on:click="showInfo">
        <p> 第二个 阻止事件冒泡（常用）: .stop</p>
        <button  @click.stop="showInfo">点击提示信息</button>
    </div>

    <div class="demo1">
        <P>第三个 事件只会触发一次（常用）：.once</P>
        <button  @click.once="showInfo">点击提示信息</button>
    </div>
</div>

小技巧

修饰符可以进行连缀

 <div class="demo1" v-on:click="showInfo">
    <P>小技巧 修饰连缀：.once</P>
    <a v-on:click.stop.prevent="showInfo" href="https://ma-yasheng.gitee.io/">点击提示1</a>
</div>

这个就是 阻止点击事件冒泡，再阻止事件的默认事件

3、Event对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息（包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。）都会被临时保存到一个指定的地方——event对象，供我们在需要的时候调用

4、键盘事件

首先如果想要定义键盘事件 只能在标签中定义才可进行捕获

其次定义键盘事件分成两种情况

@keyup ：按下键位抬起后才会触发

@keydown ：按下键位便触发

我们可以通过method属性中定义方法 利用Event对象捕获到的键位名称 和键位码

event.key ：获取捕获到的键位名字

event.keyCode ：获取到捕获到的键位码

shouInfo(e){
    if(e.code=="Enter"){
        console.log("huiche");
        console.log(e.code)
        console.log(e.keyCode)
    }
}

这样便做出了简单的键位控制

vue中提供的九个键位

1. 回车 => enter
2. 删除 => delete (捕获“删除” 和 “退格键”)
3. 退出 => esc
4. 空格 => space
5. 上 => up
6. 下 => down
7. 左 => left
8. 右 => right
9. 换行 => tab 需要配合keydown使用

注意：

1、Vue中未提供的键位别名的按键，可以通过原始的键位码或者键位名 去进行绑定

@keyup.Space="shouInfo" // 通过键位名称绑定
@keyup.32="shouInfo" 	// 通过键位码绑定
@keyup.space="shouInfo" // 通过Vue中提供的别名绑定

注意通过键位名绑定键位时 如果一个键位由两个不同的单词组成 需要大写字母编程小写字母

并且两个单词用 【 - 】 进行连接

例如：

CopsLock键=> @keyup.cops-lock=“shouInfo”

2、系统修饰键（用法特殊）

例如：ctrl 、 alt 、shift 、meta

1、配合keyup使用：按下修饰键的同时，再按下其他键、随后释放其他键，事件才会被触发

2、配合keydown使用：正常使用

3、自定意键位名

语法 Vue.config.keycodes.自定义键位名=键位码

<input type="text" name="" class="content" placeholder="按下回车输入内容" @keyup.huiche="shouInfo">
<script>
    Vue.config.keycodes.huiche=13
</script>

小技巧

键位可以进行连缀，就代表必须同时按下/松开 才会触发

<input type="text" name="" class="content" placeholder="按下回车输入内容" @keyup.ctrl.Y="shouInfo">

在 @keyup/@kyedown后面连缀即可

---

9、计算属性

计算属性是VM中的一个参数通过Computed 实现，该参数只接收对象形式的数据

• 定义：要用的属性不存在，要通过已存在并且最好是被vue管理的属性计算而来
• 原理：底层借助Object.defineproperty方法提供的getter和setter
• get函数什么时候被调用？
  1. 初次读取时会被调用一次
  2. 当依赖的属性被修改时会被再次调用
• 优势：相比较method实现，Computer内部拥有缓存机制，效率更高
• 备注：
  1. 计算属性最终会出现在vm身上而不是vm._data中，可以直接被调用
  2. 如果计算属性要被修改，那必须通过set函数去响应修改，并且在set函数中要将依赖属性进行更改

代码demo:

const vm=new Vue({
    el:"#root",
    data() {
        return {
            xin:"张",
            min:"三"
        }
    },
    computed:{
        qm:{
            get(){
                return this.xin+"-"+this.min
            },
            set(value){
                arr=value.split('-')
                this.xin=arr[0]
                this.min=arr[1]
            },
        }
    }
})

简写：

简写的前提时计算属性中只存在get函数，确认好了该函数只会被读取，而不会被修改

代码demo：

const vm=new Vue({
    el:"#root",
    data() {
        return {
            xin:"张",
            min:"三"
        }
    },
    computed:{
        
        qm(){
            return this.xin+"-"+this.min
        }
    }
})

注意：computed中的qm并不是一个函数，而是一个属性，他的的值是一个函数而已，qm相等于

qm:function(){
    return this.xin+"-"+this.min
}

​