Vue 学习笔记

Mr_zhangyj

于 2022-10-02 19:22:44 发布

阅读量855

点赞数

分类专栏：前端学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Mr_zhangyj/article/details/127132302

版权

前端学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

看谷粒学苑的 Vue 教程

1、入门案例

1.1、初始案例

在文件中导入 vue 相关 js 文件后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- {{}} 插值表达式，绑定vue中的data数据 -->
        {{message}}
    </div>

    <!-- 引入vue的js文件 -->
    <script src="vue.min.js"></script>

    <script>
        // 创建一个vue对象
        new Vue({
            el: '#app', //绑定vue作用的范围
            data: { //定义页面中显示的模型数据
                message: 'Hello Vue!'
            }
        })
    </script>

</body>
</html>

1.2、抽取代码片段

在 vscode 中创建代码片段：文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

注意：制作代码片段的时候，字符串中如果包含文件中复制过来的 “Tab” 键的空格，要换成 “空格键” 的空格

{
	"vue htm": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			"    <meta charset=\"UTF-8\">",
			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"    <title>Document</title>",
			"</head>",
			"",
			"<body>",
			"    <div id=\"app\">",
			"",
			"    </div>",
			"",
			"    <script src=\"vue.min.js\"></script>",
			"",
			"    <script>",
			"        new Vue({",
			"            el: '#app',",
			"            data: {",
			"                $1",
			"            }",
			"        })",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

2、基本语法

2.1、基本数据渲染和指令 v-bind

<body>
    <div id="app">
        <!-- v-bind 单向数据绑定，一般用于在标签属性里获取值 -->
        <h1 v-bind:title="message">{{content}}</h1> <!-- 将光标移到标题显示message的信息 -->
        <!-- 简写方式：省略v-bind -->
        <h1 :title="message">{{content}}</h1>
    </div>

    <script src="js/vue.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                content: '我是标题',
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })
    </script>
</body>

2.2、双向绑定 v-model

<body>
    <div id="app">
        <input type="text" v-bind:value="searchMap.keyWord">    <!-- 修改无法改变keyword的值 -->
        <input type="text" v-model="searchMap.keyWord"> <!-- 修改可以改变keyword的值 -->

        <p>{{searchMap.keyWord}}</p>
    </div>

    <script src="js/vue.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap: {
                    keyWord: '哈哈哈'
                }
            }
        })
    </script>
</body>

2.3、事件 v-on

<body>
    <div id="app">
        <!-- VUE绑定事件 -->
        <button v-on:click="search()">查询</button>
        <!-- 简写 -->
        <button @click="f1()">查询</button>
    </div>

    <script src="js/vue.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap: {
                    keyWord: '哈哈哈'
                },
                //查询结果
                result: {}
            },
            methods: {
                search() {
                    console.log('search方法');
                },
                f1() {
                    console.log('f1方法');
                }
            }
        })
    </script>
</body>

2.4、修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()，即阻止事件原本的默认行为

<body>
    <div id="app">
        <!-- 
            修饰符用于指出一个指令应该以特殊方式绑定。
            这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()，即阻止表单提交的默认行为 
        -->
        <form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.name"/>
            <button type="submit">保存</button>
        </form>
    </div>

    <script src="js/vue.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods: {
                onSubmit() {
                    if (this.user.name != null) {
                        console.log('提交表单');
                    } else {
                        alert('请输入用户名');
                    }
                }
            }
        })
    </script>
</body>

2.5、条件渲染 v-if v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多 —— 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<body>
    <div id="app">
        <input type="checkbox" v-model="ok">同意所有内容
        <p v-if="ok">你同意了</p>
        <p v-else>你还没同意</p>
    </div>

    <script src="js/vue.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

2.6、列表渲染 v-for

