Vue介绍

渐进式的JavaScript框架

Vue：作者-尤雨溪
react：facebook
angualr：谷歌公司

如果想学好Vue时刻看官方文档

Vue内容

前端框架和库的区别
nodejs的简单使用
vue的起步
指令系统
组件的使用
过滤器的使用
watch和computed
钩子函数

前端框架和库的区别

功能上的不同

jquery库：包含DOM（操作DOM）+ 请求，就是一块功能
art-template库：模板引擎渲染，高性能的渲染DOM (我们后端的一种模板跟python的模板类似)
框架：大而全的概念，简易的DOM体验+请求处理+模板引擎
在KFC的世界里，库就是一个小套餐，框架就是全家桶。

代码上的不同

一般使用库的代码，是调用某个函数或者直接使用抛出来的对象，我们自己处理库中的代码。
一般使用框架，其框架本身提供的好的成套的工具帮我们运行我们编写好的代码。

框架的使用

初始化自身的一些行为
执行你所编写的代码
释放一些资源

nodejs简单使用

安装

官网（傻瓜式安装）

检查

打开windows命令行：node -v 如果出现版本号说明安装成功

npm使用

1. node package manager，安装完成后自带包管理器npm

2. 初始化npm的项目 :npm init --yes 自动生成一个package.json文件

下载依赖包

# 下载
npm install 包名 --save
npm install vue --save
npm install jquery --save

# 卸载
npm uninstall vue --save

# 下载所有的依赖包 
npm install

# 淘宝镜像
# cnpm和npm一模一样，国外下载的慢就要用国内的镜像了。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

Vue基础

MVVM

Model View ViewModel，Vue的设计模式。

M相当于django里的model。

V相当于django里的template。

VM相当于django里的视图函数，取模型里的数据渲染到Template。

数据驱动视图。

引包

官网下载vue.js，html文件里引用即可

<script type="text/javascript"   src='Vue.js'></script>

创建实例化对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>       <!-- 插值语法 下面有详解 -->
    </div>

    <script src="vue.js"></script>
    <script>
        var app = new Vue({     // vue的实例化对象
            el:'#app',          // el(element),这个对象要控制哪个元素，#app类似css选择器
            data:{              // data里存放的都是数据属性
                msg:'Vue基础'
            }
        })
    </script>
</body>
</html>

插值语法

{{ msg }}两个大括号就可以使用对象里的数据。

{{变量}} ：使用对象数据

{{1+1}}：做简单运算

{{'hello'}}：直接输入字符串

{{函数的调用}}：函数的调用

{{1=1?'真的':'假的'}}：简单判断