Vue学习第一天

2020-01-06 本文已影响0人一只小可爱jack

基础知识

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 <package name>

# 全局安装
$ npm install -global <package name>
$ npm install -g <package name>

安装 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

模板

动态的HTML页面
包含了一些 JS 语法代码
1. 双大括号表达式
2. 指令（以 v- 开头的自定义标签属性）
双大括号表达式
1. 语法：{{msg}}
2. 功能：向页面输出数据
3. 可以调用对象的方法
指令一：强制数据绑定
1. 语法：<a v-bind:href='url'></a>(要写在标签内部，不仅仅是a标签可以用)
2. 功能：指定变化的属性值
3. 完整写法：v-bind:xxx='msg'
4. 简写：:xxx='msg'
指令二：绑定事件监听
1. 功能：绑定指定的事件名的回调函数
2. 写法：v-on:事件="回调函数名"
3. 简写：@事件="回调函数名"

demo1:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>demo</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="demo1">
            <h2>双大括号：{{msg}}</h2>
            <p>{{msg.toUpperCase()}}</p>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#demo1',
                data: {
                    msg: 'hello, Jack!'
                }
            })
        </script>
        
        <div id="demo1-1">
            <a v-bind:href="url">百度一下</a><br>
            <a :href="url">百度</a>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#demo1-1',
                data: {
                    url: 'http://www.baidu.com'
                }
            })
        </script>
        
        <div id="demo1-2">
            <button type="button" v-on:click="click1">click1</button>
            <button type="button" @click="click2">click2</button>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#demo1-2',
                methods: {
                    click1(){
                        alert('click1')
                    },
                    click2(){
                        alert('click2')
                    }
                }
            })
        </script>
    </body>
</html>