Vue-学习

最新推荐文章于 2024-03-22 09:20:42 发布

W思聪、

最新推荐文章于 2024-03-22 09:20:42 发布

阅读量84

点赞数

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

本文链接：https://blog.csdn.net/qq_39696115/article/details/118558334

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了Vue的基本代码结构，包括组件、数据绑定、v-html标签的应用，以及事件监听和数据实时更新的示例。还展示了如何通过v-on绑定事件和使用split(), reverse(), join()方法实现字符串操作。

摘要由CSDN通过智能技术生成

1.vue代码结构

veu代码开发步骤、

首先，引入vue资源

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

vue代码目录结构

<div id="app">
    {{message}}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'liuboss111'
        }
    })
</script>

代码输出。

<div id="app">
    {{message}}
    <h1 v-text="test">深圳</h1>
    <h1 v-text="test1">深圳</h1>
    <h1>{{test2}}深圳</h1>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'liuboss111',
            test: "vue前端三大框架之一！！！",
            test1: "前端三大框架之一VUE！！！",
            test2: "三大框架之一VUE！！！"
        }
    })
</script>

2.v-html标签，当属性中的内容是html格式，也就是网页数据，将会解析成为html结构。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    {{ message }}
    <p v-html="liuboss"></p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world',
            liuboss: "<a href='http://www.baidu.com'>百度<a/>"
        }
    })
</script>

3.v-on 绑定设置事件，案例

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <div>
        <input type="button" value="点击" v-on:click="it">
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            it: function () {
                alert("输变点击弹出事件！！！")
            }
        }
    })
</script>

简写方式

<input type="button" value="点击" v-on:click="it">
<input type="button" value="点击" @click="it">

v-on:可简写成@

双击触发事件 @dblclick

点击两次将会触发鼠标事件.

<input type="button" value="点击" @dblclick="it">

<div id="app">
    <div>
        <input type="button" value="点击" v-on:click="it">
        <input type="button" value="点击" @click="it">
        <input type="button" value="点击" @dblclick="it">
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            it: function () {
                alert("输变点击弹出事件！！！")
            }
        }
    })
</script>

双击事件注解 @dblclick

4.vue数据进行实时动态更新数据。

修改其中的数据需要进行修改

点击西蓝花炒蛋每次后面增加真好吃每点击一次增加一句

<div id="app">
    {{ message }}
    <h2 @click="changemessage">{{message}}</h2>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '西蓝花炒蛋！'
        },
        methods: {
            doit: function () {
                alert("程序员！！！")
            },
            changemessage: function () {
                this.message+="真好吃"
            }
        }
    })
</script>

4.v-on使用

split()： 方法用于把一个字符串分割成字符串数组。
reverse()： 方法用于颠倒数组中元素的顺序。
join() ：方法也就是把数组中的所有元素以字符串的形式输出

功能要求，设置字符串和按钮，点击按钮实现字符串倒转。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
</div>

<script>
    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>