Day1Vue介绍

一、什么是Vue

一套用于构建用户界面的渐进式（可以使用一个轻量的核心库，或者引入各式各样的Vue插件）JavaScript框架

二、Vue特点

1、采用组件化模式，提高代码复用率，更好维护

2、声明式编码，让编码人员无需直接操作DOM,提高开发效率。

3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

三、练习

1、Hello World

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="app"></div>//标签里面的内容相当于在这边写了<div>Hello World!</div>
 </body> <script> Vue.createApp({//创建一个vue实例  template: '<div>Hello World!</div>' }).mount("#app")//所放置的位置 </script> </html>

 2、计数器

有数字不停的变动

<script>
  Vue.createApp({
    data() {
      return {
        counter: 1
      }
    },
    mounted() {
      setInterval(() => {
        this.counter += 1//还有一种写法：this.$data.counter+=1
      }, 1000)
    },
    template: '<div>{{counter}}</div>'//字面量
  }).mount("#app")
</script>

 3、按钮绑定触发事件

效果：点击按钮就会触发alert（v-on,或者@都可以触发绑定事件）

<script>
  Vue.createApp({
    data() {
      return {
        content: ""
      }
    },
    methods: {
      welcomeBtnClick() {
        this.content = "欢迎你的光临，贵宾一位！"
      },
      byeBtnClick() {
        this.content = "欢迎下次光临，真空套餐下次8折优惠"
      },
    },
    template: `<div>
                      <div>{{content}}</div>
                      <button @click.native="welcomeBtnClick">有顾客来</button>&nbsp;
                      <button @click="byeBtnClick">顾客离开</button>
                 </div>`
  }).mount("#app")
</script>

 4、循环输入双向绑定

效果：

 代码：

<script>
    Vue.createApp({
        data() {
            return {
                list: [],
                inputValue: ''
            }
        },
        methods: {
            enterAddItem() {
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        },
        template: `
        <div>
            <input v-model="inputValue" />
            <button v-on:click="enterAddItem">搜索王妍老公</button>
        <ul>
            <li v-for="(item,index) of list">{{index}}-{{item}}是王妍的老公</li>
            </ul>
        </div>`
    }).mount("#app")
</script>

5、组件化

<script>
    const app = Vue.createApp({
        data() {
            return {
                list: [],
                inputValue: ''
            }
        },
        methods: {
            enterAddItem() {
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        },
        template: `
        <div>
            <my-title/>
            <input v-model="inputValue" />
            <button v-on:click="enterAddItem">搜索</button>
        <ul>
            <my-people
            v-for="(item,index) of list"
            v-bind:item="item"
            v-bind:index="index"
            />
        </ul>
        </div>`
    })
    app.component('my-title', {
        template: '<h1 style="text-align:center">比奇堡<h1>'
    })
    app.component('my-people', {
        props: ['index', 'item'],
        template: ` <li>[{{index}}]-{{item}}</li> `
    })
    app.mount("#app")
</script>

 

posted @ 2023-07-13 14:57  末叶da  阅读(9)  评论(0)    收藏  举报