Vue 学习

news2024/9/29 3:33:15

vue 核心语法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 核心语法测试</title>
</head>

<body>
    <div id="app">
        <h1>{{title}}</h1>
        <p>{{content}}</p>
        <p>{{output()}}</p>
        <p>{{output()}}</p>
        <p>{{outputContent}}</p>
        <p>{{outputContent}}</p>
        <!-- 指令表达式 -->
        <!-- 渲染指令 -->
        <p v-text="htmlContent"></p>
        <p v-html="htmlContent"></p>
        <p v-show=bool>v-show test</p>
        <!-- v-if -->
        <!-- v-for -->
        <!-- 属性指令 -->
        <p v-bind:title="title">属性指令v-bind测试</p>
        <p :title="title">属性指令测试简写</p>
        <!-- 事件指令 -->
        <button v-on:click="output">事件指令v-on测试</button>
        <button @click="output">事件指令简写测试</button>
        <!-- 表单指令v-model: 实现数据双向绑定 -->
        <!-- 使用 v-model 杜绝了 DOM-XSS -->
        <input type="text" v-model=inputV>
        <p v-text="inputV"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    title: "标题'\"><u>sabercoco</u>",
                    content: "内容",
                    // htmlContent: "This is a <script>alert(1);" => 不弹窗
                    // htmlContent: "This is a <img src=1 οnerrοr=alert(1)>" => 弹窗
                    htmlContent: "This is a <img src=1 οnerrοr=alert(/xss/)>",
                    bool: true,
                    inputV: "默认内容"
                }
            },
            // methods 属性
            methods: {
                output() {
                    console.log("output() 执行了")
                    return "标题：" + this.title + " --- " + "内容：" + this.content
                }
            },
            // computed 属性：具有缓存性
            computed: {
                outputContent() {
                    console.log("outputContent 执行了")
                    return "标题：" + this.title + " --- " + "内容：" + this.content
                }
            },
            // 侦听器
            watch: {
                // 监听 title
                title(newV, oldV) {
                    console.log("newV: " + newV + " --- " + "oldV: " + oldV)
                }
            }
        })
    </script>
</body>
</html>

使用 vue 创建一个项目

检查是否已经安装了 npm 和 node

npm --version
node --version

使用 npm 安装 vue

npm install -g @vue/cli

检查 vue 工具是否安装成功

vue --version

使用 vue 工具创建一个名为 vue-demo-project 的项目

这是命令行的创建方式
vue create vue-demo-project
这是 ui 的创建方式
vue ui

通过 vue 脚手架创建的项目结构分析

创建项目

vue create vue-demo-project
在这里插入图片描述
选择 [Vue 2]，然后回车，等待项目创建完毕。

项目结构图

在这里插入图片描述

src目录是开发者编写代码的地方，代码编写完毕后进入项目根目录执行npm run build进行代码打包，将会得到一个dist目录，这个目录就是项目上线所使用的目录，dist目录如下，
在这里插入图片描述

public目录

在这里插入图片描述
public目录中的内容不参与编译。

模拟将dist上线

进入项目根目录执行npm install serve -g安装 serve 工具，安装完毕后执行serve dist，如下，
在这里插入图片描述
访问http://localhost:3000，如下，

如果直接使用源码进行上线呢？来到项目根目录执行npm run serve，如下，

访问http://localhost:8081/，如下，