Vue2学习笔记day01——初识Vue&模板语法&数据绑定&el 与data的两种写法&MVVM模型&数据代理&事件处理&计算属性

Happy_change

已于 2022-03-07 09:55:39 修改

阅读量587

点赞数

分类专栏： Vue学习记录文章标签： restful 学习 java

于 2022-03-06 22:30:39 首次发布

本文链接：https://blog.csdn.net/Happy_change/article/details/123306691

版权

Vue学习记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue2学习笔记

文章目录

Vue2学习笔记

Vue特点：
组件化：一个xxx.vue(html css js)就是一个组件
声明式编码无需直接操作dom
使用虚拟dom+diff算法
数据–虚拟DOM–真实DOM
在这里插入图片描述

初识Vue

使用Vue首先要导入vue.js文件，可以下载后本地导入，也可以在线网址导入，具体参照Vue2官网文档这里我选择下载后本地导入

<script type="text/javascript" src="../js/vue.js"></script>

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root容器中的代码被称为Vue模板
Vue实例与容器一一对应
真实开发中只有一个Vue实例，并且会配合组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以用data中定义的属性
注意区分：js表达式和js代码（语句）
- 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，如：a 、a+b 、demo(1) 、x===y?‘a’:‘b’
- js代码(语句) : if(){} for(){}

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- {{}}分隔符  .toUpperCase()转成大写 -->
        <h3>hello,{{name.toUpperCase()}}</h3>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false //关闭Vue启东时生产提示
            // 创建Vue实例
        new Vue({
            el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: { // data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name: 'Vue'
            }
        })
    </script>
</body>

在vscode中下载live server插件，可以直接在浏览器打开所写页面：右击选择open with live server

模板语法

Vue模板语法有两大类

插值语法
- 功能：用于解析标签体内容
- 写法:{{xxx}},xxx是js表达式，可以直接读取到data中的所有属性
2.指令语法
- 功能：用于解析标签（包括标签属性、标签体内容、绑定时间。。。）
- 举例：v-bind:href=“xxx” 或者简写为 :href=“xxx” xxx同样是js表达式且可以直接读取到data中的所有属性
- 注：Vue中有很多指令，且形式都是：v-xxx 此处仅拿v-bind举例子

<div id="root">
    <h1>插值语法</h1>
    <!-- 标签体中使用 -->
    <h3>你好，{{name}}</h3>
    <hr>
    <h1>指令语法</h1>
    <!-- v-bind:绑定可以简写成: -->
    <a v-bind:href="school.url">点我去{{school.name}}</a>
    <a :href="url">点我去百度</a>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            name: 'Vue',
            school: {
                name: '百度',
                url: 'https://www.baidu.com/'
            }
        }
    })
</script>

数据绑定

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

单向数据绑定(v-bind)：数据只能从data流向页面
双向数据绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data
备注：
- 双向数据绑定一般应用在表单类元素上
- v-bind:xxx 可以简写为 :xxx
- v-model:value 可以简写为v-model 因为v-model默认收集value值

<div id="root">
    <!-- v-bind: 单向数据绑定 -->
    单向数据绑定：<input type="text" v-bind:value="name">
    <br /> 单向数据绑定：
    <input type="text" :value="name"><br />
    <!-- v-model:双向数据绑定 -->
    双向数据绑定：<input type="text" v-model:value="name"> 双向数据绑定：

    <input type="text" v-model="name">
    <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（有输入值） -->
    <h2 v-model:x="name"></h2>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

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

el 与data的两种写法

data与el的两种写法:

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

<!-- 准备好一个容器 -->
<div id="root">
    <h1>您好，{{name}}</h1>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    //el的两种写法
    /*const v = new Vue({
        //方式一 el: '#root',
        data: {
            name: 'Vue'
        }
    })
    console.log(v)
    // 方式二 &mount挂载
    v.$mount('#root')*/
    // 可以设置1000ms后再装配
    // setTimeout(() => {
    //     v.$mount('#root')
    // }, 1000);

    //data的两种写法
    new Vue({
        el: '#root',
        //data的第一种写法：对象式
        /*data:{
            name:'Vue'
        }*/

        //data的第二种写法：函数式
        data: function() {
            console.log('@@@', this) //此处的this是Vue实例对象
            return {
                name: 'Vue'
            }
        }
    })
</script>

MVVM模型

MVVM（Model-view-viewModel）是一种软件架构模式，有利于将图形用户界面的开发与业务逻辑或后端逻辑的开发分离开来。

