新手学vue.js（一）基础入门

前言介绍

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

VUE是轻量级框架
易于上手
和其他框架对比
hello world例子

安装

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

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

能力要求

需要具备 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: ‘新项目’ })，你会发现列表中添加了一个新项。