Vue基础知识

Vue

Vue基础知识

Vue基础知识_第1张图片

Vue基础知识_第2张图片

Vue基础知识_第3张图片

Vue基础知识_第4张图片

Vue基础知识_第5张图片

v-bind:动态绑定属性值

Vue 修改,标签内也修改

Vue基础知识_第6张图片

Vue基础知识_第7张图片


在methods 中可以定义很多函数
在 data 中可以定义很多变量

Vue基础知识_第8张图片

v-if / v-show:对符合条件的元素进行展示
Vue基础知识_第9张图片

v-for:把数据遍历出现在网页中

案例

Vue基础知识_第10张图片

DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Documenttitle>

    <script src="./Vuejs/vue.js">script>

head>

<body>

    <table border="1" cellspacing="0" width="60%" id="app">

<tr>

    <th>编号th>

    <th>姓名th>

    <th>年龄th>

    <th>性别th>

    <th>成绩th>

    <th>等级th>

tr>

  

<tr align="center" v-for="(user, index) in users">

    <td>{{index + 1}}td>

    <td>{{user.name}}td>

    <td>{{user.age}}td>

    <td>

        <span v-if="user.gender == 1">span>

        <span v-if="user.gender == 0">span>

    td>

    <td>{{user.score}}td>

    <td>

        <span v-if="user.score >= 85">优秀span>

        <span v-else-if="user.score >= 60">及格span>

        <span style="color : red;" v-else>不及格span>

    td>

tr>

    table>

body>

html>

  
  

<script>

new Vue({

    el:"#app",

    data:{

        users:[{

            name:"Tom",

            age:20,

            gender:1,

            score:78

        },{

            name:"Rose",

            age:18,

            gender:0,

            score:86

        },{

            name:"Jerry",

            age:26,

            gender:1,

            score:90

        },

        {

            name:"Tony",

            age:30,

            gender:1,

            score:52

        }

    ]

    },

    model:{

  

    }

})

script>

Vue生命周期

Vue基础知识_第11张图片

Vue基础知识_第12张图片

Vue基础知识_第13张图片

Ajax

Vue基础知识_第14张图片

Vue基础知识_第15张图片

Vue基础知识_第16张图片

你可能感兴趣的:(vue.js,前端,javascript)