前端学习vue第一天（P1-P18）244

本文链接：https://blog.csdn.net/xiaoxiaosu233/article/details/123498693

一.初识vue

1.hello

<head>
    <meta charset="UTF-8">
    <title>初识vue</title>
<!--    引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
<!--准备容器-->
<div id="root">
    <h1>Hello.{{name}}</h1>
</div>
<script>
    Vue.config.productionTip = false;
    //创建vue实例，只传一个对象参数
    const x = new Vue({
        el:'#root',//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
        data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
            name:'尚硅谷'
        }
    })
</script>

2.一一对应

<body>
<!--准备容器-->
<div id="root1">
    <h1>Hello.{{name}},{{address}}</h1>
</div>
<div id="root2">
    <h1>Hello.{{name}},{{address}}</h1>
</div>
<script>
    Vue.config.productionTip = false;
    //创建vue实例，只传一个对象参数
    new Vue({
        el:'#root1',//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
        data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
            name:'尚硅谷',
            address:'北京'
        }
    })
    new Vue({
        el:'#root2',
        data:{
            name:'guigu',
            address:'上海'
        }
    })
</script>
</body>

3.可以使表达式

<body>
<!--准备容器-->
<!--注意区分表达式和代码，表达式会产生一个值-->
<div id="root1">

    <h1>Hello.{{name.toUpperCase()}},{{address}},{{Date.now()}}</h1>
</div>
<script>
    Vue.config.productionTip = false;
    //创建vue实例，只传一个对象参数
    new Vue({
        el:'#root1',
        data:{
            name:'atguigu',
            address:'北京'
        }
    })
</script>
</body>

二、模板语法

<body>
<!--准备好一个容器-->
<div id="root">
<!--    处于标签体里的语法用插值语法
        指令语法是处于标签属性的语法，用v-bing:/:-->
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr/>
    <h1>指令语法</h1>
    <a :href="url">点我去{{school.name}}学习1</a>
    <a :href="url">点我去尚硅谷学习2</a>
</div>
</body>
<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            school:{
                name:'尚硅谷'
            },
            url:'http://www.atguigu.com'
        }
    })

</script>

三、数据绑定

<body>
    <div id="root">
        单向数据绑定：<input type="text" :value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>
</body>
<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷'
        }

    })
</script>

四、el，data两种写法

<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;
    // const v = new Vue({
    //         //el:'#root',
    //         data:{
    //             name:'尚硅谷'
    //         }
    //
    //     });
    // console.log(v);
    // v.$mount('#root');
        new Vue({
                el:'#root',
                data() {
                    return{
                        name:'尚硅谷'
                    }
                }
            })


</script>

五、MVVM

<body>
<div id="root">
<!--    view-->
    <h1>学校名称:{{name}}</h1>
    <h1>学校地址:{{address}}</h1>
</div>
</body>
<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;
    //view model
    new Vue({
            el:'#root',
            data:{//model
                name:'尚硅谷',
                address:'北京'
            }

        })
</script>

六、数据代理

<script>
    let num = 18;
    let person = {
        name:'张三',
        sex:'男'
    };
    Object.defineProperty(person,'age',{
        // value:18,
        // enumerable:true, //控制属性可以枚举
        // writable:true,//控制属性是否可以修改
        // configurable:true,//控制属性是否可以被删除
        //当有人读取person的age属性时，get函数就会被调用，返回值就是age的值
        get() {
            return num
        },
        //当有人读取person的age属性时，set函数就会被调用，且会收到改的具体值
        set(value){
            console.log('修改了值',value);
            num = value;
        }
    });
    console.log(person)
</script>

<script>
    let obj = {x:100}
    let obj2 = {y:200}
    Object.defineProperty(obj2,'x',{
        get() {
            return obj.x;
        },
        set(value) {
            obj.x = value;
        }
    })
</script>

<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;
    const vm = new Vue({
            el:'#root',
            data:{
                name:'尚硅谷',
                address: '科技园'
            }

        })
</script>

七、事件处理

<body>
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <button v-on:click="showInfo1">点我提示信息1(不传参)</button>
    <button @click="showInfo2(66,&event)">点我提示信息2</button>
</div>
</body>
<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;

    new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            },
        methods:{
            showInfo1(event){
            alert('同学你好1')
    },
            showInfo2(num,event){

                alert('同学你好2')
            }
        }


        })
</script>

<body>
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
<!--    阻止默认事件-->
    <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
<!--阻止事件冒泡stop-->
<!--事件只触发一次once-->



</div>
</body>
<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;
    new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            },
            methods:{
                showInfo(e){
                    //e.preventDefault()
                    alert("同学你好")
                }
        }

        })
</script>

<body>
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <input type="text" placeholder="按下回车提示输入" @keyup.enter ="showInfo">
</div>
</body>
<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷'
        },
        methods:{
            showInfo(e){
               console.log(e.target.value)
            }
        }

    })
</script>