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?'真的':'假的'}}：简单判断