AtguiguVue【P1-P10】初识vue、模板语法、数据绑定、el和data的两种写法、vue中的MVVM模型

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

 

1、初识vue

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初识Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 
            初识Vue：
                1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
                2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
                3.root容器里的代码被称为【Vue模板】；
                4.Vue实例和容器是一一对应的；
                5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
                6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
                7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

            注意区分：js表达式 和 js代码(语句)
                1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
                            (1). a
                            (2). a+b
                            (3). demo(1)
                            (4). x === y ? 'a' : 'b'
                2.js代码(语句)
                            (1). if(){}
                            (2). for(){}
        -->


        <!-- 准备好一个容器 -->
        <!-- <div class="root"> -->
        <div id="root">
            <h1>hello {{name.toUpperCase()}},{{name}},{{address}},{{1+1}},{{Date.now()}}</h1>  <!--插值语法-->
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

            //创建vue实例
            new Vue({
                // el:'.root'
                // el:document.getElementById('id')
                el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
                data:{ //data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象
                    name:'vue',
                    address:'青岛'
                }
            });
        </script>
    </body>
</html>
复制代码

 

2、模板语法

复制代码
<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8" />
        <title>模板语法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
        <!-- 
            Vue模板语法有2大类：
                1.插值语法：
                        功能：用于解析标签体内容。
                        写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
                2.指令语法：
                        功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
                        举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
                                    且可以直接读取到data中的所有属性。
                        备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
         -->

        <div id="root">
                <h1>插值语法</h1>
                <h3>hello, {{name}}</h3>
                <hr />
                <h1>指令语法</h1>
                <a v-bind:href="url.toUpperCase()">点我去尚硅谷学习1</a>
                <a :href="url">点我去尚硅谷学习2</a>
                <a href="http://yppah.cnblogs.com">点我去blog学习</a>
        </div>

        <script type="text/javascript">
                new Vue({
                        el: '#root',
                        data: {
                                name: 'tom',
                                url: 'http://www.atguigu.com'
                        }
                });
        </script>

</body>

</html>
复制代码

 

3、数据绑定

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>数据绑定</title>
        <script type="text/javascript" src="./js/vue.js"></script>
    </head>
    <body>

        <!-- 
            Vue中有2种数据绑定的方式：
                    1.单向绑定(v-bind)：数据只能从data流向页面。
                    2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
                        备注：
                                1.双向绑定一般都应用在表单类元素上（如：input、select等）
                                2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
         -->

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

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

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

        <script type="text/javascript">
            Vue.config.productionTip = false; 
            new Vue({
                el: '#root',
                data: {
                    name: 'tom'
                }
            });
        </script>

    </body>
</html>
复制代码

 

4、el和data的两种写法

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>el和data的两种写法</title>
        <script type="text/javascript" src="./js/vue.js"></script>
    </head>
    <body>

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

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

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

            //el的两种写法
            /*
            const v = new Vue({
                // el: '#root', //方式1
                data: {
                    name: 'tom'
                }
            });
            console.log(v);
            v.$mount('#root'); //方式2
            */

            // data的两种写法
            const v = new Vue({
                el: '#root', 

                //方式1(对象式)
                /*
                data: {
                    name: 'tom'
                }
                */

                //方式2(函数式)
                data: function(){
                    console.log('@@@', this); //此处的this是Vue实例对象
                    return{
                        name: 'sam'
                    }
                }//不可以写成箭头函数data:()=>{}，但可以简写为data(){}

            });
        </script>

    </body>
</html>
复制代码

 

5、vue中的MVVM模型

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>vue中的MVVM模型</title>
        <script type="text/javascript" src="./js/vue.js"></script>
    </head>
    <body>
        
        <!-- 
            MVVM模型
                        1. M：模型(Model) ：data中的数据
                        2. V：视图(View) ：模板代码
                        3. VM：视图模型(ViewModel)：Vue实例
            观察发现：
                        1.data中所有的属性，最后都出现在了vm身上。
                        2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
        -->

        <div id="root">
            <h1>学校名称: {{name}}</h1>
            <h1>学校地址: {{address}}</h1>
            <!-- <h1>测试一下1: {{1+1}}</h1>
            <h1>测试一下2: {{$options}}</h1>
            <h1>测试一下3: {{$emit}}</h1>
            <h1>测试一下4: {{_c}}</h1> -->
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false; 
            const vm = new Vue({
                el: '#root',
                data: {
                    name: 'QDU',
                    address: '青岛'
                }
            });
        </script>

    </body>
</html>
复制代码

 

posted @   yub4by  阅读(42)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示