Vue学习 从new Vue()开始

1.Vue是什么
用于构建用户界面的渐进式框架
声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
vue 的核心库只关注视图层
2.Vue有哪些优点?
易用、灵活、高效
简单易上手
刚开始 学习Vue 首先准备Vue.js文件
访问Vue官网:vue.js
然后点击学习进入教程->安装选项->选择相应版本
在html中建一个

标签 充当容器

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        
    </div>
</body>
</html>

接下来 引入vue.js文件

```javascript
<script type="text/javascript" src="js/vue.js"></script>

创建vm 变量存储vue实例 提供一个对象型参数
其中 包含两个属性 el 和 data

   <script type="text/javascript">
        var vm = new Vue({
            el: '#app',//声明数据填的位置
            data: {
                msg: 'Hello Vue' //数据
            }
        });
    </script>

在容器中提供标签 把data的数据 渲染页面中

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
         <div>{{msg}}</div>
    </div>
</body>
</html>

页面效果:

总结:

          Vue的基本使用步骤
          1、需要提供标签用于填充数据
          2、引入vue.js库文件
          3、可以使用vue的语法做功能了
          4、把vue提供的数据填充到标签里面

你可能感兴趣的:(Vue学习 从new Vue()开始)