vue初识

2021/4/16 18:27:04

编程Tag： vue data APP content 初识 test1

本文主要是介绍vue初识，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

引入vue插件，开发时直接使用<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>的方式来，这种称为cdn方式的引入，学习的时候用着很不错。

1、创建第一个应用

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

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

效果如下所示：

2、用vue实现前端的一个计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
    </div>


</body>
   <script>
        Vue.createApp({ //创建一个vue实例
            // data函数负责返回数据，声明式的返回数据的方法
            data(){
                return {
                    counter: 1
                }
            },
            //钩子函数
            mounted(){
                setInterval(()=>{
                    //下面两种用任何一种都可以
                    // this.counter += 1
                    this.$data.counter += 1
                },1000)
            },
            template: '<h2><div>{{ counter }}</div></h2>' //双大括号表示字面量
        }).mount("#app")
    </script>
</html>

3、vue实现鼠标点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
    </div>


</body>
   <script>
        Vue.createApp({
            data(){
                return {
                    content: "",
                    setMeal: "真空套餐 帝王套餐 夏日套餐 学生套餐",
                    isShowMeal: false
                }
            },
            // methods声明一个事件绑定一个方法
            methods: {
              welcomeBtnClick() {
                  this.content = "欢迎你的光临，贵宾一位"
              },
              byeBtnClick(){
                  this.content = "欢迎下次光临"
              },
              showOrHidebtnClick(){
                  this.isShowMeal = !this.isShowMeal
              }
            },

            template: `
                <div>

                    <div><h1>{{ content }}</h1></div>
                    <button v-on:click="welcomeBtnClick"><h3>有顾客来</h3></button>&nbsp;
                    <button v-on:click="byeBtnClick"><h3>顾客离开</h3></button>
                    <div>
                      <div v-if="isShowMeal">{{setMeal}}</div>
                      <button v-on:click="showOrHidebtnClick">显示/隐藏套餐</button>
                    </div>
                </div>
            `
        }).mount("#app")
    </script>
</html>

4、实现一个点击添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
    </div>

</body>
   <script>
       Vue.createApp({
           data(){
               return{
                   list: [],
                   inputValue: ''
               }
           },
           methods: {
               handleAdditem(){
                  // push就是给数组增加数据的，类似python中的list.append()方法
                   this.list.push(this.inputValue)
                   this.inputValue=''
               }
           },
           template:`
             <div>
                //v-model多用于输入框
                <input v-model="inputValue" />
                <button v-on:click="handleAdditem">增加水果</button>

             <ul>
              <li v-for="(item,index) in list">[{{index}}]{{item}}</li>
             </ul>
             </div>
           `
       }).mount('#app')
   </script>
</html>

这篇关于vue初识的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

vue初识

1、创建第一个应用

2、用vue实现前端的一个计数器

3、vue实现鼠标点击事件

4、实现一个点击添加

相关编程文章