Vue介绍

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

 

posted @ 2019-06-28 14:39  load晴天  阅读(538)  评论(0编辑  收藏  举报