Vue(2)

女孩哪有代码香

已于 2022-07-10 16:27:04 修改

阅读量202

点赞数

文章标签： vue.js javascript 前端

于 2022-07-10 16:25:07 首次发布

本文链接：https://blog.csdn.net/m0_52774518/article/details/125707110

版权

一、数据绑定

代码：

<!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>vue中的数据代理</title>
    <script type="text/javascript" src="/02_Vue模板语法/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
    </div>
</body>
<script type="text/javascript">
        el:'#root'
        let data = {
           name:'尚硅谷123',
            address:'赣州'
        }
        const vm=new Vue({
         el:'#root',
         data
        })
</script>
</html>

运行结果

在这里插入图片描述

二、el与data的两种写法

笔记

data与el的2种写法
      1.el有2种写法
               （1）new Vue时候配置el属性
                （2）先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
                2.data有两种写法
                       （1）对象式
                        （2）函数式
                         如何选择：目前哪种写法都可以，以后学习到组件时，data就必须用函数式，否则会报错
            3.一个重要的原则
                   由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>el与data的两种写法</title>
    <script type="text/javascript" src="/02_Vue模板语法/vue.js"></script>
</head>
<body>

    <!--
      data与el的2种写法
          1.el有2种写法
                   （1）new Vue时候配置el属性
                    （2）先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
                    2.data有两种写法
                           （1）对象式
                            （2）函数式
                             如何选择：目前哪种写法都可以，以后学习到组件时，data就必须用函数式，否则会报错
                3.一个重要的原则
                       由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不是Vue实例了
                    
    -->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    // Vue.config.productionTip=false;
    // Vue.config.devtools=true;
    //el的两种写法
    // const v=new Vue({
    //     //  el:'#root',
    //      data:{
    //            name:'尚硅谷'
    //      }
    // })
    // console.log(v)
    // v.$mount('#root') //第二种写法

    //data的两种写法
      new Vue({
          el:'#root',
        //   data:{
        //       name:'尚硅谷'
        //   }
//data的第二种写法，函数式
data(){
    console.log('@@@',this)
    return{
        name:'尚硅谷'
    }
}
      })
</script>
</html>
</html>

MVVM模型

笔记：

 MVVM模型
            1.M:模型(Model):data中的数据
            2.V:视图（View）：模板代码
            3.VM：视图模型（ViewModel）：Vue实例
       观察发现：
            1.data中所有的属性，最后都出现在了vm上。
            2.data中的所有属性及Vue原型上的所有属性。在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>
    <script type="text/javascript" src="/02_Vue模板语法/vue.js"></script>
</head>
<body>
    <!--
       总结：
           MVVM模型
                1.M:模型(Model):data中的数据
                2.V:视图（View）：模板代码
                3.VM：视图模型（ViewModel）：Vue实例
           观察发现：
                1.data中所有的属性，最后都出现在了vm上。
                2.data中的所有属性及Vue原型上的所有属性。在Vue模板中都可以直接使用。

    -->
    <div id="root">
        <h1>学校名称:{{name}}</h1>
        <h1>学校地址:{{address}}</h1>
        <h1>测试一下:{{1+1}}</h1>
        <h2>测试一下2:{{$options}}</h2>
        <h2>测试一下3:{{$emit}}</h2>
        <h2>测试一下4:{{_c}}</h2>
    </div>
</body>
<script type="text/javascript">
           const vm= new Vue({
                el:'#root',
                data:{
                    name:'尚硅谷·',
                    address:'赣州',
                    a:1
                }
            })

            console.log(vm)
</script>
</html>

运行截图：

在这里插入图片描述

三、数据代理

Object.defineproperity方法

<!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>回顾Object.defineproperity方法</title>
</head>
<body>
    <script type="text/javascript">
        let number=18
        let person={
            name:'颤三',
            sex:'男',  
        }
        Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true,//控制属性是否可以枚举，默认值是false
            // configurable:true,///控制属性是否可以被修改，默认值是false
            configurable:true,
            //当有人读取person的age属性时，get函数（getter)就会被调用，且返回值就是age的值
            get:function(){
                  return number
            },
            //当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值。
            set(value){
             consle.log('有人修改了age属性，且值是，',value)
             number=value
            }
        })   
        console.log(Object.keys(person))
        console.log(person)
    </script>
</body>
</html>

何为数据代理

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

<!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>何为数据代理</title>
    <script type="text/javascript" src="/02_Vue模板语法/vue.js"></script>
</head>
<body>
    <!--
      数据代理：通过一个对象代理对另一个对象中的属性的操作(读、写)
    -->
    <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>
</body>
</html>

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>vue中的数据代理</title>
    <script type="text/javascript" src="/02_Vue模板语法/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
    </div>
</body>
<script type="text/javascript">
        el:'#root'
        let data = {
           name:'尚硅谷123',
            address:'赣州'
        }
        const vm=new Vue({
         el:'#root',
         data
        })
</script>
</html>