Vue基础操作(二)


前端Vue的基础操作(二)

image-20211025174825428

1. 事件监听绑定

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<!--
v-on:事件名 = “方法名”
简写: @事件名 = “方法名”
事件名: click|keydown|keyup|mouseover|mouseout|自定义事件名
-->
<body>
<div id="app">
    {{count}}
    <button v-on:click="count+=1">点我加1</button>
    <button @click="sub">点我减1</button>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {count: 1},
        methods: {
            sub: function () {
                this.count -= 1;
            }
        }
    });
</script>
</body>
</html>

2. 数据双向绑定

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<!--
双向数据绑定:
    Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,
    当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

表单中使用双向数据绑定:
    你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,
        但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
    注意:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
        你应该通过 JavaScript 在组件的 data 选项中声明初始值!
-->
<body>
<div id="app">
    <!-- 示例1 -->
    <input type="text" v-model="message"/>{{message}}

    <!-- 示例2 -->
    <br>
    <input type="radio" name="sex" value="男" v-model="gender"/>男
    <input type="radio" name="sex" value="女" v-model="gender"/>女
    <p>{{gender}}</p>

    <!-- 示例3 -->
    <br>
    <select v-model="selected">
        <option value="">--请选择--</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>
    <p>{{selected}}</p>

</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: '',
            gender: '',
            selected: ''
        }
    });
</script>
</body>

</html>

3. Vue组件

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<!--
组件是可复用的 Vue 实例,说白了就是一组可以重复使用的模板,跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。

Vue.component():注册组件
beixi:自定义组件的名字
template:组件的模板
-->
<body>
<div id="app">
    <Jerome></Jerome>
</div>
<script>
    //注册组件
    Vue.component("Jerome", {
        template: '<div>Jerome</div>'
    });
    var app = new Vue({
        el: "#app",
    });
</script>
</body>
</html>

4. props动态传递参数

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<!--

-->
<body>
<div id="app">
    <!--组件:使用props把值传递给组件-->
    <blog-post v-for="item in items" v-bind:value="item"></blog-post>
</div>
<script>
    Vue.component("blog-post", {
        props: ['value'],
        template: '<li>{{value}}</li>'
    });
    var app = new Vue({
        el: "#app",
        data: {
            items: ['Jerome', 'qizai', 'papyboy']
        }
    });
</script>
</body>
</html>

文章作者: Jerome
文章链接: /article/53/
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 XiaoLiu!
侵权声明: 若无意对您的文章造成侵权,请您留言,博主看到后会及时处理,谢谢。
评论-----昵称和邮箱必填,网址选填
  目录