Vue 学习

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: {// 监听 titletitle(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/，如下，