vue.js基础

2862人阅读 2021/5/17 20:39 总访问:651492 评论:0 收藏:0 手机
分类: Vue

前言

Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API;

Vue.js是一个构建数据驱动的Web界面的库。

Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。


简而言之:Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

使用基础

    
<div id="msg" >{{msg}}</div>
    
    
    var my = new Vue({
        el: "#msg",
        data: {
            msg: "hello vue.js"
        }
    })

运行结果为

循环

<div id="for" >
    <ul v-for="item in num">
        <li>{{item}}</li>
    </ul>
</div>

    var name = new Vue({
        el: "#for",
        data: {
            num: ["111","222","333"]
        }
    })

运行效果

判断

      <tr v-for="item in users">
             <td>
                   <span v-if="item.state==1">审核通过</span>
                   <span v-else-if="item.state==2">审核中</span>
                   <span v-else >审核失败</span>
   </td>
       </tr>

添加事件方法(medthods)

  
  
  <div id="for">
    <ul v-for="item in num">
        <li v-on:click="show(item)">{{item}}</li>
    </ul>
 </div>
  
    var name = new Vue({
        el: "#for",
        data: {
            num: ["111", "222", "333"]
        },
        methods:
        {
            show: function (item) {
                alert("你点击了" + item)
            }
        }
    })


评价
脚踏实地,一步一个脚印
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术