C4前端云原生学习笔记——vue

vue学习笔记

键盘里的咬肌

1873人浏览 · 2022-08-04 23:05:15

键盘里的咬肌 · 2022-08-04 23:05:15 发布

C4前端云原生学习笔记

文章目录

C4前端云原生学习笔记
- 一、vue知识点

一、vue知识点

1、vue简介

官网：cn.vuejs.org
渐进式框架：哪个开发阶段都能满足需求
vue全家桶：生态系统（vue router、vuex、vue服务器渲染）

2、开发工具

编辑器：vs code；
测试工具：chrome；
插件：live server + vetur + easy less。

3、初识vue

版本选择

平时学习：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

写项目：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

挂载元素与数据传递

<!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>vue</title>
</head>
<body>
    <div id="app">
        <h1>{{book_name}}</h1>
        <p>{{book_info}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app", // 指定一个元素作为根容器
        // 简洁版
        data() {
            return {
                book_name: "红楼梦",
                book_info: "一群女人和一个男人的故事"
            }
        }
        // 完整版
        // data: function() {
        //     return {

        //     }
        // }
    })
</script>
</html>

methods方法

<!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>vue</title>
</head>
<body>
    <div id="app">
        <h1>{{book_name}}</h1>
        <p>{{book_info}}</p>
        <p>{{getName('lee')}}</p>
        <p>{{readBook()}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app", // 指定一个元素作为根容器
        // 简洁版
        data() {
            // 数据源
            return {
                book_name: "红楼梦",
                book_info: "一群女人和一个男人的故事"
            }
        },
        // 完整版
        // data: function() {
        //     return {

        //     }
        // },
        methods: {
            // 方法
            getName(name) {
                return `hello ${name}`;
            },
            readBook() {
                // this始终指向该vue实例
                return `今天晚上读${this.book_name}`
            }
        }
    })
</script>
</html>

v-bind

作用：把属性值变成动态绑定
格式：v-bind:属性名="js代码"
省略版：:属性名="js代码"

<div id="app">
    <p>
        <a :href="my_url">百度</a>
    </p>
    <p>
        <input type="text" v-bind:value="book_name">
    </p>
    <!-- 绑定后的引号内必须是js代码，原内容不再是字符串，要想写入字符串需要给内容加上引号，注意与外边的引号做区分 -->
    <p :style="'color: ' + color">空山新雨后，天气晚来秋</p>
</div>

new Vue({
    el: "#app", // 指定一个元素作为根容器
    data() {
        // 数据源
        return {
            book_name: "红楼梦",
            book_info: "一群女人和一个男人的故事",
            my_url: "https://www.baidu.com",
            color: "skyblue"
        }
    }
)}

v-text

作用：引入数据，仅限于文本

用法示例：

<div id="app">
    <p v-text="book_info"></p>
</div>

new Vue({
    el: "#app",
    data() {
        return {
            book_info: "一群女人和一个男人的故事"
        }
    }
)}

v-html

作用：引入数据，将数据中的标签内容进行转义

用法示例：

<div id="app">
    <p v-html="web_url"></p>
</div>

new Vue({
    el: "#app",
    data() {
        return {
            web_url: "<a href='https://www.baidu.com'>百度</a>"
        }
    }
)}

v-on

作用：绑定事件

用法示例：

<div id="app">
    <button v-on:click="n++">+1</button>
    <button v-on:click="n--">-1</button>

    <button v-on:click="add(1)">+1</button>
    <button v-on:click="sub(1)">-1</button>

    <!-- 双击 -->
    <button v-on:dblclick="add(10)">+10</button>
    <button v-on:dblclick="sub(10)">-10</button>

    <p>蜂蜜柚子茶{{n}}杯</p>
</div>

new Vue({
    el: "#app",
    data() {
        return {
            n: 10
        }
    },
    methods: {
        add(m) {
            return this.n += m;
        },
        sub(m) {
            return this.n -= m;
        }
    }
)}