Vue.js 前端框架学习笔记

介绍一下Vue：

        Vue.js是一套构建用户界面的渐进式JavaScript框架，它是以数据驱动和组件化的思想构建的，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue的特点：     

 

1. vue.js属于轻量级的框架；
2. vue.js的数据时双向绑定的；
3. vue.js中指令和组件分得更清晰；
4. vue.js能够异步批量DOM更新；
5. vue.js具有可扩展性，让用户可以在多个组件中复用共同的特性。

搭建步骤

# 全局安装 vue-cli

$ npm install --global vue-cli        安装脚手架

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project          项目名称

# 安装依赖，走你

$ cd my-project                  进入项目

$ npm install                     安装依赖

$ npm run dev                   运行项目

 

 

用法如下：

首先把Vue.js用<script>标签引入  官网下载地址：https://vuejs.org/js/vue.min.js

每一个Vue都需要通过实例化来实现，语法如下：

 

 <script src="https://npmcdn.com/vue/dist/vue.js">

           var vm = new Vue({
            el: '#app',

            data: {

                message: 'Hello Vue.js!'
                    }
})

</script>

<div id="app">

      <h1>message: : {{message:}}</h1>

</div>

在Vue构造器中有一个el参数，它是DOM中的id，我的理解是把数据绑定到模型上

data 是用来定义属性的   这里的message就是属性

也可以这样写 多个属性用 ，隔开

 

<script src="https://npmcdn.com/vue/dist/vue.js">

 

        data = {message ："Hello Vue.js"} 

          var vm =  new Vue({

            el: '#app',

            data: data

})

</script>

在页面中可以看到Hello Vue.js      效果如下：

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。