M ：模型（Model）：对应data中的数据
V ：视图（View）：模板
VM：视图模型（ViewModel）：Vue实例对象

在这里插入图片描述

数据代理

何为数据代理

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

<script type="text/javascript">
    let obj = {
        x: 100
    }
    let obj2 = {
        y: 200
    }

    Object.defineProperty(obj2, 'x', {
        get() {
            return obj.x
        },
        set(value) {
            obj.x = value
        }
    })
</script>

回顾Object.defineProperty方法

<script type="text/javascript">
    let number = 18
    let person = {
        name: '张三',
        sex: '男',
        //age:number // 仅在初始化时有关系，之后若仅更改number的值，age不会变
    }

    Object.defineProperty(person, 'age', {
        /*value: 18,
        enumerable:true,// 控制属性是否可以枚举，默认值为false
        writable:true, // 控制属性是否可以修改，默认值为false
        configurable:true, // 控制属性是否可以被删除，默认值为false 
        */

        // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age
        get: function() {
            return number
        },

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

Vue中的数据代理

在这里插入图片描述

Vue中的数据代理：通过vm对象来处理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：
- 通过Object.defineProperty()把data对象中所有属性添加到vm上
- 为每一个添加到vm上的属性，都指定一个getter/setter
- 在getter/setter内部去操作（读/写）data中对应的属性
同时data即vm中的_data

<div id="root">
   <h2>学习科目：{{name}}</h2>
   <h2>学习方式：{{way}}</h2>
</div>

<script type="text/javascript">
   Vue.config.productionTip = false

   /*let data = {
       name:'Vue',
        way:'b站'
   }

   // vm._data = data
   const vm = new Vue({
       el: '#root',
       data
   })*/

   // vm._data = data
   const vm = new Vue({
       el: '#root',
       data: {
           name: 'Vue',
           way: 'b站'
       }
   })
</script>

事件处理

键盘按键

Vue中常用的键盘按键别名
- 回车：enter
- 删除：delete (捕获"删除"和"退格键")
- 退出：esc
- 空格：space
- 换行：tab(特殊、必须配合keydown使用)
- 上：up
- 下：down
- 左：left
- 右：right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意转为kebab-case(短横线命名)
系统修饰键(用法特殊)：ctrl、alt、shift、meta(win)
- 配合keyup使用：按下修键的同时，在按下其他键，随后释放其他键，事件才被触发
- 配合keydown使用：正常触发事件
也可以使用keyCode去指定具体的按键(不推荐,不同的键盘可能不统一)
Vue.config.keyCodes.自定义键名=健码，可以去定制按键别名

<div id="root">
    <h2>{{name}}学习</h2>
    <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
    <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            name: 'Vue'
        },
        methods: {
            showInfo(e) {
                console.log(e.key, e.keyCode)
                if (e.keyCode != 13) return
                console.log(e.target.value)
            }
        }
    })
</script>

事件的基本使用：

使用v-on:xxx 或 @xxx 绑定时间，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不要用箭头函数，否则this就不是vm了，变成window
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
@click=“xxx” 和 @click=“xxx(event)” 效果一致，但是后者可以传参

<div id="root">
    <h2>{{name}}学习</h2>

    <button v-on:click="showInfo">点我提示信息</button>
    <button v-on:click="showInfo1">点我提示信息!</button>
    <button @click="showInfo2(66,$event)">点我提示信息!!(传参)</button>
    <button @click="showInfo3">点我提示信息!!!(不传参)</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: { // 只有配置在data中的数据才会做数据劫持和数据代理
            name: 'vue'
        },
        methods: {
            showInfo(event) {
                // event.target 拿到发生事件的发生目标
                console.log(event.target)
                console.log(this) // 此处的this是vm(Vue实例对象)
                alert('跟着尚硅谷学Vue第一天')
            },

            showInfo1: (event) => {
                // event.target 拿到发生事件的发生目标
                console.log(event.target)
                console.log(this) // 此处的this是window
                alert('跟着尚硅谷学Vue第一天!')
            },

            showInfo2(number, event) {
                console.log(number, event)
                alert('跟着尚硅谷学Vue第一天!!')
            },

            showInfo2(event) {
                alert('跟着尚硅谷学Vue第一天!!!')
            }
        }
    })
</script>

Vue中的事件修饰符：

