[暑假-边做边学版]Vue实战(1)

卓律涤

已于 2022-08-12 14:44:08 修改

阅读量286

点赞数

分类专栏： Vue 文章标签：前端 Vue

于 2022-07-21 19:57:09 首次发布

本文链接：https://blog.csdn.net/IDApprentice/article/details/125840810

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前端借助 console.log来定位BUG

1. 双向绑定 v-model是只能应用在表单元素(输入类元素), 说白了就是都要有value值

v-on 可以简写成 @

reactive 可以翻译为"响应式"的意思

steInterval(() => {

}, 时间单位毫秒) //定时器函数

读取对象中的属性值如果没有这个属性应该是 undefined 而不会报错

v-model:value ==> 可以简写成: v-model

2. el和data的两种写法

el写法两种都可以

但是在组件库中, data只能用第二种函数式, 并且只能是普通函数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  
 <div id="root">
    <h1>Hello, {{name}}</h1>
 </div>

 </body>
 <script type="text/javascript">

   new Vue({
        el:'#root', //el的第一种写法
        // data: {  //第一种写法  : 对象式
        //     name:'加油'
        // }
    // setTimeout(() => {
    //     x.$mount('#root')
    // }, 1000);
    // x.$mount('#root'); //el的第二种写法
    data:function() {   //data的第二种写法
        return {
            name:'加油'
        }
    } 
})

 </script>
</html>

3. 箭头函数没有自己的this, 它的this指向的是 window

4.Vue 借鉴了 MVVM模型

5.回顾 object.defineProperty

Invoke(映射) property(属性) getter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        let number = 18;
        let person = {
            name:'张三',
            sex:'男'
        }
        
        Object.defineProperty(person, 'age', {
            // value:18,
            // enumerable:true,  //控制属性是否可以枚举, 默认值是false
            // writable:true,   // 控制属性是否可以被修改, 默认值是false
            // configurable:true // 控制属性是否可以被删除, 默认值是false
       
    
        // console.log(person);
            // 当有人读取person的age属性时, get函数(getter)就会被调用, 且返回值就是age的值
        get(){
            console.log('读取age属性')
            return number
        },
        // 当有人修改person的age属性时, set函数(setter)就会被调用, 且会受到修改的具体值
        set(value){
            console.log('有人修改了age属性, 且值是', value)
            number = value
        }
    })
    </script>    
</body>
</html>

6. 数据代理:通过一个对象代理　对另一个对象中属性的操作（读或者写）

简单的数据代理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 简单的数据代理 -->
    <script type="text/javascript">
        Vue.config.productionTip = false;
      
        let obj = {x:100};
        let obj2 = {y:200};

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

    </script>    
</body>
</html>

7. 事件回调

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button @click="showInfo(888, $event)">点我提示信息</button>
    </div>
    
</body>

    <script type="text/javascript">
        Vue.config.productionTip = false;
    
        new Vue({
            el:'#root',
            data: {
                name:'不屈的世界'
            },
            methods: {
                showInfo(number, event) {
                    console.log(number, event);
                }
            }

        })
    </script>    
</html>