Vue基础(二)

最新推荐文章于 2023-05-17 19:46:30 发布

＿愚者

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量66

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43477218/article/details/114892967

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

双向绑定
Vue组件
- 定义一个组件
- 组件中使用model的数据

双向绑定

model变了，view跟着改变

v-bind指令，绑定属性值

【v-】开头的属性都是指令属性，是vue提供的特殊特性（vue自定义的标签）。它们会渲染DOM上应用特殊的响应式行为。

【v-bind】指的是绑定属性，将标签属性【title】的值与View Model的值绑定起来，不用写【{{message}}】这种模板了。因为有时候需要将model的信息放到标签的属性中，这样使用【v-bind】属性更好。

注意！【{{message}}】只是输出显示model中的数据message，而【v-bind:title=“message”】则可以将model中的数据message作为属性的值进行绑定。

显示输出，使用【{{message}}】
作为属性值，使用属性【v-bind:title=“message”】进行绑定

例如：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <span v-bind:title="message">
                停留在这里查看！
            </span>
        </div>


        <script>
            var vm1 = new Vue({
                el: "#app",
                data: {
                    message: "hello vue!"
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

前端除了绑定事件外，其余的逻辑就是判断与循环了，所以还有两个标签【v-if、v-else】【v-for】

注意！绑定标签中的下级标签仍具有作用域，所以需要一个外部div去绑定vm，在div内部进行相应的逻辑操作！

v-if、v-else-if、v-else指令判断值

有了这个vue标签属性就可以根据后台model的数据不同，显示不同的前台不同的信息。这一点更能体现出ViewModel是连接View与Model的桥梁！

值作为判断条件，是否显示标签

例如：

<html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 v-if="flag">{{message}}</h1>
            <h1 v-else>{{fail}}</h1>
        </div>

        <script>
            var vm1 = new Vue({
                el: "#app",
                data: {
                    flag: true,
                    message: "hello,vue again",
                    fail: "No!I don't want see you!"
                }
            })
        </script>
        
    </body>
</html>

在这里插入图片描述
在这里，使用一个【div】去绑定【vm】，然后其标签的内部就可以使用【vue的属性】也可以使用【model的数据】了！

表达式作为判断条件，是否显示标签

<!DOCTYPE html>
<html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 v-if="flag === false">{{message}}</h1>
            <h1 v-else>{{fail}}</h1>
        </div>

        <script>
            var vm1 = new Vue({
                el: "#app",
                data: {
                    flag: true,
                    message: "hello,vue again",
                    fail: "No!I don't want see you!"
                }
            })
        </script>   
    </body>
</html>

如果【model中的属性flag】绝对等于 false，那么输出【model中的属性message】。但是在这里model中的属性【flag】是 true，所以以上代码会输出【model中的属性fail】的值。
在这里插入图片描述

v-for指令迭代数据

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>

        <div id="app">
            <!-- "(item, index) in items"这样可以获取值与下标 -->
            <li v-for="item in items">
                {{item.message}}
            </li>
        </div>

        <script>
            var vm1 = new Vue({
                el: "#app",
                data: {
                    items: [
                        {message: "student1"},
                        {message: "student2"}
                    ]
                }
            })
        </script>
    </body>
</html>

遍历循环【model中的属性items】将【items中的数据输出】
在这里插入图片描述
注意！for迭代是循环有指令的那个标签！

v-on指令绑定事件

如果你不是用vue进行事件绑定，那么你需要写一个点击事件的函数，函数中修改标签的值（操作DOM元素）。操作DOM元素是很卡的。

所以Vue推出了自己的事件绑定【v-on】

v-on是vm的一个操作，当用户点击按钮后直接修改model的数据，model的数据改变了跟着view的显示数据也会改变。这都是vm在中间做桥梁的效果！

v-on直接操作数据

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button v-on:click="num = num + 1">点我加一</button>
            <h1>{{num}}</h1>
        </div>


        <script>
            var vm1 = new Vue({
                el: "#app",
                data: {
                    num: 0
                }
            })
        </script>
        
    </body>
</html>

v-on通过回调函数操作数据

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button v-on:click="addOne">点我加一</button>
            <h1>{{num}}</h1>
        </div>


        <script>
            var vm1 = new Vue({
                el: "#app",
                data: {
                    num: 0
                },
                methods: {
                    addOne: function () {
                        // this表示vm1对象
                        this.num += 1
                        console.log(this.num)
                    }
                }
            })
        </script>
        
    </body>
</html>

view变了，model跟着改变

业务场景：

假如有一个【input】标签，它的【placeholder】是【model】的数据。现在点击向【input】中输入数据，【model】中的数据需要跟着改变，在请求时发送【model】才有效！

v-model指令修改model中的数据

可捕捉input、textarea、radio、select标签的值

input：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 显示model中的数据 -->
            <h1>{{message}}</h1>
            <input type="text" v-model="message">
        </div>

        <script>
            var vm1 = new Vue({
                el: "#app",
                data: {
                    message: ""
                }
            })
        </script>
    </body>
</html>

textarea：

<body>
        <div id="app">
            <textarea cols="10" rows="10" v-model="message"></textarea>

            <p>
                {{message}}
            </p>
        </div>

        <script>
            var vm1 = new Vue({
                el: "#app",
                data: {
                    message: ""
                }
            })
        </script>
    </body>

redio:

<body>
        <div id="app">
            <input type="radio" name="sex" value="男" v-model="message">男
            <input type="radio" name="sex" value="女" v-model="message">女

            <p>
                {{message}}
            </p>
        </div>

        <script>
            var vm1 = new Vue({
                el: "#app",
                data: {
                    message: ""
                }
            })
        </script>
    </body>

select:

<body>
        <div id="app">
            <select name="sex" v-model="message">
                <option value="男">男</option>
                <option value="女">女</option>
                <option value="人妖">人妖</option>
            </select>

            <p>
                {{message}}
            </p>
        </div>

        <script>
            var vm1 = new Vue({
                el: "#app",
                data: {
                    message: ""
                }
            })
        </script>
    </body>

Vue组件

组件其实就相当于一个dom节点（一个dom节点可以含有多个子节点，这样将这个dom节点作为一个模板可以减少代码量）给抽出来成了一个组件（模板）了。

可以使用组件自定义标签

定义一个组件

例如：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <qiu></qiu>
            <qiu></qiu>
        </div>

        <script>
            Vue.component("qiu", {
                template: '<li>Hello</li>'
            })

            var vm1 = new Vue({
                el: "#app"
            })
        </script>
    </body>
</html>

这就是【.vue】文件中的【template】的原理

组件中使用model的数据

再难一些：组件循环访问【data】中的数据

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <qiu v-for="item in items" v-bind:q="item"></qiu>
        </div>

        <script>
            Vue.component("qiu", {
                props: ['q'],
                template: '<li>{{q}}</li>'
            })

            var vm1 = new Vue({
                el: "#app",
                data: {
                    items: ['1', '2', '3']
                }
            })
        </script>
    </body>
</html>

解释：组件是不能直接访问model中的数据的，它只能通过标签==【v-for】循环获取==，通过绑定【q】与【item】传入数据到【component】中的【props】（你可以理解为函数传值，item是实参，q是形参

就算data中不是列表只传入一个值，也需要props进行传值。这就是组件的一个使用方法！

＿愚者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础(二)

文章目录双向绑定model变了，view跟着改变v-bind指令，绑定属性值v-if、v-else-if、v-else指令判断值值作为判断条件，是否显示标签表达式作为判断条件，是否显示标签v-for指令迭代数据v-on指令绑定事件v-on直接操作数据v-on通过回调函数操作数据view变了，model跟着改变v-model指令修改model中的数据Vue组件定义一个组件组件中使用model的数据双向绑定model变了，view跟着改变v-bind指令，绑定属性值【v-】开头的属性都是指令属性，是vu
复制链接

扫一扫