新手学vue.js(一)基础入门

前言介绍

对于前端人员来说,学习VUE很容易,我是从事WEB前端的,开始准备学习VUE。首先从官方文档看起点击进入VUE官网

安装

开发版本下载
生产版本下载

学习的话还是选择开发版比较好,有错误提示。

能力要求

需要具备 HTML、CSS 和 JavaScript 中级前端知识。一定要有前端知识,不然驾驭不了。

声明式渲染

引入vue.js文件

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

html&js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div class="test">
        {{news}}
    </div>

    <script>
    var app = new Vue({
        el: '.test',
        data: {
            news: 'hello vue'
        }


    })

    </script>
</body>

</html>

指令

例子:

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date()
  }
})

v-bind 属性被称为指令,V-是vue特有的。这里该指令的作用是:“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。

条件与循环

1.条件

元素的显示与隐藏

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

值为true则显示,否则隐藏

在控制台设置 app3.seen = false,你会发现 “现在你看到我了” 消失了。

效果图:
这里写图片描述

2.列表渲染

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4=new Vue({
        el:'#app-4',
        data:{
            todos:[
                {text:'学习List1'},
                {text:'学习List2'},
                {text:'学习List3'}
            ]
        }
    })

v-for 指令可以绑定数组的数据来渲染一个项目列表

在控制台里,输入 app4.todos.push({ text: ‘新项目’ }),你会发现列表中添加了一个新项。

效果图:
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值