prevent:阻止默认事件(常用)
stop：阻止事件冒泡(常用)
once：事件只触发一次(常用)
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<style>
    * {
        margin-top: 15px;
    }
    
    .demo1 {
        height: 50px;
        background-color: pink;
    }
    
    .box1 {
        padding: 5px;
        background-color: skyblue;
    }
    
    .box2 {
        padding: 5px;
        background-color: pink;
    }
    
    .list {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        overflow: auto;
    }
    
    li {
        height: 100px;
    }
</style>

<div id="root">
    <h2>{{name}}学习</h2>
    <!-- @click.prevent prevent事件修饰符，阻止默认事件 -->
    <a href="https://www.baidu.com" @click.prevent="showInfo"> 点我提示信息</a>
    <!-- 阻止事件冒泡 -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
        <!-- 修饰符可以连续写 -->
        <!-- <a href="https://www.baidu.com" @click.stop.prevent="showInfo"> 点我提示信息</a> -->
    </div>
    <!-- 事件触发一次 -->
    <button @click.once="showInfo">点我提示信息</button>
    <!-- 使用事件的捕获模式 -->
    <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">
            div2
        </div>
    </div>
    <!-- 只有event.target是当前操作的元素时才触发事件 -->
    <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>
    <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
    <!-- @scroll滚动条  @wheel鼠标滚动轮 -->
    <ul @scroll="demo" @wheel.passive="demo2" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            name: 'Vue'
        },
        methods: {
            showInfo() {

                alert("跟着尚硅谷学习Vue之事件修饰符")
            },
            showMsg(n) {
                console.log(n)
            },
            demo() {
                console.log('@')
            },
            /*demo2() {
                console.log('$')
            },*/
            demo2() {
                for (let i = 0; i < 100000; i++) {
                    console.log('#')
                }
                console.log('!!!')
            }
        }
    })
</script>

计算属性

为了更好地理解计算属性，下面通过姓名案例不同方法的实现来引出

姓名案例_插值语法实现

<div id="root">
    性：<input type="text" v-model="firstName"><br /> 
    名：<input type="text" v-model="lastName"><br /> 
    姓名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            firstName: '白',
            lastName: '敬亭'
        }
    })
</script>

姓名案例_methods方法实现

<!-- dada中的数据改变，vue就重新加载模板，遇到插值函数也会重新调用 -->
<div id="root">
    性：<input type="text" v-model="firstName"><br /> 
    名：<input type="text" v-model="lastName"><br /> 
    姓名：<span>{{fullName()}}</span>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            firstName: '白',
            lastName: '敬亭'
        },
        methods: {
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>

姓名案例_计算属性实现

计算属性:

定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助了Object.defineproperty方法提供的getter和setter
get函数什么时候执行？
- 初次读取时执行一次
- 当依赖的数据发生改变时会被再次调用
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
- 计算属性最终会出现在vm上，直接读取使用即可
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化

<!-- dada中的数据改变，vue就重新加载模板，遇到插值函数也会重新调用 -->
<div id="root">
    性：<input type="text" v-model="firstName"><br /> 
    名：<input type="text" v-model="lastName"><br /> 
    姓名：<span>{{fullName}}}</span>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            firstName: '白',
            lastName: '敬亭'
        },
        computed: {
            fullName: {
                // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                // get中的this指向vm
                // get什么时候调用？1.初次读取fullName时。2、所依赖的数据发生变化时
                get() {
                    console.log('get被调用了')
                    return this.firstName + '-' + this.lastName;
                },
                // set什么时候调用当fullName被修改时
                set(value){
                    console.log('set被调用了',value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
</script>

计算属性简写

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

<script type="text/javascript">
   Vue.config.productionTip = false
   
   new Vue({
       el: '#root',
       data: {
           firstName: '白',
           lastName: '敬亭'
       },
       computed: {
           // 简写 函数当作getter用，只有仅读取不修改时才可用简写形式 
           // 函数名即为计算属性名
           fullName(){
               console.log('get被调用了')
                   return this.firstName + '-' + this.lastName;
           }
       }
   })
</script>

Happy_change

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue2学习笔记day01——初识Vue&模板语法&数据绑定&el 与data的两种写法&MVVM模型&数据代理&事件处理&计算属性

VueVue特点：组件化：一个xxx.vue(html css js)就是一个组件声明式编码无需直接操作dom使用虚拟dom+diff算法数据–虚拟DOM–真实DOM初识Vue使用Vue首先要导入vue.js文件，可以下载后本地导入，也可以在线网址导入，具体参照Vue2官网文档这里我选择下载后本地导入<script type="text/javascript" src="../js/vue.js"></script>想让Vue工作，就必须创建一个Vue实例，且
复制链接

扫一扫