3. Vue基础指令:{{}};v-bind;v-on;v-model;v-if;v-for

文章目录

  • 获取数据'{ {}}'
  • 绑定属性 v-bind
  • 绑定事件 v-on
  • 表单输入绑定 v-model
  • 条件指令 v-if
  • 循环 v-for

下面的例子,都是在原生的html页面中书写的,并没有使用Vue的工具构建项目。

获取数据’{ {}}’

采用模板语法声明式的对数据进行渲染。
使用{ {}}对数据与DOM建立关联,构建响应式的页面。
下面的例子,使用了在线CDN的方式引入Vue,counter的值,将会每秒递增。

<head>
    <meta charset="UTF-8">
    <title>声明式渲染title>
    <script src="https://unpkg.com/vue@next">script>
head>

<body>
    <div id="counter">
        计数器:{
    {counter}}
    div>
body>

<script>
    const Counter = {
      
        data() {
      
            return {
      
                counter: 0,
            }
        },
        mounted() {
      
            setInterval(() => {
      
                this.counter++
            }, 1000)
        }
    }

    Vue.createApp(Counter).mount('#counter')
script>

效果图:
在这里插入图片描述

绑定属性 v-bind

<script src="https://unpkg.com/vue@next">script>

<body>
    <div id="bind-attribute">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息!
        span>
    div>
body>

<script>
    const AttributeBinding = {
      
        data() {
      
            return {
      
                message: "你加载这个页面在:" + new Date().toLocaleString(),
            }
        }
    }

    Vue.createApp(AttributeBinding).mount('#bind-attribute')
script>

效果图:
3. Vue基础指令:{{}};v-bind;v-on;v-model;v-if;v-for_第1张图片

  • 在Vue中,以v-开头的被称为指令,是Vue提供的特殊的标签
  • 比如上边的v-bind就是一个指令,用于给标签的属性绑定数据。
  • v-bind可以缩写成为: ,例如上边的 v-bind:title就可以缩写成为::title

绑定事件 v-on

<script src="https://unpkg.com/vue@next">script>

<body>
    <div id="event-handling">
        <p>{
    {message}}p>
        <button v-on:click="reverseMessage">反转button>
    div>
body>

<script>
    const EventHandling = {
      
        data() {
      
            return {
      
                message: "这是一条消息"
            }
        },

        methods: {
      
            reverseMessage() {
      
                this.message = this.message.split('').reverse().join('')
            }
        }
    }

    Vue.createApp(EventHandling).mount('#event-handling')
script>
  • v-on 指令用于绑定事件,给该事件添加一个事件监听器,通过它调用该事件对应的方法
  • v-on可以缩写成为@
    如上边的 v-on:click就可以写成@click
    在这里插入图片描述

表单输入绑定 v-model

<script src="https://unpkg.com/vue@next">script>

<body>
    <div id="two-way-binding">
        <p>{
    {message}}p>
        <input type="text" v-model="message">
    div>
body>

<script>
    const TwoWayBinding = {
      
        data() {
      
            return {
      
                message: '色不异空,空不异色'
            }
        }
    }

    Vue.createApp(TwoWayBinding).mount('#two-way-binding')
script>
  • v-model指令,相当于监控了表单的变化,获取到表单中的值
  • 通过v-model指令,可以轻松的实现表单输入和应用状态的双向绑定
    3. Vue基础指令:{{}};v-bind;v-on;v-model;v-if;v-for_第2张图片

条件指令 v-if

<script src="https://unpkg.com/vue@next">script>

<body>
    <div id="conditional-rendering">
        <p v-if="seen">你可以看到我吗?p>
        <button @click="changeSeen">改变seenbutton>
    div>
body>

<script>
    const ConditionalRendering = {
      
        data() {
      
            return {
      
                seen: true
            }
        },
        methods: {
      
            changeSeen() {
      
                this.seen = !this.seen
            }
        }
    }

    Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
script>
  • v-if 是条件指令,只有满足条件的时候,才会显示对应的元素
    3. Vue基础指令:{{}};v-bind;v-on;v-model;v-if;v-for_第3张图片

循环 v-for

<script src="https://unpkg.com/vue@next">script>

<body>
    <div id="list-rendering">
        <ol>
            <li v-for="(item, index) in items" v-bind:key="index">{
    { item.text }}li>
        ol>
    div>
body>

<script>
    const ListRendering = {
      
        data() {
      
            return {
      
                items: [
	                {
      text: '和我一起学习Vue'}, 
	                {
      text: '和我一起学习Java'}, 
	                {
      text: '和我一起学习数据结构与算法'}, 
	                {
      text: '和我一起学习设计模式'}, 
                ]
            }
        }
    }

    Vue.createApp(ListRendering).mount('#list-rendering')
script>
  • v-for在使用时,最好绑定一个唯一的key

效果图:
3. Vue基础指令:{{}};v-bind;v-on;v-model;v-if;v-for_第4张图片

你可能感兴趣的:(#,Vue,vue)