Vue学习第一天

基础知识

node

安装 Node（傻瓜式安装）

npm基础

npm 之于 Node.js ，就像 pip 之于 Python 。

npm 不需要单独安装。在安装 Node 的时候，会连带一起安装 npm 。

查看npm镜像源

$ npm config get registry

修改npm镜像源

$ npm config set registry https://registry.npm.taobao.org

更新npm

• Linux

$ sudo npm install npm@latest -g

• Windows

$ npm install npm -g

查看npm版本

$ npm -v

安装包

# 本地安装
$ npm install 

# 全局安装
$ npm install -global 
$ npm install -g 

安装 vue

# 全局安装
$ npm install -g vue
# 本地安装
$ npm install vue

安装 vue-cli

# 全局安装
$ npm install -g @vue/cli
# 本地安装
$ npm install @vue/cli

安装 webpack

# 全局安装
$ npm install -g webpack
# 本地安装
$ npm install webpack

安装 axios

$ npm install --save axios

用图形化管理界面创建项目

Windows系统必须用cmd，否则报错。

用命令行打开项目文件夹（一般切换到 D 盘），

打开图形化界面

$ vue ui

在图形化界面下创建项目

创建成功后使用 编辑器 打开项目进行开发。

必须在项目目录下才可以

# 建立Web测试环境，实时查看界面效果。
$ npm run serve

# 生成html文件，用于发布到服务器上。
$ npm run build 

模板

1. 动态的HTML页面

2. 包含了一些 JS 语法代码

   1. 双大括号表达式
   2. 指令（以 v- 开头的自定义标签属性）

3. 双大括号表达式

   1. 语法：{{msg}}
   2. 功能：向页面输出数据
   3. 可以调用对象的方法

4. 指令一：强制数据绑定

   1. 语法：v-bind:href='url'>(要写在标签内部，不仅仅是a标签可以用)
   2. 功能：指定变化的属性值
   3. 完整写法：v-bind:xxx='msg'
   4. 简写：:xxx='msg'

5. 指令二：绑定事件监听

   1. 功能：绑定指定的事件名的回调函数
   2. 写法：v-on:事件="回调函数名"
   3. 简写：@事件="回调函数名"

demo1:

    
        
        
        
    
    
        

            
双大括号：{{msg}}
            
{{msg.toUpperCase()}}
        
        
        
        

            百度一下

            百度
        
        
        
        

            click1
            click2