Vue(4) —— Vue基本语法

目录

    • 1.v-bind
    • 2.v-if,v-else
      • 1.判断
      • 2.循环


    我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似,但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联,所有东西都是响应式的,我们在控制台操作对象属性,界面可以实时更新!

    我们可以使用v-bind来绑定元素属性和vm对象的data对象属性中注册的变量的值!

1.v-bind

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

    你看到的 v-bind 等被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

    若是你再次打开浏览器的 JavaScript 控制台,输入 app.message = ‘新消息’,就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新


2.v-if,v-else

  • 判断:判断数据什么时候显示/不显示
  • 循环:循环集合中的数据进行显示

1.判断

  • v-if
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
    
    head>
    <body>
        <div id="app">
            <h2 v-if="flag">OKh2>
            <h2 v-else>NOh2>
        div>
    
        <script>
    
            //viewModel 实现与Model双向绑定,动态更新视图
            var vm = new Vue({
            
                el:"#app",
                data:{
            
                    flag:true
                }
            });
        script>
    body>
    html>
    
    Vue(4) —— Vue基本语法_第1张图片
  • 测试
    Vue(4) —— Vue基本语法_第2张图片
    Vue(4) —— Vue基本语法_第3张图片
  • v-else-if
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
    
    head>
    <body>
        <div id="app">
            <h2 v-if="score>90">Ah2>
            <h2 v-else-if="score>80">Bh2>
            <h2 v-else>Ch2>
        div>
    
        <script>
    
            //viewModel 实现与Model双向绑定,动态更新视图
            var vm = new Vue({
            
                el:"#app",
                data:{
            
                    score:85
                }
            });
        script>
    body>
    html>
    
    Vue(4) —— Vue基本语法_第4张图片
    可见这其实和我们学习Java语法是一样的

2.循环

  • v-for

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
    
    head>
    <body>
        <div id="app">
            <li v-for="item in items">
                {
          {item.message}}
            li>
            <h2 v-else>Ch2>
        div>
    
        <script>
    
            //viewModel 实现与Model双向绑定,动态更新视图
            var vm = new Vue({
            
                el:"#app",
                data:{
            
                    items:[
                        {
            message:"java基础"},
                        {
            message:"java框架"},
                        {
            message:"Vue"}
                    ]
                }
            });
        script>
    body>
    html>
    
  • 测试Vue(4) —— Vue基本语法_第5张图片
    Vue(4) —— Vue基本语法_第6张图片
    Vue(4) —— Vue基本语法_第7张图片
    Vue(4) —— Vue基本语法_第8张图片

  • 循环下标index
    Vue(4) —— Vue基本语法_第9张图片

  • 测试
    在这里插入图片描述

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