• 前端初学日记 （四） VUE指令

    VUE

    概述

    Vue是一套用于构建用户界面的渐进式框架

    Vue.js 是前端的主流框架之一

    优点

    1、体积小 压缩后 33K

    2、更高的运行效率

    3、双向数据绑定,简化 Dom 操作

    基本指令

    v-bind

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>title>
    6.         <script src="js/v2.6.10/vue.min.js">script>
    7.         <style>
    8.             .active{
    9.                 color: #00aa00;
    10.             }
    11.         style>
    12.     head>
    13.     <body>
    14.         
    15.         
    16.         
    17.         <div id="app">
    18.             <img v-bind:src="imgurl[index]" :title="array[index]"/>
    19.             
    20.             <div v-bind:class="{active: isActive}">asdfghjkldiv>
    21.             
    22.             <input type="button" @click="oper" value="哈哈"/>
    23.         div>
    24.         
    25.         <script>
    26.             var app=new Vue({
    27.                 el:'#app',
    28.                 data:{
    29.                     imgurl:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"],
    30.                     array:["苹果","华为","三星","小米","魅族"],
    31.                     isActive:true,
    32.                     index:0
    33.                 },
    34.                 methods:{
    35.                     oper(){
    36.                         if(this.index==this.imgurl.length-1){
    37.                             this.index=-1;
    38.                         }
    39.                         this.index++;
    40.                         this.isActive=!this.isActive;
    41.                     }
    42.                 }
    43.             })
    44.         script>
    45.     body>
    46. html>

    v-for

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>title>
    6.         <script src="js/v2.6.10/vue.min.js">script>
    7.     head>
    8.     <body>
    9.         <div id="app">
    10.             <ul>
    11.                 <li v-for="user in users">
    12.                     姓名：{{user.name}},
    13.                     年龄：{{user.age}},
    14.                     性别：{{user.sex}}
    15.                 li>
    16.             ul>
    17.         div>
    18.         <script>
    19.             var app=new Vue({
    20.                 el:'#app',
    21.                 data:{
    22.                     users:[
    23.                         {name:"tom",age:20,sex:"男"},
    24.                         {name:"jing",age:20,sex:"女"},
    25.                         {name:"sb",age:20,sex:"男"}
    26.                     ]
    27.                 }
    28.             })
    29.         script>
    30.     body>
    31. html>

    v-html和v-text

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8" />
    5.         <title>title>
    6.         
    7.         <script src="js/v2.6.10/vue.min.js">script>
    8.     head>
    9.     <body>
    10.         
    11.         <div id="app">
    12.             <p>{{ message }}p>
    13.             <p v-html="message">p>
    14.             <p v-text="message">p>
    15.         div>
    16.         
    17.         <script>
    18.             // vue对象
    19.             var app=new Vue({
    20.                 el:'#app',
    21.                 data:{
    22.                     message:'hello Vue!'
    23.                 }
    24.             })
    25.         script>
    26.     body>
    27. html>
    ​

    v-model

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8" />
    5.         <title>title>
    6.         
    7.         <script src="js/v2.6.10/vue.min.js">script>
    8.     head>
    9.     <body>
    10.         <div id="app">
    11.             {{ message }}{{name}}
    12.             <input v-model="name"/>
    13.         div>
    14.         
    15.         <script>
    16.             // vue对象
    17.             var app=new Vue({
    18.                 el:'#app',//绑定挂载点，可以使用其他选择器，但建议id选择器，不能使用body和html标签与vue绑定
    19.                 
    20.                 //定义多个数据
    21.                 data:{
    22.                     message:'hello Vue!',
    23.                     name:'sb',
    24.                 }
    25.             })
    26.         script>
    27.     body>
    28. html>
    29. ​

    v-on

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>title>
    6.         <script src="js/v2.6.10/vue.min.js">script>
    7.     head>
    8.     <body>
    9.         <div id="app">
    10.             <input type="button" value="按钮" v-on:click="test(1,2)" />
    11.             <input type="button" value="按钮" @click="test" />
    12.         div>
    13.         
    14.         <script>
    15.             var app=new Vue({
    16.                 el:'#app',
    17.                 data:{
    18.                     
    19.                 },
    20.                 methods:{
    21.                     test(a,b){
    22.                         alert(a);
    23.                     }
    24.                 }
    25.             })
    26.         script>
    27.     body>
    28. html>

    v-show和v-if

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>title>
    6.         <script src="js/v2.6.10/vue.min.js">script>
    7.         <style>
    8.             img{
    9.                 width: 100px;
    10.                 height: 100px;
    11.             }
    12.         style>
    13.     head>
    14.     <body>
    15.         
    16.         
    17.         
    18.         <div id="app">
    19.             <img v-show="isShow" src="img/1.jpg"/>
    20.             <img v-show="age>18" src="img/2.jpg"/>
    21.             
    22.             <img v-if="isShow" src="img/3.jpg"/>
    23.             <img v-if="age>18" src="img/4.jpg"/>
    24.             <img v-else src="img/5.jpg"/>
    25.             
    26.             <input type="button" @click="oper" value="哈哈"/>
    27.         div>
    28.         
    29.         <script>
    30.             var app=new Vue({
    31.                 el:'#app',
    32.                 data:{
    33.                     isShow:true,
    34.                     age:19
    35.                 },
    36.                 methods:{
    37.                     oper(){
    38.                         this.isShow=!this.isShow;
    39.                         this.age=15;
    40.                     }
    41.                 }
    42.             })
    43.         script>
    44.     body>
    45. html>

  • 相关阅读:
    【附源码】计算机毕业设计SSM腾讯网游辅助小助手
    步进电机驱动时如何计算90°相位差对应的CCR
    如何实现Spring中服务关闭时对象销毁执行代码
    SDC可伸缩的高维约束基准和算法
    java毕业设计在线教学评比平台Mybatis+系统+数据库+调试部署
    C++线程池实现解析
    Python tkinter - 第10章 文本控件(Text)文本位置索引
    数据结构 第二章作业 线性表 西安石油大学
    如何解决 Critical dependency: the request of a dependency is an expression ？
    vue组件库发布到npm
  • 原文地址：https://blog.csdn.net/2301_77532445/article/details/140046160