vue--响应式数据

news2024/11/22 22:22:10

1、建一个vue应用程序（简约）

引入外链式

  <title>第一个Vue程序</title>
    <script src="../vue.global.js"></script>
</head>

{{}}插值表达式

<body>

    <!-- {{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染
    如: Vue 实例中定义一个 msg 变量, 值为 "Hello world", 
    在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "Hello world" -->
    
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ web.title }}</p>
        <p>{{ web.url }}</p>
        <p>{{ func() }}</p>
    </div>

setup函数

 <script>

        //创建一个 Vue 应用程序
        Vue.createApp({
            // 手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等
            // 创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。
            setup(){
                

                // 定义数据
                let msg = "成功创建第一个Vue应用程序!";

                const web = {
                    title: "百度一下，你就知道",
                    url: "www.baidu.com"
                }

                

                // 定义方法（函数）
                const func = ()=> console.log("方法func被调用");
                
                

                // 返回一个对象类型的数据
                return { msg,   
                         web,
                         func
                 }
            }
        }
        ).mount("#app"); //将 Vue 应用程序挂载(mount) 到 app 元素上

    </script>



</body>
</html>

运行结果：

2、让数据变为响应式：

添加ref, reactive定义属性

</head>

<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ web.title }}</p>
        <p>{{ web.url }}</p>
        <p>{{number}}</p>
        <button @click="change">点击我更换网址</button>
    </div>

    <script type="module">
        import {createApp, ref, reactive} from "./vue.esm-browser.js"  //模块化开发方式
        createApp({
            setup(){
                
            
                let number = 10;
                console.log(typeof number,number);  
                
                const web = reactive({
                    title: "百度一下，你就知道",
                    url: "www.baidu.com"
                });
                console.log(typeof web, web);

                const change = () => {
                    web.url += "-->数据被修改";
                }
                // 返回一个对象类型的数据
                return { msg: "成功创建第一个Vue应用程序!" ,   
                         web,
                         number,
                         change
                 }
            }
        }
        ).mount("#app");

    </script>



</body>
</html>

运行结果：

3、事件绑定指令---- v-on

v-on:click 表示在 button 元素上监听 click 事件

<button v-on:click="edit">修改</button> <br>

v-on的简写形式

 <button @click="add(20, 30)">加法</button>

4、条件节点渲染----v-if

  <h3>{{web.number}}</h3>
        <h4 v-if="web.number<1000">我是小于1000的数字</h4>
        <h4 v-else-if="web.number>1000 && web.number<2000">我是大于1000且小于2000的数字</h4>
        <h4 v-else="web.number>2000">我是大于2000的数字</h4>
        <button v-on:click="add_number">点击我修改显示状态</button>
        
    </div>

 <script type="module">  
        import {createApp, reactive, ref} from "../vue.esm-browser.js" 



        createApp(

            {

                setup(){
                    // 定义数据
                    const web = reactive(
                        {
                            isshow: true,  //布尔变量，用于条件判断是否显示某个节点
                            number: 500
                        }
                    );

                    // 定义方法（函数）

                    const change_isshow = () => {
                        web.isshow = !web.isshow;
                    }

                    const add_number = () => {
                        web.number += 1000;
                    }


                    // 返回一个对象类型的数据 (数据-函数，或者说属性-方法)
                    return {    
                             web,
                             change_isshow,
                             add_number
                    }


            }

            }
        ).mount("#app");


    </script>



</body>
</html>

运行结果

5、节点的动态属性(单向绑定)----v-bind

 <div id="app">

        <h3>  实验1：iuput标签动态属性绑定    v-bind:value </h3>
        <input type="text" v-bind:value="web.str">


        <h3>  实验2： img标签动态属性绑定</h3>
        <img v-bind:src="web.img">

        <h3>  实验3： img标签动态属性绑定(简写形式)</h3>
        <img :src="web.img">

注：v-bind的简写形式是：

 <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
    
        createApp({
            setup() {
                const web = reactive({
                    str: "www.baidu.com",
                    img: "./img_src/logo0.png",
                    // fontStatus: false
                })

                const change = () => {
                    web.str += "w"; //修改字符串
                    web.img=`./img_src/logo1.png`;//修改图片路径
                    // web.fontStatus = !web.fontStatus; //修改布尔变量
                }
    
                return {
                    web,
                    change
                }
            }
        }).mount("#app")
    </script>

运行结果：1

运行结果：2

6、遍历指令v-for

 <div id="app">
        <!-- 遍历对象的值 -->
        <h4>遍历对象的值。</h4>
        <ul>
            <li v-for="value in data.user">
                {{ value }}
            </li>
        </ul>

        <!-- 遍历对象的值和索引。 注意：写指令时，先值后索引 -->
        <h4>遍历对象的值和索引。 注意：写指令时，先值后索引</h4>
        <ul>
            <li v-for="(value, index) in data.number">
                {{ index }} : {{ value }}
            </li>
        </ul>
    

        <!-- 遍历对象的值和键。 注意：写指令时，先值后键 -->
        <h4>遍历对象的值和键。 注意：写指令时，先值后键</h4>
        <ul>
            <li v-for="(value, key) in data.user">
                {{ key }} : {{ value }}
            </li>
        </ul>
    
        <!-- 遍历对象的值，键和索引。 注意：写指令时，先值再键后索引 -->
        <h4>遍历对象的值，键和索引。 注意：写指令时，先值再键后索引</h4>
        <ul>
            <li v-for="(value, key, index) in data.user">
                {{ index }} : {{ key }} : {{ value }}
            </li>
        </ul>
    


        <h4>指令嵌套： 先用v-for指令遍历对象，然后展示符合v-if条件的节点</h4>
        <ul>
            <!--注： <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染  -->
            
            <template v-for="(value, key, index) in data.user">
                <li v-if="index == 1">  
                    {{ index }} : {{ key }} : {{ value }}
                </li>           
            </template>
        </ul>
    
        
    </div>

    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
        createApp({
        setup() {
                const data = reactive({
                    //数组
                    number: ["十",  "十一",  "十二"], 
                    //对象
                    user: { name: "李雷",   gender: "女" }
                });

                return {
                    data
                }
            }
        }).mount("#app")
    </script>



</body>
</html>

运行结果：