<body>
    <div id="app">
        <!-- n从1开始，index从0开始 -->
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>

        <ol>
            <li v-for="(n, index) in 10">{{n}} -- {{index}}</li>
        </ol>

        <!-- 遍历数据列表 -->
        <table border="1">
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>

    </div>

    <script src="js/vue.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                    { id: 1, username: 'helen', age: 18 },
                    { id: 2, username: 'peter', age: 28 },
                    { id: 3, username: 'andy', age: 38 }
                ]
            }
        })
    </script>
</body>

3、VUE 组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

3.1、局部组件

<body>
    <div id="app">
        <Navbar></Navbar>
    </div>

    <script src="js/vue.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            // 定义vue使用的组件
            components: {
                'Navbar': {
                    // 组件内容
                    template: '<ul><li>首页</li><li>学员管理</li></ul>'
                }
            }
        })
    </script>
</body>

3.2、全局组件

在 Narbar.js 中定义全局组件

// 定义全局组件
Vue.component('Narbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

在页面中使用组件

<body>
    <div id="app">
        <Narbar></Narbar>
    </div>

    <script src="js/vue.min.js"></script>
    <script src="components/Narbar.js"></script>

    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>

4、生命周期

重点：created 在页面渲染之前执行，mounted 在页面渲染之后执行

5、Vue 路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

<body>
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">首页</router-link>
            <router-link to="/student">会员管理</router-link>
            <router-link to="/teacher">讲师管理</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

    <!-- 注意先引入vue.js再引入vue-router.js -->
    <script src="js/vue.min.js"></script>
    <script src="js/vue-router.min.js"></script>

    <script>
        // 1. 定义（路由）组件。
        // 可以从其他文件 import 进来
        const Welcome = { template: '<div>欢迎</div>' }
        const Student = { template: '<div>student list</div>' }
        const Teacher = { template: '<div>teacher list</div>' }

        // 2. 定义路由
        // 每个路由应该映射一个组件。
        const routes = [
            { path: '/', redirect: '/welcome' }, //设置默认指向的路径
            { path: '/welcome', component: Welcome },
            { path: '/student', component: Student },
            { path: '/teacher', component: Teacher }
        ]

        // 3. 创建 router 实例，然后传 `routes` 配置
        const router = new VueRouter({
            routes // （缩写）相当于 routes: routes
        })

        // 4. 创建和挂载根实例。
        // 从而让整个应用都有路由功能
        const app = new Vue({
            el: '#app',
            router
        })
    </script>
</body>

6、axios

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端

在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

创建 data.json 模拟数据

{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"z1", "age":21},
            {"name":"z2", "age":22},
            {"name":"z3", "age":23}
        ]
    }
}

页面获取

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 将userList的数据显示 -->
        <div v-for="user in userList">
            {{user.name}} -- {{user.age}}
        </div>
    </div>

    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            // data定义变量和初始值
            data: {
                userList:[]
            },
            // 页面渲染之前执行
            created() {
                // 调用定义的方法
                this.getUserList();
            },
            // 编写具体的方法
            methods: {
                // 创建方法查询data.json中的数据
                getUserList() {
                    // 使用axios发送ajax请求
                    // axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
                    axios.get("data.json")
                        // 请求成功执行then方法
                        .then(response => {
                            // 这里的response就是请求成功后返回的数据
                            // console.log(response);
                            // 通过response获取具体数据，赋值给定义的数组
                            this.userList = response.data.data.items;
                            // console.log(this.userList);
                        })
                        // 请求失败执行catch方法
                        .catch(error => {

                        });
                }
            },
        })
    </script>
</body>

7、Node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

7.1、下载与安装

官网：Node.js

中文网：Node.js 中文网

下载完后打开安装包，选则安装位置，然后一直 Next 即可

安装成功后，打开 cmd ，输入 node -v 即可查看安装版本

7.2、控制台程序

创建 01.js

console.log('Hello Node.js')

再目录下打开 cmd，输入

node 01.js

7.3、服务器端应用开发

创建 02.js

const http = require('http');
http.createServer(function (request, response) {
    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 发送响应数据 "Hello World"
    response.end('Hello Server');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

运行服务器程序