Vue ------ vue 基础（一）

初识 Vue

在页面输出 HELLO VUE!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>HELLO,{
    
    {
    
    message.toUpperCase()}}</h1>
    </div>

    <script>
        Vue.config.productionTip = false;   //阻止 vue 在启动时生成生产提示
    
        // 创建Vue实例 ({})只传一个参数，类型为对象(配置对象)
        new Vue({
    
    
            el: '#root',  //el用于指定当前Vue实例为哪个容器服务
            data: {
    
         //data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象
                message: 'Vue!',
            }
        })
    </script>
</body>
</html>

模板语法

Vue模板语法有 2 大类：

插值语法：
功能：用于解析标签体内容。
写法：{ {xxx}}， xxx是 js 表达式，且可以 直接读取 到 data 中的所有属性。
指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写 js 表达式，且可以 直接读取 到data中的所有属性。

v-bind 简写为：
v-on 简写为 @

页面实现
在这里插入图片描述
{ {}} 和 v-bind

    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{
    
    {
    
    name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="school.url">{
    
    {
    
    school.name}}</a>
    </div>

    <script>
        new Vue({
    
    
            el:'#root',
            data:{
    
    
                name:'八岁',
                school:{
    
    
                    name:'哔哩哔哩',
                    url:'https://www.bilibili.com/'
                }
            }
        })
    </script>

数据绑定

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

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

注意：

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

v-model:value 可以简写为 v-model，因为 v-model 默认就是 value 值。

在这里插入图片描述
完整写法：

	<div id="root">
        单向数据绑定: <input type="text" v-bind:value="name1">{
    
    {
    
    name1}}<br/>
        双向数据绑定: <input type="text" v-model:value="name2">{
    
    {
    
    name2}}<br/>
    </div>

    <script>
        new Vue({
    
    
            el:'#root',
            data:{
    
    
                name1:'单向数据绑定',
                name2:'双向数据绑定'
            }
        })
    </script>

简写：

	<div id="root">
        单向数据绑定: <input type="text" :value="name1">{
    
    {
    
    name1}}<br/>
        双向数据绑定: <input type="text" v-model="name2">{
    
    {
    
    name2}}<br/>
    </div>

    <script>
        new Vue({
    
    
            el:'#root',
            data:{
    
    
                name1:'单向数据绑定',
                name2:'双向数据绑定'
            }
        })
    </script>

el 和 data 的两种写法

el有2种写法
(1)、new Vue时配置el属性。
(2)、先创建Vue实例，随后再通过 vm.$mount('#root') 指定el的值。
data有2种写法
(1)、对象式
(2)、函数式
如何选择：目前哪种方法都可以，以后学习到 组件 时，data必须使用函数式，否则会报错。
一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

el 的第一种写法：

	<div id="root">
        <h1>你好,{
    
    {
    
    name}}</h1>
    </div>

    <script>
        new Vue({
    
    
            el:'#root',
            data:{
    
    
                name:'vue'
            }
        })
    </script>

el 的第二种写法：

	<div id="root">
        <h1>你好,{
    
    {
    
    name}}</h1>
    </div>

    <script>
        var v = new Vue({
    
    
            data:{
    
    
                name:'vue'
            }
        })
        v.$mount("#root") 
    </script>

data 的第一种写法（对象式）：

	<div id="root">
        <h1>你好,{
    
    {
    
    name}}</h1>
    </div>

    <script>
        new Vue({
    
    
            el:'#root',
            data:{
    
    
                name:'vue'
            }
        })
    </script>

data 的第二种写法（函数式）：

	<div id="root">
        <h1>你好,{
    
    {
    
    name}}</h1>
    </div>

    <script>
        new Vue({
    
    
            el:'#root',
            data:function(){
    
    
                return{
    
    
                    name:'vue'
                }
            }
        })
    </script>

MVVM 模型

M：模型(Model)：data中的数据
V：视图(View)：模板代码
VM：视图模型(ViewModel)：Vue实例

注：

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

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

	<!-- div 里面是 View -->
	
    <div id="root">
        <h1>学校名称：{
    
    {
    
    name}}</h1>
        <h1>学校地址：{
    
    {
    
    address}}</h1>
    </div>

    <script>
        new Vue({
    
      // new Vue({})是 ViewModel
            el: '#root',  
            data: {
    
         
                name: '青岛',
                address: '山东'
                // data 里面的内容是 Model
            }
        })
    </script>

数据代理

回顾 Object.defineProperty 方法

value: ‘18’,
enumerable: true, //控制属性是否可以被枚举，默认值是false
writable: true, //控制属性是否可以被修改，默认值是false
configurable: true, //控制属性是否可以被删除，默认是false

在这里插入图片描述

	let number = 18
    let person = {
    
    
        name: '张三',
        sex: '男',
    }

    Object.defineProperty(person,'age',{
    
    
            // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get(){
    
    
                console.log("有人读取了age属性")
                return number
            },

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

数据代理：通过一个对象代理对另一个对象中属性的操作(读/写)。

	let obj = {
    
    x: 100}
    let obj2 = {
    
    y: 200}

    // obj2也可以操作obj的x
    Object.defineProperty(obj2, 'x', {
    
    
        get(){
    
    
            return obj.x
        },
        set(value){
    
    
            obj.x = value
        }
    })
    console.log(obj2.x) // 100

vue 中的数据代理：通过 vm 对象来代理 data 对象中属性的操作(读/写)。

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

基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性。

	<div id="root">
        <h1>学校名称：{
    
    {
    
    name}}</h1>
        <h1>学校地址：{
    
    {
    
    address}}</h1>
    </div>

    <script>
        const vm = new Vue({
    
     
            el: '#root',  
            data: {
    
         
                name: '青岛理工大学',
                address: '青岛市黄岛区'
            }
        })
    </script>

事件处理

事件的基本使用：

使用v-on:xxx 或 @xxx绑定事件，其中xxx是事件名；

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

methods中配置的函数，不要用箭头函数！否则this就不是vm了；

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

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

在这里插入图片描述

	<div id="root">
        <h1>欢迎来到{
    
    {
    
    name}}</h1>
        <button @click="showInfo1">点击查看信息(不传参)</button>
        <button @click="showInfo2">点击查看信息(传参)</button>
    </div>
    <script>
        Vue.config.productionTip = false; 
        const vm = new Vue({
    
    
            el:'#root',
            data:{
    
    
                name: '哔哩哔哩',
            },
            methods:{
    
    
                showInfo1(event){
    
    
                    console.log(this) // 此处 this 是 vm
                    console.log('同学你好!(不传参)')
                },
                showInfo2(event,number){
    
    
                    console.log('同学你好!!(传参)')
                    console.log(event,821)
                }
            }
        })
    </script>

事件修饰符：

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

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

once：事件只触发一次(从内到外)（常用）；

capture：使用事件的捕获模式(从外到内)；

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

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

（2） prevent: 阻止默认事件（常用）:有弹出框，但页面不会跳转

	<div id='root'>
        <a href="http://www.baidu.com" @click.prevent="showInfo">click me</a>
    </div>
    
    <script>
        Vue.config.productionTip = false;   
    
        new Vue({
    
    
            el: '#root',  
            methods:{
    
    
                showInfo(){
    
    
                    alert('同学你好！')
                }
            }
        })
    </script>

在这里插入图片描述
（2）stop：阻止事件冒泡（常用）:（点击按钮不会连续弹出两次弹出框）

	// css
	.demo1{
    
    
            background-color: lightblue;
            height: 50px;
    }
    //html
	<div id='root'>
        <div class="demo1" @click="showInfo">
             <button @click.stop="showInfo">click me</button>
        </div>
    </div>
    //vue
    <script>
        Vue.config.productionTip = false;   
    
        new Vue({
    
    
            el: '#root',  
            methods:{
    
    
                showInfo(){
    
    
                    alert('同学你好！')
                }
            }
        })
    </script>

（3）once：事件只触发一次(从内到外)（常用）：仅点击的第一次弹出对话框

	<div id='root'>
        <button @click.once='showInfo'>click me</button>
    </div>
    
    <script>
        Vue.config.productionTip = false;   
    
        new Vue({
    
    
            el: '#root',  
            methods:{
    
    
                showInfo(){
    
    
                    alert('同学你好！')
                }
            }
        })
    </script>

（4） capture：使用事件的捕获模式(从外到内)：点击 div2，输出1,2。点击div1，输出1

注：事件捕获先发生于事件冒泡

	//css
	.box1{
    
    
        padding: 5px;
        background-color: skyblue;
    }
    .box2{
    
    
        padding: 5px;
        background-color: orange;
    }
    //html
	<div id='root'>
        <div class='box1' @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
    </div>
    //vue
    <script>
        Vue.config.productionTip = false;   
    
        new Vue({
    
    
            el: '#root',  
            methods:{
    
    
                showMsg(msg){
    
    
                    console.log(msg)
                }
            }
        })
    </script>

在这里插入图片描述
*** （5）self：只有event.target是当前操作的元素时才触发事件：点击按钮，不会发生冒泡***

	//css
	.demo1{
    
    
        background-color: lightblue;
        height: 50px;
    }
	//html
	<div id='root'>
        <div class='demo1' @click.self='showInfo'>
            <button @click="showInfo">click me</button>
        </div>
    </div>
    //vue
    <script>
        Vue.config.productionTip = false;   
    
        new Vue({
    
    
            el: '#root',  
            methods:{
    
    
                showInfo(){
    
    
                    alert('Hello')
                }
            }
        })
    </script>

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

不加passsive会出现卡顿，wheel可以换成scroll

scroll是页面滚动条滚动会触发的事件，而wheel是鼠标滚轮滚动会触发的事件。一旦滚动条到底部后，滑动鼠标滚轮继续滚动，wheel就会一直触发，而scroll不会触发。

	//css
	.list{
    
    
        width: 200px;
        height: 200px;
        background-color: bisque;
        overflow: auto;
    }
    .li{
    
    
        height: 100px;
    }
    //html
    <div id='root'>
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    //vue
    <script>
        Vue.config.productionTip = false;   
    
        new Vue({
    
    
            el: '#root',  
            methods:{
    
    
                demo(){
    
    
                    for(let i = 0;i < 10000; i++){
    
    
                        console.log("#")
                    }
                    console.log("完毕")
                }
            }
        })
    </script>

在这里插入图片描述

键盘事件

Vue中常用的按键别名：
回车 => enter
删除 => delete(捕获删除或退格键)
退出 => esc
空格 => space
换行 => tab
上 => up
下 => down
左 => left
右 => right

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

系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。

也可以使用keyCode去指定具体的按键（即@keyup.13 等同于 @keyup.enter）(不推荐)

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

在文本框输入内容，点击回车，在控制台输出相应内容

	<div id='root'>
        <h2>欢迎学习Vue!</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter='showInfo'>
    </div>
    
    <script>
        Vue.config.productionTip = false;   
    
        new Vue({
    
    
            el: '#root',  
            methods:{
    
    
                showInfo(e){
    
    
                    console.log(e.target.value)
                }
            }
        })
    </script>

不积跬步无以至千里不积小流无以成江海